乐趣区

关于前端:Vue多项目管理

jiezi

在 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.js
export default [
  {
    path: '/company',
    name: 'company',
    component: () => import(/* webpackChunkName: "company" */ './index.vue'),
    meta: {title: '公司简介'}
  }
]
公共页面对立入口
// src/views/index.js
export {default as companyRoute} from './Company/index.js'
export {default as ruleRoute} from './Rule/index.js'
定制我的项目中的公共页面
// src/config/proA.js
import {
  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.js
import 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.js
import 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.js

import 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 治理前端我的项目
退出移动版