前端架构之element-ui

前面已经把vue+webpack项目搭建好了，想要不重复造轮子快速写页面，安装外观框架势在必行。

安装

npm i element-ui -S

安装完成后，在项目根目录下的package.json文件里可以看到安装的版本

快速引入

在入口文件main.js中写入一下内容

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; // 样式文件需要单独引入
Vue.use(ElementUI);

使用组件

在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>

效果图：

查看官网教程