导入Element ui插件

npm i element-ui -S

配置Element UI

在src文件夹下的main.js的配置如下

代码为：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue.use(ElementUI)

然后在组件中使用Element UI

具体的使用方法大家到Element UI官网中进行选择，官网地址为

https://element.eleme.cn/#/zh-CN

大家根据需要选择组件

这是我根据B站的视频仿出来的一个布局

代码如下：

需要注意的就是它的CSS了，我写的这个CSS比较拉跨，建议大家自行编写。（CSS永远的痛）

下面是我使用Element UI编写的一个登录界面，看起来好丑（哈哈哈哈）。不过功能还是不错的。

具体实现代码如下：

// scoped只在当前组件生效

如何导入并使用Echars插件

安装与配置基本与Element UI的一样，Echars的官网地址为

https://echarts.apache.org/zh/index.html

安装插件

npm install echarts --save

配置插件（src文件下的main.js）

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

使用插件

1 定义界面框的大小

2 编写具体的图形参数

3 效果如下