从零开始搭建 VUE + Element UI后台管理系统框架

点击右上方红色按钮关注“web秀”，让你真正秀起来

前言

后台管理系统前端框架，现在很流行的形式都是，上方和左侧都是导航菜单，中间是具体的内容。比如阿里云、七牛云、头条号、百家号等等，他们的管理系统都是这样的。

从零开始搭建 VUE + UI后台管理系统框架

现在我们从零开始，给小伙伴们讲讲如何来搭建这样的一个前端页面框架，主要用到 VUE + UI。

生成项目

用Vue脚手架初始化一个基于 模板的新项目

vue init webpack testadmin

从零开始搭建 VUE + UI后台管理系统框架

一路向下，会提示你项目名称、项目描述、作者、是否安装vue-(这里选择Y，后面需要用到)、等，看自己情况选择输入咯。

现在他会自动帮你npm 安装项目需要的模块，如果你的版本没有自动安装的话，没有关系，我们切换到项目目录（如cd ）。执行

npm install

如果觉得半天没有反应，是因为 npm 要安装的包都是国外服务器上的，把npm资源镜像改到淘宝镜像即可。

npm 镜像地址配置

1、得到原本的镜像地址

npm get registry 
> https://registry.npmjs.org/

2、设成淘宝的

npm config set registry http://registry.npm.taobao.org/
> yarn config set registry http://registry.npm.taobao.org/

3、换成原来的

npm config set registry https://registry.npmjs.org/

ok， 这时候运行npm run dev即可看到初始化后的项目了。

npm run dev

从零开始搭建 VUE + UI后台管理系统框架

项目目录结构预览，以及.json解析。

从零开始搭建 VUE + UI后台管理系统框架

下面我们来集成 UI，搭建框架。

VUE + UI

安装并引入

同样我们在项目的根目录安装 UI

npm i element-ui -S

然后我们打开修改/src/main.js文件，引入-ui。

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

布局组件

在src目录下，新建page文件夹(作为所有业务页面目录)，然后在page下面新建.vue（作为框架结构文件）。

然后在.vue用运用 UI 布局容器组件。

从零开始搭建 VUE + UI后台管理系统框架

，用于布局的容器组件，方便快速搭建页面的基本结构：

：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。

：顶栏容器。 ：侧边栏容器。 ：主要区域容器。

从零开始搭建 VUE + UI后台管理系统框架

然后修改路由/src//index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/page/layout'
Vue.use(Router)
export default new Router({
 routes: [
 {
 path: '/',
 name: 'Layout',
 component: Layout
 }
 ]
})

启动服务（npm run dev）预览（如果之前已经启动，就不用了，集成了支持热更新）。

从零开始搭建 VUE + UI后台管理系统框架

导航菜单 组件

直接复制下图里面的代码，到.vue，、位置，然后微调样式即可。

从零开始搭建 VUE + UI后台管理系统框架

预览：

从零开始搭建 VUE + UI后台管理系统框架

但是会发现一个问题，下方有很大一部分空白区域，理论上，下方应该是沾满的，不会有任何空白的地方，这时候我们需要修改一样样式，来满足这个需求。

修改/src/page/.vue里面的样式：

.el-container{
 position: absolute; 
 width: 100%; 
 top: 0px ; 
 left: 0 ; 
 bottom: 0;
}
.el-header{
 padding: 0;
 z-index: 1000;
}
// header菜单需要靠右的添加.fr即可(如：消息中心)
.el-header .fr{
 float: right;
}
.el-header .el-menu{
 border-bottom: none;
}
.el-aside, .el-main{
 padding-top: 60px;
}
.el-aside{
 background: #545c64;
}
.el-aside .el-menu{
 border-right: none;
}

然后在/src/App.vue里面添加样式：

*{
 padding: 0;
 margin: 0;
}
html,body{
 width: 100%;
 height: 100%;
}
#app {
 height: 100%;
}

从零开始搭建 VUE + UI后台管理系统框架

Vue 嵌套路由

接下来，肯定是所有其它页面的展示区域，这里涉及到一个知识点：Vue 嵌套路由。

举例：当前我们的路由是:8080，打开的是.vue文件，如果路由改成:8080/main，需要打开main.vue的内容，如果路由改成:8080/user，需要打开user.vue的内容…怎么实现这个功能了？

Vue 嵌套路由来帮我们解决这个问题！

我们先在page目录下面新建2个文件main.vue、user.vue。

main.vue

<script>
export default {
 name: 'main'
}
</script>

user.vue

<script>
export default {
 name: 'User'
}
</script>

然后重点来了，嵌套路由。

修改/src//index.js路由文件：

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/page/layout'
import Main from '@/page/main'
import User from '@/page/user'
Vue.use(Router)
export default new Router({
 routes: [
 {
 path: '/',
 name: 'Layout',
 component: Layout,
 // 嵌套路由
 children: [{
 // 这里不设置值，是把main作为默认页面
 path: '/', 
 name: 'Main',
 component: Main
 },{
 path: '/user',
 name: 'User',
 component: User
 }]
 }
 ]
})

同时在'/src/page/.vue'里面的里面添加:

...

...

效果预览：

从零开始搭建 VUE + UI后台管理系统框架

是不是还意犹未尽了？其实到这里已经结束了。希望能给刚刚入门或者还在学习的小伙伴带来帮助，如果觉得文章看起来不是很好的，可以在评论取评论，看大家的评论情况，推出视频教程。

公告