element-ui

1. 下载： cnpm i element-ui -S
2. main.js引入:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);（把ElementUI设置成全局的，任何地方都可以使用它）

3. 下载通过cnpm i style-loader下载style-loader并且在配置文件webpack.config.js中添加
4. 因为要引入各种图片类型，所以还要在webpack.config.js配置文件中添加ttf,woff等图片扩展名
   
5. 运行cnpm run dev 大功告成

引入方式:

引入 Element
你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

完整引入

在 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)
});

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 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)

new Vue({
  el: '#app',
  render: h => h(App)
});

注意:按需引入栅格布局的方式比较特殊，如下图操作:

打包: cnpm run build

小坑:最后打包出来的东西，必须放在http服务器上才能显示完整