vue+webpack 实现组件按需引入

Element官网，//官网：http://element-cn.eleme.io/#/zh-CN/component/quickstart

注释

 vue用webpack打包时 es6语言可能不兼容部分浏览器 可以安装es2015模块

1、安装依赖包

1	$ npm install --save-dev babel-preset-es2015

ps：babel-loader、babel-core应该是默认装好的，如果没有安装，请重新安装

2、修改【webpack.base.conf.js】配置文件
找到 /\.js$/的rules，进行修改

1 2 3 4 5 6 7 8 9 10

{         test: /\.js$/,         use: [{           loader:  'babel-loader' ,           options: {              presets: [ 'es2015' ]           }         }],         exclude: /node_modules/       }

　　

3、根目录下【.babelrc】文件
文件内容：

1 2 3

{ 　　// 此项指明，转码的规则 "presets": [ 　　//个人认为多此一举 ["es2015", {"modules": false }], //需要npm install babel-preset-es2015 -D // env项是借助插件babel-preset-env，下面这个配置说的是babel对es6,es7,es8进行转码，并且设置amd,commonjs这样的模块化文件，不进行转码 // compiles ES2015+ down to ES5 具体见babel-preset-env官网：https://www.npmjs.com/package/babel-preset-env ["env", { "modules": false }], // 下面这个是不同阶段出现的es语法，包含不同的转码插件 //可参考babel官网 "stage-2" ], "plugins": [ 下面这个选项是引用插件来处理代码的转换，transform-runtime用来处理全局函数和优化babel编译 "transform-runtime", //需要npm install babel-plugin-component -D //官网：http://element-cn.eleme.io/#/zh-CN/component/quickstart ["component", [{ "libraryName": "element-ui", //按需引用element-ui插件 //"styleLibraryName": "theme-default" //按需引用element-ui主题 }]] ], // 下面指的是在生成的文件中，不产生注释 "comments": false, // 下面这段是在特定的环境中所执行的转码规则，当环境变量是下面的test就会覆盖上面的设置 "env": { // test 是提前设置的环境变量，如果没有设置BABEL_ENV则使用NODE_ENV，如果都没有设置默认就是development "test": { "presets": ["env", "stage-2"], // instanbul是一个用来测试转码后代码的工具 "plugins": [ "istanbul" ] } } }

　　我自己的

{

"presets": [

[ "env", {

"modules": false,

"targets": {

"browsers": [ "> 1%", "last 2 versions", "not ie <= 8" ]

}

} ],

[ "es2015", { "modules": false } ],

"stage-2"

],

"plugins": [ "transform-vue-jsx", "transform-runtime",

[

"component",

[

{

"libraryName": "element-ui",

"styleLibraryName": "theme-chalk"

},

{

"libraryName": "mint-ui",

"style": true

}

]

]

]

}

查看

注： Element-ui 引入一个功能时  可能需要按需引入2个组件 自己留意查看即可

mint ui 注册组件时 只能用component  例如 Vue.component(Button.name,Button)

运行查看脚本查看效果，指令视情况而定

1	$ npm run dev

有写错的地方，欢迎指正，不胜感激！

笔者QQ群：148042812