文章目录
1 Element-ui 组件安装
1.1 官网地址
- Element-UI:一套基于2.0的桌面端组件库
https://element.eleme.cn/#/zh-CN
1.2 安装element-ui依赖包
npm i element-ui -S
1.3 导入element-ui资源
- main.js 中导入资源
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
vue.use(ElementUI)
1.4 添加element-ui的组件代码
粘贴代码到项目中app.vue文件
<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>
运行项目
nmp run serve
结果如下
1.5 vue.config.js 配置如下
- 设置服务器端口以及从终端直接打开浏览器项目
module.exports = {
devServer : {
port:8888,
open:true
}
}
2 自动创建element-ui
按需求导入,减少项目的体积