为什么要拆？

  • 很多情况下，我们的项目文件+组件数量大于100
  • 涵盖的业务模块很多 用户管理、财务管理、XX管理。。。
  • 项目参与的人也多 2个 3个 5个 20个

  • 各种原因需要拆出模块来单独使用

    模块化实现

    1. 创建模块目录

  • 目录名规则 /src/module-xxxx 写你的业务模块名称

  • api interface 独立放在你的 module-xxxx 下
  • pages 放页面
  • 一个页面一个文件夹 /src/module/pages/index/index.vue 默认页
  • 页面中的组件放在 index.vue 同层 components 目录下

image.png

2. 编写模块路由

文件 /src/module-user/pages/router/index.ts

  1. import Layout from '../pages/layout.vue'
  3. export default [
  4.   {
  5.     path: '/',
  6.     redirect: '/user/index'
  7.   },
  8.   {
  9.     path: '/user',
  10.     component: Layout,
  11.     children: [
  12.       {
  13.         name: 'index',
  14.         path: 'index',
  15.         component: () => import('../pages/user/index.vue')
  16.       }
  17.     ]
  18.   }
  19. ]

3. 编写模块入口

文件 /src/module-user/index.ts

import Router from '@/router'
import RouteConfig from './router'

export default class User {
  public static install(router: typeof Router): void {
    router.addRoutes(RouteConfig)
  }
}

4. 主程序载入模块

文件 /main.ts

...

import Element from 'element-ui'
import './scss/element-ui/element-variables.scss'
Vue.use(Element)

import User from '@/module-user'
User.install(router)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

动态载入业务组件的 路由、 store 对象。