VUE+ElementUI搭建后台项⽬（⼀）
前⾔
之前有些过移动端的项⽬搭建的⽂章，感觉不写个pc端管理系统⽼感觉少了点什么，最近公司项⽬⽐较多，恰巧要做⼀个申报系统的后台管理系统，鉴于对vue技术栈⽐较熟悉，所以考虑还是使⽤vue技术栈来做；看过⼀个不错的后台配置模板（），页⾯也挺美的，但是还是碍于不想看太多关于这个模板的配置说明，于是⼜拉出来之前我搭建的简易版的模板，决定重构下，使⽤⾃⼰搭建的后台系统模板，配置⾮常简单；本⽂将从初始化项⽬开始⼀直到打包上线做⼀个详细的介绍，看完本⽂章，绝对会对其中的⼀些配置⾮常熟悉，⽤起来也更加顺⼿；项⽬github地址：，感觉好⽤的，感谢给个⼩星星。
初始化项⽬
1、当前开发环境
node.js -v  v8.9.3
npm -v 6.1.0
yarn -v 1.7.0
Vue -v 2.5.2
全局安装vue-cli vue
2、新建⽂件夹，在⽂件下初始化项⽬
vue init webpack vue-elementui（项⽬名称）
同样⼀路回车如下
这⾥取消了ESLint代码风格检查⼯具以及单元测试模块，当然也可以选择保留
依赖包管理⼯具选择了yarn（yarn可以缓存之前下载的模块，可以提⾼模块加载的速度）
默认选择了vue-router模块
然后回车，下载以来模块
结束之后如上图所⽰，cd进⼊项⽬，然后npm run dev，项⽬就可以跑起来了，在浏览器中输⼊localhost:8080即可打开项⽬
项⽬初始化完毕，下⾯来正式开始管理后端的项⽬搭建
admin项⽬搭建配置
上⾯只是简单的完成了项⽬的初始化，接下来将按照下⾯的步骤来完成项⽬的配置
1. 相关三⽅插件的引⼊（vuex、axios、element-ui、sass）
2. 项⽬的基本配置⽂件配置
3. 路由管理模块vue-router及菜单权限的配置
4. 状态管理模块vuex的配置
5. 请求模块axios的配置
1、相关三⽅插件的引⼊（vuex、axios、element-ui、sass）
既然选择了vue全家桶的技术栈，稍⼤型的项⽬vuex是肯定要⽤到的，同时axios必不可少，element-ui（当然还有其它ui框架可以选择，⽐如说bootscrap）、采⽤sass样式预处理框架，下⾯就安装下以上插件
yarn add vuex axios element-ui font-awesome--save
yarn add node-sass  -D
yarn add sass-loader -D
yarn add style-loader -D
以上⼏⾏代码⽤于下载依赖包，安装完成之后，package.json⽂件如下
sass相关插件放在开发环境下⾯
在main.js中引⼊相关插件
上⾯是各三⽅插件的引⼊及注册，状态及路由的配置稍后会详细说明
2、基础配置⽂件的配置
这⾥刚⼀开始要修改的东西不多，暂且只修改以下两处
（1）配置favicon.ico
要配置出⾃⼰的框架，⼀些基础的配置⽂件还是要修改的，先来说个最简单的好了
拿百度来说，先把标签上的图表弄出来，这个配置要去修改buld ==> f.js⽂件
在f.js⽂件中引⼊html-webpack-plugin组件，这个模块可以为html⽂件中引⼊的外部资源，我们使⽤它来添加图标，代码如下const HtmlWebpackPlugin = require('html-webpack-plugin') //为html⽂件中引⼊的外部资源
// 配置在ports⾥⾯
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
favicon: 'favicon.ico',
inject: true
})
],
将图标⽣成的favicon.ico⽂件放在根⽬录下即可，如何⽣成favicon.ico请⾃⾏百度，很简单
（2）请求的代理
现在还没有配置请求模块axios，配置好了之后请求接⼝会遇到跨域问题，修改config ==>index.js⾥⾯的proxyTable，可配置跨域代理。代码如下proxyTable: {
'/api/': {    // api为代理接⼝
target: 'localhost:8085/',    // 这⾥我代理到本地服务
changeOrigin: true
}
},
⽬前基础的配置先修改这两处，如有其它修改的地⽅在下⾯会提到，接下来配置项⽬三⼤模块（router、axios、vuex）
配置router及菜单权限
在我看来，⼀个项⽬最基础的模块就属于路由的配置了，路由不通，页⾯⽆法跳转，⼀切都是浮云，
下⾯就通过路由配置来搭建起项⽬的基本样⼦。在src⽬录下⾯新建以下⽬录和菜单
新建以上⽂件及⽂件夹，作⽤已在上⾯做标注，重点来说下router.js和home.vue的配置
（1）router.js
⾸先要保证所有的⼦页⾯跳转都在home页⾯的框架下，路由配置如下
{
path: '/menu1',
component: home,
name: '菜單⼀',
iconCls: 'el-icon-message', //图标样式class
children: [
{
path: 'sub1',
component: sub11,
name: '⼦菜單⼀'
},
{
path: 'sub2',
component: sub12,
name: '⼦菜單⼆'
}
]
},
{
path: '/menu2',
component: home,
name: '菜單⼆',
iconCls: 'el-icon-message',
children: [
{
path: 'sub1',
component: sub21,
name: '配置管理'
}
]
}
所有的⽗组件都为home组件，这样就可以保证⼦页⾯的跳转都在home的框架下，详细的配置请看我项⽬中的配置
（2）home.vue
home组件中的菜单配置是根据路由遍历出来的，如下代码
<!--导航菜单-->
<aside :class="'menu-expanded'">
　<el-menu :default-active="$route.path" ref="bigmenu" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" unique-opened router>
<template v-for="(item,index) in $utes" v-if="!item.hidden && checkContains(item.name)">
<el-submenu :index="index+''" v-if="!item.single">
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
<el-menu-item v-for="child in item.children" @click="addRouter(child, item.path +'/'+ child.path)" :index="item.path +'/'+ child.path" :key="item.path +'/'+ child.path" v-if="!child.hidden && checkContains(child.name)">{{child.name}}</el-m            </el-submenu>
<router-link v-else v-for="child in item.children" :index="child.path" :key="child.path" :to="child.path">
<div @click="addRouter(child)" class="single-menu">{{child.name}}</div>
vue element admin</router-link>
</template>
</el-menu>
</aside>
checkContains⽅法⽤来检测后台给的树结构中是否包含此节点，这⾥⽤来进⾏权限控制，同样的，项⽬代码⾥都有清晰的注释，可看源码
状态管理模块vuex的配置
状态管理的配置同我之前写的移动端的⼀样
在src⽬录下新建store⽂件夹，如下图
在main.js中引⼊store/index.js，然后全局注册即可使⽤，详细请看代码
请求模块axios的配置
请求模块的封装也和之前写的移动端的配置⼀样
在src⽬录下新建api和config⽬录
common.js⽤于封装请求api
index.js⽤于封装公共请求⽅法，详细请看代码⽂章内容来源：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。