这一期目标是把系统的布局给搭建起来，采用一个非常简单的后端管理风格，可以参考官方的页面
https://element.eleme.cn/#/zh-CN/component/container

下面我们开始搭建，首先，安装一下vue-router，element-ui

npm install vue-router@3 npm install element-ui 

然后在src目录下创建layouts文件夹和router文件夹 ，

在layouts文件夹下建立Layout.vue文件

在router下建立index.js文件，

import Vue from 'vue'; import Router from 'vue-router'; import Layout from '@/layouts/Layout';  // 引入页面组件 import Dashboard from '@/views/Dashboard'; import Users from '@/views/Users';  Vue.use(Router);  const routes = [     {         path: '/',         component: Layout,         redirect: '/dashboard',         children: [             {                 path: 'dashboard',                 component: Dashboard,                 name: 'Dashboard'             },             {                 path: 'users',                 component: Users,                 name: 'Users'             }             // 其他子路由         ]     },     // 其他路由 ];  const router = new Router({     mode: 'history',     routes });  export default router;  

因为想访问 / 直接转到 /dashboard ,所以有这行设置：

 redirect: '/dashboard',  

还需要新建views文件夹，新增两个vue文件Dashboard.vue和Users.vue

修改main.js ，引入上面我们新增的内容：

import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import router from './router'  Vue.use(ElementUI)  Vue.config.productionTip = false  new Vue({   router,   render: h => h(App), }).$mount('#app') 

运行程序:

npm run serve 

效果：