1、目录
├─src
| ├─assets 静态资源文件
| ├─components 公共组件
| ├─icon svg 图标
| ├─layout 界面布局
| ├─router 路由文件
| ├─services 请求服务
| ├─store vuex
| ├─styles scss文件
| ├─utils 公共方法文件
| ├─views 模块文件
项目git地址：https://git.xxxx/vue-admin-zonst
项目脚手架git地址：https://git.xxxx/vue-admin-zonst/src/node-cli
2、环境配置
package.json
"dev": "vue-cli-service serve", // 对应文件.env.development
"dev:sw": "vue-cli-service serve --mode sw", // 对应文件.env.sw
"dev:new": "vue-cli-service serve --mode new", // 对应文件.env.new
"build:prod": "vue-cli-service build", // 对应文件.env.production
"build:sw": "vue-cli-service build --mode prodsw", // 对应文件.env. prodsw
"build:new": "vue-cli-service build --mode prodnew", // 对应文件.env. prod new
注意：环境配置文件，主要需要NODE_ENV 和 VUE_APP_BASE_API，在请求服务文件apiURL中必须要和VUE_APP_BASE_API设置的一致，切换环境的时候需要用到 。 NODE_ENV 在打包正式环境关闭打印输出和判断正式和测试用到（只支持3种模式：development，production，test）
3、请求服务
项目开发api层架构
简单介绍下不同的地方：
// 配置不同模块api
let accounts
// 当测试环境时,可以切换为正式环境
if (getIsUseMasterApiKey() === 'true' && process.env.NODE_ENV.indexOf('development') > -1) {
accounts = apiURL['production'][name]
} else {
accounts = apiURL[process.env.VUE_APP_BASE_API][name]
}
注意：myserver.postData('user', user)前面的‘user’必须要和apiUrl 的模块接口（user）对应上。
4、layout配置
settings
module.exports = {
logo: 'component', // 配置logo 只处理了svg的
title: 'Vue Admin Zonst', // 配置title
breadcrumb: false, // 配置面包屑
IsSearch: false, // 配置菜单搜索
tagsView: false, // 配置导航标签
Layout: false, // 配置布局 true 左右结果 false 上下结构
fixedHeader: true, // 是否固定头部导航栏
sidebarLogo: true, // 是否显示Logo和title
navbarBackground: '#324151', // 头部导航栏背景颜色
navbarColor: '#fff', // 头部导航栏字体和图标颜色
isUnifiedLogin: true, // 是否统一登入
isGameShow: true, // 是否展示游戏平台
isSwitchEnvironment: process.env.NODE_ENV.indexOf('development') > -1 // 是否切换环境 isAPIRouter: true // 是否异步请求接口返回router
}
5、router 路由文件
1、文件生成路由
模块文件统一写在views/autoRouter 下面
包含文件夹的是嵌套路由（二级路由），
不包含的一级路由。建议使用文件夹来包含，可创建子文件夹，即使是一级路由也不会影响。
目前最多只支持二级路由的生成，所以在autoRouter中可以根据自己的需要，将文件按子模块新增文件夹（建立3级文件夹），是没有问题的。
如果需要3级路由，就自行配置路由文件就可以了，在router/modules下配置，该文件夹下的js文件会自动加载到router中
// 自动获取modules配置
const files = require.context('./modules', false, /\.js$/)
let tmp
files.keys().forEach(key => {
tmp = files(key).default
})
const requireAllVueComponents = require.context('../views/autoRouter', true, /\.vue$/, 'lazy')
const routerList = []
requireAllVueComponents.keys().forEach((allVueComponentItem) => {
const completeName = allVueComponentItem.match(/\w+\.vue$/, '')[0]
const routerObj = {}
routerObj.path = '/' + allVueComponentItem.replace(/\./, 'autoRouter').replace(/.vue$/, '')
routerObj.name = completeName.replace(/.vue$/, '')
routerObj.component = () => requireAllVueComponents(allVueComponentItem).default || requireAllVueComponents(allVueComponentItem)
// router 子路径
const routerChildren = {
path: '',
component: routerObj.component,
name: routerObj.name,
meta: {
title: '',
icon: '',
permissionArray: []
}
}
// router 路径
const router = {
path: '',
component: Layout,
meta: {
title: '',
icon: '',
permissionArray: []
},
children: []
}
const routerArr = routerObj.path.split('/')
let isSame = true
// 过滤所有components下的子组件，无需生成路由
if (routerArr.includes('common')) {
return
}
// 初始化属性值
const routerAttribute = function(name, attribute) {
const init = {
index: 1,
icon: 'component',
name: name,
permission: [1, 2, 3],
newTime: new Date()
}
if (attribute === 'newTime') {
return (routerName[name] && routerName[name] !== '' && routerName[name][attribute]) ? new Date(routerName[name][attribute]) : init[attribute]
}
return (routerName[name] && routerName[name] !== '' && routerName[name][attribute]) ? routerName[name][attribute] : init[attribute]
}
// 设置父属性值
const parentAttribute = (name) => {
router.index = routerAttribute(name, 'index')
router.meta.icon = routerAttribute(name, 'icon')
router.meta.title = routerAttribute(name, 'name')
router.meta.permissionArray = routerAttribute(name, 'permission')
router.meta.newTime = routerAttribute(name, 'newTime')
}
// 设置子属性值
const childrenAttribute = (name) => {
routerChildren.index = routerAttribute(name, 'index')
routerChildren.meta.icon = routerAttribute(name, 'icon')
routerChildren.meta.title = routerAttribute(name, 'name')
routerChildren.meta.newTime = routerAttribute(name, 'newTime')
routerChildren.meta.permissionArray = routerAttribute(name, 'permission')
}
switch (routerArr.length) {
case 3:
// 当路由不是嵌套路径时 直接push到routerList中
parentAttribute(routerObj.name)
router.children.push(routerChildren)
routerChildren.path = routerObj.path + ((routerName[routerObj.name] && routerName[routerObj.name] !== '' && routerName[routerObj.name]['isID'] && isGameShow) ? routerName[routerObj.name]['isID'] : '')
childrenAttribute(routerObj.name)
routerList.push(router)
break
case 4:
// 当路由是嵌套路径时，如果routerList中包含改路径，则在children中加入子路径，否则在routerList中push。
router.path = '/' + routerArr[1] + '/' + routerArr[2]
router.name = routerArr[2] + 'p'
parentAttribute(routerArr[2])
routerChildren.path = routerArr[3] + ((routerName[routerObj.name] && routerName[routerObj.name] !== '' && routerName[routerObj.name]['isID'] && isGameShow) ? routerName[routerObj.name]['isID'] : '')
childrenAttribute(routerObj.name)
routerList.forEach(item => {
if (routerArr[2] + 'p' === item.name) {
item.children.push(routerChildren)
isSame = false
}
})
if (isSame) {
router.children.push(routerChildren)
routerList.push(router)
}
break
}
})
2、router 配置文件
这个文件可以配置
左侧菜单中文名
左侧菜单图标
左侧菜单排序
左侧菜单权限
左侧菜单New!展示到期时间
动态id 可以配置任意参数
建议配置文件也按模块区分
routerName.js 写父菜单的配置
子菜单配置写在configurationModule中，该文件夹js文件会自动加载到routerName
有利于查看，有层次
routerName.js
// 自动获取modules配置
const files = require.context('./ConfigurationModule', false, /\.js$/)
let tmp
files.keys().forEach(key => {
tmp = files(key).default
})
export const routerName = {
...tmp,
/**
* key 文件名
* name 左侧菜单中文名
* icon 左侧菜单图标
* index 左侧菜单排序
* permission 左侧菜单权限
* newTime 左侧菜单New!展示到期时间
* isID: 动态id 可以配置任意参数
*/
system: {
name: '系统管理',
icon: 'form',
index: 2,
permission: [1, 2, 3],
newTime: '2021-05-20',
}
}
3、router生成菜单
router生成菜单关键是生成permission/state/routes 属性
addRoutes是动态路由属性
// 根据权限生成动态路由
generateRoutes({ commit }, roles) {
return new Promise(resolve => {
const accessedRoutes = filterAsyncRoutes(asyncRouterMap, roles)
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
})
}
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
// 如果isGameShow 设置true 控制选择游戏平台才能展示菜单选项
if (isGameShow) {
if (state.gameId !== '') {
state.routes = constantRoutes.concat(routes)
} else {
state.routes = constantRoutes
}
} else {
state.routes = constantRoutes.concat(routes)
}
},
4、菜单排序
菜单排序是在生成菜单路由的时候处理，利用sort 排序。filterAsyncRoutes本身就是一个递归方法，所以可在这里调用，处理树形结构的排序
// 左侧菜单排序
const compare = function(prop) {
return function(obj1, obj2) {
const val1 = obj1[prop]
const val2 = obj2[prop]
if (val1 < val2) {
return -1
} else if (val1 > val2) {
return 1
} else {
return 0
}
}
}
在filterAsyncRoutes调用该方法
routes = routes.sort(compare('index'))
注意：排序序号，父菜单只管父菜单兄弟之间的排序，子菜单只管子菜单兄弟之间的排序。所以这里会建议父菜单和子菜单的分开，子菜单配置按模块划分。
5、菜单New!标志
这里我处理的方式是在配置文件中配置newTime,传入时间字符串，比如’2021-05-20‘，这个时间与当前系统时间对比，如果时间未到就展示，过了隐藏。
if (title) {
if (newTime && newTime.getTime() > new Date().getTime()) {
vnodes.push({(title)}New!)
} else {
vnodes.push({(title)})
}
}
注意：1、时间要字符串标准格式（2021-05-20），匹配时间是在该时间的0点，而非24点。
2、子菜单配置的newTime，父菜单也需要配置，并且要等于子菜单中最大的newTime。这样才能保持一致。（这里其实可以让父菜单根据子菜单的配置来自动完成，目前支持手动配置）。
3、权限配置也类似。
6、配置 isID、动态id 可以配置任意参数
动态isID只能配置在子路由中，父路由是不生效的。配置的参数格式必须是’/:‘+任意字符串。意思就是传的参数不局限于id,可任意。
// 如果有gameId 处理/:id 动态路由 可以配置任意参数
if (store.state.permission.gameId !== '' && (routerName[to.name] && routerName[to.name] !== '' && to.path.indexOf(routerName[to.name]['isID']) > -1) && store.state.settings.isGameShow) {
const params = {}
const isID = routerName[to.name]['isID'].substring(2, routerName[to.name]['isID'].length)
params[isID] = store.state.permission.gameId
next({ ...to, params: params })
}
注意：如果使用动态路由，在路由拦截的地方进行跳转传参，那在左侧菜单的时候就不能使用path来做唯一值，这样选中效果就不生效。可以使用name来做唯一值
7、异步请求路由配置
// 映射服务器返回菜单与本地component
function generateAsyncRouter(serverRouterMap, children = false) {
return serverRouterMap.map(item => {
const isParent = item.children && item.children.length > 0
const parent = generateRouter(item, isParent, children)
if (isParent) {
parent.children = generateAsyncRouter(item.children, true)
}
return parent
})
}
const generateRouter = (item, isParent, children) => ({
path: isParent ? `/${item.url}` : item.url || '',
name: isParent ? 'p' + item.url : item.url || '',
alwaysShow: false,
meta: { title: item.menuName, icon: item.icon, id: item.menuID, newTime: item.newTime ? new Date(item.newTime) : new Date(), noCache: false },
component: isParent && !children ? routerMaps['Layout'] : routerMaps[item.url]
})
接口返回的数据格式
'data': [{
'menuID': '10000000',
'menuName': '系统管理',
'icon': 'form',
'url': 'system',
'newTime': '2021-05-30',
'children': [
{
'menuID': '10001000',
'menuName': '用户管理',
'icon': 'form',
'url': 'user/:id',
'children': null,
'newTime': '2021-05-30'
},
{
'menuID': '10002000',
'menuName': '菜单管理',
'icon': 'form',
'url': 'menu',
'children': null
}
]
}]
对应配置的router文件路径
// 处理接口请求的router
export const routerMaps = {
Layout: () => import('@/layout/index'),
...routerMap
}
// 处理接口请求返回router情况
routerMap[routerObj.name] = routerObj.component
请求生成路由
// 异步获取侧边栏数据
getPageMenu({}).then(res => {
console.log(res)
if (res && res.code.toString() === '200') {
const data = res.data != null ? res.data : []
accessedRoutes = generateAsyncRouter(data).concat(filterAsyncRoutes(ApiRouterMap, roles))
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
}
})
注意：异步请求路由，权限，排序都由后台完成。请求接口得到的数据就是已经经过权限过滤，排序之后的数据。如果是异步请求路由，则无需在配置routerName文件。这个相对本地配置router来说是简单的，后台替我们分担了一部分工作。
6、store
store内存存储数据，可以复用，避免重复调用接口。这个并不是将所有接口都写在store里面就越好，只需储存一些数据不需要实时变动的。文件多可做个按需加载，一般在大型项目中需要。目前我没有写。
按需加载文件
var ffVuex = {
install: function(vue) {
vue.mixin({
beforeCreate: function() {
if (this.$options.isVuex) {
var name = this.$options.name;
let moduleObj = this.$store._modules.root._children;
let onOff = true;
Object.keys(moduleObj).forEach(function(key) {
if (key === name) {
onOff = false;
}
});
if (onOff) {
let res = require("../store/module/" + name);
this.$store.registerModule(this.$options.name, res.default);
}
}
},
});
},
};
module.exports = ffVuex;
mian.js中去引入即可
注意：1、视图中的定义name与store/modules下的文件名一直
2、定义是否需要vuex（ isVuex:true）
7、utils
公共的方法写在utils/index.js中
Reg 表单校验
auth 本地存储数据
8、微前端配置
之前写过微前端配置