Element-UI 的安装与配置使用

Element-UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
官网：http://element-cn.eleme.io/#/zh-CN

Element-UI 的安装与配置使用有两种方式，下面简单介绍一下。

基于命令行方式手动安装

步骤：

1.在项目的终端运行 npm i element-ui -S 命令安装依赖包

npm i element-ui -S

2.在项目的 main.js 中导入 Element-UI 相关资源

// 导入组件库
import ElementUI from 'element-ui';
// 导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css';
// 配置 Vue 插件
Vue.use(ElementUI);

大致经过以上两个步骤的安装导入配置后我们就可以在项目中使用 Element-UI 中的各类组件了。在项目中使用 Element-UI 时，先打开 Element-UI 的官网，进入 组件 在左侧根据自己的需求查找所需组件直接复制代码到项目中按照该组件的使用说明配置使用即可。

基于 Vue 图形化界面自动安装

ps.所谓的 Vue 图形化界面即在终端运行 vue ui 后终端自动在浏览器中打开的 Vue 项目管理界面。

步骤：

1.运行 vue ui 命令，打开图形化界面

vue ui

2.通过 Vue 项目管理器，进入具体的项目配置面板（此界面左上角可看到当前打开项目名称）
3.点击 插件 -> 添加插件 进入插件查询面板
4.搜索 vue-cli-plugin-element 并安装

vue-cli-plugin-element

5.在 main.js 文件中配置插件，实现按需导入，从而减少打包后项目的体积，示例如下：

// 按需导入 Button 和 Select 这两个组件
import { Button, Select } from 'element-ui';

// 组件导入后需要在 Vue.use() 中进行注册
Vue.use(Button)
Vue.use(Select)

按示例代码格式导入并注册所需组件后，即可在项目中使用该组件了，使用方法仍旧是建议参照 Element-UI 官网组件介绍及示例。像 Element-UI 中的 Input 输入框、Table 表格、Form 表单等都是功能强大、样式炫酷、用法灵活的组件，快去试试体验一下吧！

好好学习、天天向上！        ：)