element-ui的基本使用（一）

本章讲的是element-ui在vue中的用法

开发准备

废话不多说直接上教程
在使用element-ui之前我们需要有自己的开发环境，也就是自己的电脑里安装了最新的稳定版的node.js
这个就不多说了，安装之后直接点下一步就行了，其次还要使用vue脚手架，搭建webpack开发环境。

element-ui开发操作

我们首先需要打开官网，看着官方文档，有了文档的参考，我们下次在去用的时候就很方便了。
官方文档: element-ui

打开后我们找到组件菜单，直接看开发指南这个板块；

一、推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
这是官方推荐使用的工具，所以我们在使用包工具打包的时候，也建议使用官方推荐的。
我们可以通过 npm i element-ui -S 进行安装
关于 -S -D的介绍可以看 -S -D: 点击介绍

二、引入组件
通过使用 node.js 中的语法import 在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 的引入。需要注意的是，样式文件需要单独引入。
三、说道这里可能有的人会觉得引入整个element-ui应该太大了，我们应该用什么引什么，在框架中这叫按需引入，element-ui目前页支持按需引入

按需引入方法

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

首先，安装 babel-plugin-component：

然后，将 .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)
});