1.Element安装
使用Vue脚手架搭建好项目后
安装Element-UI
cnpm i element-ui -S
2.引入Element文件
在src下的main.js中添加如下代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
然后就可以完整引入Element-UI了
PS:Config中的index.js中
将useEslint的值改成false,即可关闭Eslint代码规范
即没有了extra semicolon的代码规范要求
3.使用Element-UI里的组件
在官网找到特定的样式:https://element.eleme.cn/#/zh-CN/component
以官网的基础表格Table为例
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
]
};
}
};
</script>
在Vue的src的components下新建一个模板,例如命名为First.vue
输入以上代码
在src里的router的index.js中对这两个vue模板进行注册
import First from '@/components/First'
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
//新增该项
{
path: '/first',//设置访问路径
name: 'First',
component: First
}
]
})
访问localhost:8080/first即可查看效果