Vue-cli自动安装Element-UI

Element-UI介绍

官方文档：http://element-cn.eleme.io/#/zh-CN/component

1. 什么是Element-UI

element-ui是由饿了么前端团队推出的一套为开发者、设计师和产品经理准备的基于Vue.js 2.0的桌面组件库，而手机端有对应框架是 Mint UI 。整个ui风格简约，很实用，同时也极大的提高了开发者的效率，是一个非常受欢迎的组件库。

1. 安装Element-UI，推荐使用npm安装方式

npm install element-ui -save

2. 项目中导入Element-UI

a.全局导入

 import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);

b.局部引入，在指定的vue文件中引入所需要的组件或主题样式，如下

import '@/style/theme/element-variables.scss'
import { Message, MessageBox, Loading } from  'element-ui'
    Vue.use(Loading.directive) 
    Vue.prototype.$loading = Loading.service 
    Vue.prototype.$msgbox = MessageBox 
    Vue.prototype.$alert = MessageBox.alert 
    Vue.prototype.$confirm = MessageBox.confirm 
    Vue.prototype.$prompt = MessageBox.prompt 
    Vue.prototype.$message = Message

3. element-ui的使用
   

具体怎么使用，使用什么组件，我们可以参考官网给的每个组件的例子和使用说明，官方文档地址：https://element.eleme.io/#/zh-CN/component/installation
4. 基于图形化界面自动安装element-ui

a.运行vue ui 命令，打开图形化界面
b.通过vue项目管理器，进入到具体的项目配置面板
c.点击插件->添加插件，进入插件查询面板
d.搜索vue-cli-plugin-element并安装
e.配置插件，实现按需导入，从而减少打包后项目的体积