1.安装element-ui模块框架，优化后台页面
element-ui可以使用vue-cli脚手架直接安装，且vue中的初始页面组件用的就是element-ui框架class名，应该是vue官方推荐的。
我们开始以admin为例，因为一个动态网站的制作先以后台为始，将我们想要呈现的内容做好上传接口，后续前台开发时直接连接到后台数据会很方便看效果。
终端输入：
cd admin //进入admin端 vue add element 安装过程完全默认回车，我在第二步选了个Y出现了npm错误，折腾了一上午。
此时进入网页，页面的vue已出现element-ui样式的按钮。
2.安装路由模块
现在的页面是无法进行跳转的，所以我们需要加入路由。
vue add router 在第二项“是否使用hostory mode”时我们选择no，就像thinkphp路由时有强制路由和普通路由一样，现在我们用不到这个东西，暂时不安装，今后项目需要使用时只要改动路由文件加一句话即可，大家自行百度。其它默认。
此时页面又自动改动了一下，出现了路由切换。
此时我们观察安装模块后，项目中出现的变化。分别是element，router，和router生成的view页面。
3.使用element-ui
设置路由分为两步：
1，引入创建的vue页面。2，设置页面的路径和路径名称。
此时我们对原路径进行改动，加入一个新的页面Main.vue作为主页面。
router的index.js设置：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Main from '../views/Main.vue' //引入新的页面
Vue.use(VueRouter)
const routes = [
{
path: '/', //路径为首页
name: 'Main', //路径名
component: Main //上方的Main作为这个路径到达的页面
},
]
const router = new VueRouter({
routes
})
export default router
创建Main.vue文件，到element官网找到一段好看的组件代码，稍加改动，注意vue文件中html部分要放在template标签中。
// Main.vue
<template>
<el-container style="height: 100vh; 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>
</template>
<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> 在App.vue主文件中把自带跳转的导航条去掉，并且将下方自带css去掉，设置margin，padding为0。
//App.vue
<template>
<div id="app">
<!-- <div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div> -->
<router-view/>
</div>
</template>
<style>
*{
margin: 0px;
padding: 0px;
}
</style>
最终效果：
4.使用路由
根据App.vue默认生成的路由跳转可以看到路由的方式可以是：
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div> 但是现在我们使用了menu组件，故要在Main.vue刚刚复制的组件中针对此格式加入路由。
// 在menu组件中写入router，找到路由主体
<el-menu router :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>
// 在需要路由的item标签中写入路由路径
<el-menu-item index="/home">选项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-menu> 同时在router的index.js文件中加入路由的信息和路径：
保存后我们点击加入了路由路径的item按钮，就可以进行跳转页面了。
跳转：
5.设置子路由
找到右侧table固定数据，将此处改为一个路由容器，将里边的内容剪切到另一个文件，例如之前剩下的Home.vue文件中。
并且把script数据也拿过来。
原el-main处加入路由容器：
<el-main>
<router-view></router-view>
</el-main> 最重要的部分，修改router中index.js的路由，加入子路由children，参数同样为路径和引入组件信息：
这时，我们把路径放在选项2的item中：
保存，点击选项2测试跳转是否成功：
我这没问题，如果大家有问题评论区留言。
相信大家已经发现，node服务器的开发中路由也不同于过去的常规后端开发去根据实际的文件路径进行路径查询，而是完全由我们自己设置的路由路径进行查询转入，就像给文件起名一样，不需要顾及文件的位置。大家一定对node开发有了进一步的了解。
只要学会了路由，就可以搭建我们的项目了，只要审美没问题，就可以搭建出一个漂亮的静态网站，现在大家可以根据自己的需求把后台的页面和路由做出来了。
要制作一个动态网站，后续还要有很多需要学习借鉴的东西。
下节我们针对mongodb数据库的数据绑定来进行下一步开发。