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

作者

前言

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

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

环境注意事项

node.js 版本一定 不要 最新的，否则有些包的版本不支持，造成环境一直错误无法运行。

安装如下包，缺失则执行效果出现不了，最好全安装上：

cnpm install vue-router -g
cnpm install element-ui -g
cnpm install element-plus -g
cnpm install sass -g
cnpm install sass-loader -g
cnpm install node-sass -g
cnpm install less -g
cnpm install style-loader -g
cnpm install css-loader -g

少安装可能会报错误：*!!vue-style-loader!css-loader?{"sourceMap":true}!../../../../vue-loader
参考：vue 解决关于*!!vue-style-loader!css-loader?{“sourceMap”:true}!../../../../vue-loader

如果出现错误，可能版本太高或太低了，比如我的 sass 版本就太高了，下面是改为指定版本

cnpm install sass@4.14.1 -g

参考：vue-style-loader!css-loader报错解决方法

如果后面执行时出现类似下面的错误时

npm WARN ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):

错误信息中已经提示了 You must install peer dependencies yourself. 这是提示你需要安装这个包！

比如上边信息就提示要安装 ajv@6.9.1 ，ajv 的 6.9.1 版本的包

npm install ajv@6.9.1

生成项目

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

vue init webpack testadmin

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

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

npm install

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

npm 镜像地址配置

1、得到原本的镜像地址

npm get registry

https://registry.npmjs.org/

2、设成淘宝的

npm config set registry http://registry.npm.taobao.org/
# 下面是使用 yarn 方式安装
# 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

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

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

VUE + Element UI

安装并引入

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

npm i element-ui -S

然后我们打开修改 /src/main.js 文件，引入 element-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)
});

Container 布局组件

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

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

请看官方文档：Container 布局容器

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

  • <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

  • <el-header>：顶栏容器。

  • <el-aside>：侧边栏容器。

  • <el-main>：主要区域容器。

然后修改路由/src/router/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

（如果之前已经启动，就不用了，集成了 webpack 支持热更新）。

NavMenu 导航菜单 组件

直接复制下图里面的代码，到 layout.vue，<el-header>、<el-aside>位置，然后微调样式即可。

预览：

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

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

.el-container{
  position: absolute; 
  width: 100%; 
  top: 0px ; 
  left: 0 ; 
  bottom: 0;
}
.el-header{
  padding: 0;
  z-index: 1000;
}

// header菜单需要靠右的添加.fr即可(如：<el-menu-item class="fr" index="3">消息中心</el-menu-item>)
.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 Router 嵌套路由

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

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

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

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

main.vue

<template>
  <div id="main">
    <h2>我这里是首页</h2>
    <router-link to="/user">前往用户中心</router-link>
  </div>
</template>

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

user.vue

<template>
  <div id="user">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户中心</el-breadcrumb-item>
    </el-breadcrumb>
    <h2>用户中心</h2>
  </div>
</template>

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

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

修改/src/router/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/layout.vue 里面的<el-main>里面添加<router-view/>:

...
<el-main><router-view/></el-main>
...

效果预览：

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

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

大部分内容为链接：从零开始搭建 VUE + Element UI后台管理系统框架

已搭建好的框架

推荐一个已搭建好的后台管理框架 Fantastic-admin，有免费版和付费版两种：

官方网址：https://hooray.gitee.io/fantastic-admin/

Gitee地址：https://gitee.com/hooray/fantastic-admin

文档地址：https://hooray.gitee.io/fantastic-admin/guide/ready.html

如果是为了学习的话还是手动做做最好

发表评论