install elementui,
npm i element-ui -S1. In main.js, introduce elementUI, which is divided into three steps
a. import element-ui
b. import css file
c. use(ElementUI)
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index' // 改变引入store
import ElementUI from 'element-ui'; // 引入ElementUI_ 1
import 'element-ui/lib/theme-chalk/index.css'; // 引入ElementUI_ 2
Vue.use(ElementUI); // 引入ElementUI_ 3
Vue.config.productionTip = false
//导航守卫，每次切换路由时触发
// router.beforeEach((to, from, next)=>{
// console.log(to.path)
// next()
// })
// Vue.use(ElementUI);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
2. Put the vue files related to ElementUI learning into the newly created vues->elements folder, such as layout component vue files, put them in vues->elements->layout.vue
3. Change the route router->index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({
routes:[
// 学习vuex， 多定义一个路由
{
path:'/',
component:() => import('../views/Parent.vue'),
// 重定向
redirect:'/layout'
},
{
path:'/home/:id',
// 动态路由传参，根据name指定，需要多配置一个name
name:'home',
component:() => import('../views/Home.vue'),
Children:[{
path:'/child',
component:() => import('../views/Child.vue')
}]
},
{
// elementUI 之 layout
path:'/layout',
component:() => import('../views/elements/layout.vue')
},
]
})
export default router
4. layout layout & container page layout
layout：
<template>
<div style="background-color: blueviolet;">
<h3>四等分布局</h3>
<el-row :getters="20">
<el-col :span="6"><div class="content">1</div></el-col>
<el-col :span="6"><div class="content">2</div></el-col>
<el-col :span="6"><div class="content">3</div></el-col>
<el-col :span="6"><div class="content">4</div></el-col>
</el-row>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.content{
background-color: antiquewhite;
border: 1px solid white;
}
</style>container：
<template>
<div>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
}
</script>
<!--
<style scoped>
.content{
background-color: antiquewhite;
border: 1px solid white;
}
</style> -->
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>