Element-UI的基本使用（命令行+图形化界面）

Element-UI:一套基于2.0的桌面端组件库

官网地址：Element - 网站快速成型工具

1、基于命令行方式手动安装

1、安装依赖包 npm i element-ui -S
2、导入 Element-UI相关资源

// 入口文件 main.js
// 导入组件库：
import ElementUI from "element-ui";
// 导入组件相关样式
import "element-ui/lib/theme-chalk/index.css";
// 配置vue插件
Vue.use(ElementUI);

3、使用Element-ui组件

<template>
  <div id="app">
    <el-row>
		<el-button>默认按钮</el-button>
		<el-button type="primary">主要按钮</el-button>
		<el-button type="success">成功按钮</el-button>
		<el-button type="info">信息按钮</el-button>
		<el-button type="warning">警告按钮</el-button>
		<el-button type="danger">危险按钮</el-button>
	</el-row>
  </div>
</template>

2、基于图形化界面自动安装

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

2、通过Vue项目管理器，进入具体的项目配置面板

3、点击插件- > 添加插件,进入插件查询面板

4、搜索vue-cli-plugin-element并安装

5、配置插件，实现按需导入，从而减少打包后项目的体积

3、最终效果