在Vue-cli 3.X环境下，基于同一类型的流动，能够多个页面复用，大部分组件能够专用的背景
Multiple解决形式
- 每一个流动创立一个分支，在不同的分支上各自保护
- 如果须要保护复用代码时，任选某一分支进行批改，通过
git cherry-pick <commit id>进行平行迁徙。
Monorepo解决形式
仅在同一分钟下进行多我的项目的保护，各个功能模块解构，通过我的项目配置项进行个性化配置。
目录构造
|-src |- views |- index.js // 通用页面的对立入口 |- Company |- index.vue // 通用页面Company构造、款式、逻辑 |- index.js // Company页面路由 |- Rule |- index.vue |- index.js |- components |- core |- instance // 和app实例挂钩的办法 |- libs // 和app实例无关的办法 |- assets |- images |- fonts |- store |- index.js // 通用状态 |- types.js // 事件类型 |- config |- proA.js // 我的项目资源配置 |- proB.js |- projects // 我的项目定制资源 |- proA |- proB不同我的项目的区别齐全在于config/文件的配置和projects/下的我的项目定义；同级其余目录是各个我的项目通用的内容。
提取公共页面 & 路由
公共页面示例：
// src/views/Company/index.vue<template> ...</template><script>...</script><style scoped>...</style>公共页面路由
// src/views/Company/index.jsexport default [ { path: '/company', name: 'company', component: () => import(/* webpackChunkName: "company" */ './index.vue'), meta: { title: '公司简介' } }]公共页面对立入口
// src/views/index.jsexport { default as companyRoute } from './Company/index.js'export { default as ruleRoute } from './Rule/index.js'定制我的项目中的公共页面
// src/config/proA.jsimport { companyRoute, ruleRoute} from '../views/index.js'...export const logoUrl = '' // 还能够定制其它的内容export const routes = [ ...companyRoute, ...ruleRoute]我的项目中应用公共页面
以src/projects/proA为例：
目录构造
|- assets|- components|- mixins|- router|- store|- pages|- App.vue|- main.js我的项目主路由
// src/projects/proA/router/index.jsimport Vue from 'vue'import Router from 'vue-router'import { routes } from '../../config/proA'import Home from '../pages/Home'Vue.use(Router)export default new Router({ routes: [ { path: '/', redirect: '/home' }, { path: '/home', name: 'Home', component: Home, meta: { title: '' } }, ...routes ]})其中：Home/index.vue是定制化的。
状态治理
多我的项目是独立运行时，状态提取不会相互烦扰，若一次性运行多个我的项目，通用状态会被批改。
通用状态提取
// src/store/index.jsimport types from './types'export const initialState = { userInfo: {}, ...}export function getGetters (store) { return { userId: () => store.userInfo.userID, ... }}export function getMutations (store) { return { [types.INITIALMUTATIONTYPES.USER_INFO] (val) { store.userInfo = val }, ... }}在config/proA.js文件中追加：
...export * from '../store/index.js'export * from '../store/types.js'...我的项目中应用
小型我的项目，应用vue.observable治理状态定义我的项目的主状态治理
// src/projects/proA/store/index.jsimport vue from 'vue'import { initialState, getGetters, getMutations } from '../../../config/proA'export const store = vue.observable({ ...initialState, customState: '', // 我的项目公有状态 ...})store._getters = { ...getGetters(store), customGetter() { // 我的项目公有 return store.customState }, ...}store._mutations = { ...getMutation(store), ... // 我的项目公有}export const mutation = { ...getMutations(store), ... // 我的项目公有}定义辅助办法mapGetters
拷贝vuex局部代码到src/core/libs/helpers.js文件中
export const mapGetters = (getters) => { const res = {} if (!isValidMap(getters)) { console.error('[vuex] mapGetters: mapper parameter must be either an Array or an Object') } normalizeMap(getters).forEach(({ key, val }) => { res[key] = function mappedGetter () { if (!(val in this.$store._getters)) { console.error(`[vuex] unknown getter: ${val}`) return } return this.$store._getters[val]() } }) return res}export function normalizeMap (map) { if (!isValidMap(map)) { return [] } return Array.isArray(map) ? map.map(key => ({ key, val: key })) : Object.keys(map).map(key => ({ key, val: map[key] }))}export function isValidMap (map) { return Array.isArray(map) || isObject(map)}export function isObject (obj) { return obj !== null && typeof obj === 'object'}在/src/core/libs/index.js中追加：
export * from './helpers'*.vue中应用
// src/projects/proA/pages/Home/index.vue<script>...import { mapGetters } from '../../../core/libs/'export default { data () { return { ... } }, computed: { ...mapGetters([ 'userId' ]), ... }...</script>参考文档
- vue不同环境打包命令配置： 大部分内容起源
- 应用 MonoRepo 治理前端我的项目