在vue项目中按需引入element-ui组件

1. 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。安装babel-plugin-component的命令行如下：

   npm install babel-plugin-component -D
   

2. 将 .babelrc 文件中的代码修改为以下内容：
   

   
   {
     "presets": [
       ["env", {
         "modules": false,
         "targets": {
           "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
         }
       }],
       "stage-2"
     ],
     "plugins": ["transform-vue-jsx", "transform-runtime", [
       "component",
       {
         "libraryName": "element-ui",
         "styleLibraryName": "theme-chalk"
       }
     ]]
   }
   
   

3. 为了便于管理引入的element-ui组件，我建议在src目录下新建一个element文件夹，在element文件夹下新建一个index.js文件，如下图：
   
   index.js文件中写入你需要引入的组件，代码示例如下：

   
   // 导入自己需要的组件
   import {Container,Header,Main,Footer,Button,Input, Table,TableColumn,Pagination,Form,FormItem,Tree, Dialog,Message} from 'element-ui'
   const element = {
     install: function (Vue) {
       Vue.use(Container)
       Vue.use(Header)
       Vue.use(Main)
       Vue.use(Footer)
       Vue.use(Button)
       Vue.use(Table)
       Vue.use(TableColumn)
       Vue.use(Pagination)
       Vue.use(Form)
       Vue.use(FormItem)
       Vue.use(Input)
       Vue.use(Tree)
       Vue.use(Dialog)
       Vue.prototype.$message = Message
       // 解决首次进入自动弹出的问题
       Vue.component(Message.name, Message)
     }
   }
   export default element
   
   

4. 在main.js中引入element的样式文件和你创建的element/index文件即可。

   
   //样式文件，需单独引入
   import 'element-ui/lib/theme-chalk/index.css';
   //引入写有需要的组件的文件
   import element from './element/index'
   Vue.use(element)
   
   

5. 使用的方法跟全部引用的方法相同。举个例子：

   
   this.$message({
             showClose: true,
             message: "测试",
             type: "warning",
             duration: 500
           });
           
   

6. 部分引入的好处就是打包文件上线时会让文件变小。其他好处我暂时还未了解到，有知道的小可爱可以在评论中写出。本次分享就写到这里啦~❤