Vue项目中Element-Ui按需引入

重点：不管是全部引入还是按需引入，都要安装element-ui的。
 

1. npm i element-ui -D 完事后可以在package.json的dev标签下看到element。

   npm i element-ui -D

   （解释一下：npm是node包管理器，i是install的简写，-D是dev的简写，表示开发依赖）

2. npm install babel-plugin-component -D

   同样可以在package中看到。
    
3. 配置.babelrc文件，这个文件在项目最外层。这个文件内容各人都不一样，注意附加在plugins数组后边就行。

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

    

4. 引入组件
    

   import Vue from 'vue';
   import { Button, Select } from 'element-ui';
   import App from './App.vue';
   
   Vue.component(Button.name, Button);
   Vue.component(Select.name, Select);
   /* 或写为
    * Vue.use(Button)
    * Vue.use(Select)
    */
   
   new Vue({
     el: '#app',
     render: h => h(App)
   });

    

5. 大功告成。