vue+elementui搭建后台管理界面(2首页) (2)

修改 src/router/index.js 为

import Vue from \'vue\' import Router from \'vue-router\' import Login from \'@/views/TheLogin\' import Container from \'@/container/Container\' Vue.use(Router) export default new Router({ routes: [ { path: \'/\', name: \'Container\', component: Container }, { path: \'/login\', name: \'Login\', component: Login }, ] })

由于容器使用了自定义类，要取消默认的 css 和 图片渲染
再修改 src/App.vue :

<template> <router-view/> </template> <script> export default { name: \'App\' } </script> <style> </style> 5 编写 css

此时的页面：

页面骨架已经搭好，接下来就是装饰
先安装 node-sass sass-loader 模块

npm install node-sass sass-loader --save-dev

新建 src/styles/index.scss

html { height: 100%; } body { position: relative; top: 0; left: 0; margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; } .app { $solidBorder: 1px solid #eee; $sideCollapsedWidth: 66px; $sideExpandedWidth: 230px; font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; font-size: 1em; width: 100%; height: 100%; min-width: 900px; border: $solidBorder; display: flex; display: -webkit-flex; flex-flow: row nowrap; &-side { width: 230px; height: 100%; font-weight: 700; border-right: $solidBorder; &-left { background-color: rgb(238, 241, 246); } &-logo { height: 60px; text-align: center; } &-collapsed { width: 66px!important; } &-expanded { width: 230px!important; } } &-header { width: 100%; height: 60px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; border-bottom: $solidBorder; &-userinfo { position: absolute; right: 0; margin-right: 25px; display: flex; flex-flow: row nowrap; height: 60px; justify-content: flex-start; align-items: center; } } &-body { font-size: 1em; width: 100%; height: 100%; padding: 20px; overflow-y: scroll; } &-footer { width: 100%; height: 60px; } } .inline-block { display: inline-block; }

在 src/main.js 中引入该文件

import \'@/styles/index.scss\'

页面效果: