diff --git a/README.md b/README.md
index 41f9f4e..25eb4b7 100644
--- a/README.md
+++ b/README.md
@@ -67,17 +67,6 @@ npm install vueify --save-dev
browserify -t vueify -e src/main.js -o build/build.js
```
-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:
-
-``` bash
-npm install\
- babel-core\
- babel-preset-es2015\
- babel-runtime\
- babel-plugin-transform-runtime\
- --save-dev
-```
-
And this is all you need to do in your main entry file:
``` js
@@ -86,9 +75,9 @@ var Vue = require('vue')
var App = require('./app.vue')
new Vue({
- el: 'body',
- components: {
- app: App
+ el: '#app',
+ render: function (createElement) {
+ return createElement(App)
}
})
```
@@ -97,7 +86,7 @@ In your HTML:
``` html
-
+
```
@@ -121,35 +110,34 @@ Make sure to have the `NODE_ENV` environment variable set to `"production"` when
If you are using Gulp, note that `gulp --production` **does not** affect vueify; you still need to explicitly set `NODE_ENV=production`.
-## ES2015 by Default
-
-Vueify automatically transforms the JavaScript in your `*.vue` components using Babel. Write ES2015 today!
+## ES2015 with Babel
-The default Babel (6) options used for Vue.js components are:
+Vueify is pre-configured to work with Babel. Simply install Babel-related dependencies:
-``` js
-{
- "presets": ["es2015"],
- "plugins": ["transform-runtime"]
-}
+``` bash
+npm install\
+ babel-core\
+ babel-preset-es2015\
+ --save-dev
```
-If you wish to override this, you can add a `.babelrc` file at the root of your project:
+Then create a `.babelrc`:
``` json
{
- "presets": ["es2015", "stage-2"],
- "plugins": ["transform-runtime"]
+ "presets": ["es2015"]
}
```
+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).
+
You can also configure babel with the `babel` field in `vue.config.js`, which will take the highest priority.
-## Enabling Pre-Processors
+## Enabling Other Pre-Processors
-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`.
+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`.
-These are the built-in preprocessors:
+These are the preprocessors supported by vueify out of the box:
- stylus
- less
@@ -158,13 +146,9 @@ These are the built-in preprocessors:
- pug
- coffee-script (use `coffee` in [config section](#configuring-options))
-## Autoprefix by Default
-
-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.
-
## PostCSS
-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.
+Vueify uses PostCSS for scoped CSS rewrite. You can also provide your own PostCSS plugins! See [config section](#configuring-options) below for an example.
## Configuring Options
@@ -178,15 +162,6 @@ module.exports = {
},
// provide your own postcss plugins
postcss: [...],
- // configure autoprefixer
- autoprefixer: {
- browsers: ['last 2 versions']
- },
- // configure html minification in production mode
- // see https://github.com/kangax/html-minifier#options-quick-reference
- htmlMinifier: {
- // ...
- },
// register custom compilers
customCompilers: {
// for tags with lang="ts"
@@ -209,9 +184,7 @@ Example using custom PostCSS plugin:
var cssnext = require('cssnext')
module.exports = {
- postcss: [cssnext()],
- // disable autoprefixer since cssnext comes with it
- autoprefixer: false
+ postcss: [cssnext()]
}
```
@@ -253,8 +226,6 @@ browserify('./main.js')
### Scoped CSS
-> Experimental
-
When a `