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

vue+webpack 实现组件按需引入

注释

vue+webpack 实现组件按需引入

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)

vue+webpack 实现组件按需引入

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

1

$ npm run dev

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

笔者QQ群：148042812

vue+webpack 实现组件按需引入

查看

相关推荐