vue-cli脚手架中使用UI框架（Element Ui）篇

## element-ui

  ## 官网 https://element.eleme.cn/#/zh-CN

  ## 使用步骤：

  1. 安装

    

npm i element-ui -S

  2. 引入

    方式1：完整引入：（个人建议完整引入，因为按需引入比较麻烦而且完整的组件大小也不算太大）

      在 main.js 中写入以下内容： 

     import Vue from 'vue';

      import ElementUI from 'element-ui';

      import 'element-ui/lib/theme-chalk/index.css';

      import App from './App.vue';

      

      Vue.use(ElementUI);

      

      new Vue({

        el: '#app',

        render: h => h(App)

      });

    方式2：按需引入：（如果有特殊需求只能按需引入的话，下面是按需引入的方法）

      首先，安装 babel-plugin-component：

      

npm install babel-plugin-component -D

      然后，将 .babelrc 修改为：     

 {

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

        "plugins": [

          [

            "component",

            {

              "libraryName": "element-ui",

              "styleLibraryName": "theme-chalk"

            }

          ]

        ]

      }      

    接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：      

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)

       */