Skip to content
This repository was archived by the owner on Dec 26, 2018. It is now read-only.

Commit 8350490

Browse files
yyx990803yyx990803
committed
update readme
1 parent b0621f9 commit 8350490

File tree

1 file changed

+25
-62
lines changed

1 file changed

+25
-62
lines changed

‎README.md

Lines changed: 25 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -67,17 +67,6 @@ npm install vueify --save-dev
6767
browserify -t vueify -e src/main.js -o build/build.js
6868
```
6969

70-
If you are using npm 3+, it no longer auto install the peer dependencies. So you will also have to also install the babel-related dependencies:
71-
72-
``` bash
73-
npm install\
74-
babel-core\
75-
babel-preset-es2015\
76-
babel-runtime\
77-
babel-plugin-transform-runtime\
78-
--save-dev
79-
```
80-
8170
And this is all you need to do in your main entry file:
8271

8372
``` js
@@ -86,9 +75,9 @@ var Vue = require('vue')
8675
var App = require('./app.vue')
8776

8877
new Vue({
89-
el: 'body',
90-
components: {
91-
app: App
78+
el: '#app',
79+
render: function (createElement) {
80+
return createElement(App)
9281
}
9382
})
9483
```
@@ -97,7 +86,7 @@ In your HTML:
9786

9887
``` html
9988
<body>
100-
<app></app>
89+
<div id="app"></div>
10190
<script src="build.js"></script>
10291
</body>
10392
```
@@ -121,35 +110,34 @@ Make sure to have the `NODE_ENV` environment variable set to `"production"` when
121110

122111
If you are using Gulp, note that `gulp --production` **does not** affect vueify; you still need to explicitly set `NODE_ENV=production`.
123112

124-
## ES2015 by Default
125-
126-
Vueify automatically transforms the JavaScript in your `*.vue` components using Babel. Write ES2015 today!
113+
## ES2015 with Babel
127114

128-
The default Babel (6) options used for Vue.js components are:
115+
Vueify is pre-configured to work with Babel. Simply install Babel-related dependencies:
129116

130-
``` js
131-
{
132-
"presets": ["es2015"],
133-
"plugins": ["transform-runtime"]
134-
}
117+
``` bash
118+
npm install\
119+
babel-core\
120+
babel-preset-es2015\
121+
--save-dev
135122
```
136123

137-
If you wish to override this, you can add a `.babelrc` file at the root of your project:
124+
Then create a `.babelrc`:
138125

139126
``` json
140127
{
141-
"presets": ["es2015", "stage-2"],
142-
"plugins": ["transform-runtime"]
128+
"presets": ["es2015"]
143129
}
144130
```
145131

132+
And voila! You can now write ES2015 in your `*.vue` files. Note if you want to use ES2015 on normal `*.js` files, you will also need [babelify](https://github.com/babel/babelify).
133+
146134
You can also configure babel with the `babel` field in `vue.config.js`, which will take the highest priority.
147135

148-
## Enabling Pre-Processors
136+
## Enabling Other Pre-Processors
149137

150-
You need to install the corresponding node modules to enable the compilation. e.g. to get stylus compiled in your Vue components, do `npm install stylus --save-dev`.
138+
For other pre-processors, you also need to install the corresponding node modules to enable the compilation. e.g. to get stylus compiled in your Vue components, do `npm install stylus --save-dev`.
151139

152-
These are the built-in preprocessors:
140+
These are the preprocessors supported by vueify out of the box:
153141

154142
- stylus
155143
- less
@@ -158,13 +146,9 @@ These are the built-in preprocessors:
158146
- pug
159147
- coffee-script (use `coffee` in [config section](#configuring-options))
160148

161-
## Autoprefix by Default
162-
163-
Starting in 5.0.0, all CSS output via vueify will be autoprefixed by default. See [config section](#configuring-options) below on customizing the options.
164-
165149
## PostCSS
166150

167-
Vueify uses PostCSS for scoped CSS rewrite and autoprefixing. You can also provide your own PostCSS plugins! See [config section](#configuring-options) below for an example.
151+
Vueify uses PostCSS for scoped CSS rewrite. You can also provide your own PostCSS plugins! See [config section](#configuring-options) below for an example.
168152

169153
## Configuring Options
170154

@@ -178,15 +162,6 @@ module.exports = {
178162
},
179163
// provide your own postcss plugins
180164
postcss: [...],
181-
// configure autoprefixer
182-
autoprefixer: {
183-
browsers: ['last 2 versions']
184-
},
185-
// configure html minification in production mode
186-
// see https://github.com/kangax/html-minifier#options-quick-reference
187-
htmlMinifier: {
188-
// ...
189-
},
190165
// register custom compilers
191166
customCompilers: {
192167
// for tags with lang="ts"
@@ -209,9 +184,7 @@ Example using custom PostCSS plugin:
209184
var cssnext = require('cssnext')
210185

211186
module.exports = {
212-
postcss: [cssnext()],
213-
// disable autoprefixer since cssnext comes with it
214-
autoprefixer: false
187+
postcss: [cssnext()]
215188
}
216189
```
217190

@@ -253,8 +226,6 @@ browserify('./main.js')
253226

254227
### Scoped CSS
255228

256-
> Experimental
257-
258229
When a `<style>` tag has the `scoped` attribute, its CSS will apply to elements of the current component only. This is similar to the style encapsulation found in Shadow DOM, but doesn't require any polyfills. It is achieved by transforming the following:
259230

260231
``` html
@@ -285,22 +256,20 @@ Into the following:
285256

286257
1. You can include both scoped and non-scoped styles in the same component.
287258

288-
2. A child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS.
289-
290-
3. Partials are not affected by scoped styles.
259+
2. The following will be affected by both the parent's scoped CSS and the child's scoped CSS:
260+
- A child component's root node
261+
- Content inserted to a child component via `<slot>`
291262

292263
### Hot Reload
293264

294-
> Experimental
295-
296265
To enable hot component reloading, you need to install the [browserify-hmr](https://github.com/AgentME/browserify-hmr) plugin:
297266

298267
``` bash
299268
npm install browserify-hmr --save-dev
300269
watchify -p browserify-hmr index.js -o bundle.js
301270
```
302271

303-
A full setup example with hot reloading is available at [vuejs/vueify-example](https://github.com/vuejs/vueify-example).
272+
You can scaffold a hot-reload enabled project easily using `vue-cli` and the [this template](https://github.com/vuejs-templates/browserify-simple-2.0).
304273

305274
## Compiler API
306275

@@ -319,15 +288,9 @@ compiler.compile(fileContent, filePath, function (err, result) {
319288

320289
Currently there are syntax highlighting support for [Sublime Text](https://github.com/vuejs/vue-syntax-highlight), [Atom](https://atom.io/packages/language-vue), [Vim](https://github.com/posva/vim-vue), [Visual Studio Code](https://marketplace.visualstudio.com/items/liuji-jim.vue) and [Brackets](https://github.com/pandao/brackets-vue). Contributions for other editors/IDEs are highly appreciated! If you are not using any pre-processors in Vue components, you can also get by by treating `*.vue` files as HTML in your editor.
321290

322-
## Example
323-
324-
For an example setup using most of the features mentioned above, see [vuejs/vueify-example](https://github.com/vuejs/vueify-example).
325-
326-
If you use Webpack, there's also [vue-loader](https://github.com/vuejs/vue-loader) that does the same thing.
327-
328291
## Changelog
329292

330-
For version 9.0.0 and above, please see the [Releases](https://github.com/vuejs/vueify/releases) page for changes in each version.
293+
Please see the [Releases](https://github.com/vuejs/vueify/releases) page for changes in versions ^9.0.0.
331294

332295
## License
333296

0 commit comments

Comments
 (0)