# 模块

## 目录结构

一个模块目录结构如下

```
│   │   ├─ common               // common模块
│   │   │   ├─ fragment         // .vue片段片段目录
│   │   │   │   └─ *.vue        // .vue片段文件，主要用于细化组件
│   │   │   ├─ view             // 组件目录
│   │   │   │   └─ *.vue        // .vue组件，一般是对应路由的component或者是完整的page
│   │   │   ├─ router.ts        // 模块的router
│   │   │   └─ vuex.ts          // 模块的vuex(store、action、mutations等)
```

## 增加一个模块

* 按照上面的目录结构建好相应的文件
* 配置好模块的路由
* ```javascript
  import { AsyncComponent } from 'vue'
  // 注意下面webpackChunkName后面的"public", 相同webpackChunkName的组件会被打包到同一个js文件里面
  const Login: AsyncComponent = (): any => import(/* webpackChunkName: "public" */ './view/Login.vue')

  export default [
    {
      path: '/login',
      name: 'login',
      component: Login,
    },
  ]�
  ```

  编写模块的vuex代码
* ```javascript
  import { MutationTree, ActionTree, ActionContext } from 'vuex'
  import api from '../../global/api'

  const state: PublicState = {
  }
  const mutations: MutationTree<any> = {
  }

  const actions: ActionTree<any, any> = {
    // 用户登录
    login(context: ActionContext<CommonState, State>, user: User): Promise<any> {
       return api.login(user)
    },
  }

  export default {state, mutations, actions}
  ```

  在全局router和全局store里面添加模块的router和vuex，如下面的system模块

{% tabs %}
{% tab title="router" %}

```javascript
import system from '../modules/system/router'

Vue.use(Router)

const router = new Router({
  routes: [
    ...publicRouter,
    {
      path: '/',
      component: MainLayout,
      children: [
        ...common,
        ...system,
        ...demo,
      ],
    },
    {
      path: '*',
      redirect: '/',
    },
  ],
})

export default router
```

{% endtab %}

{% tab title="vuex" %}

```javascript
import system from '../modules/system/vuex'
Vue.use(Vuex)

const modules: ModuleTree<any> = {
  common, publicM, system,
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  modules,
})
```

�

�
{% endtab %}
{% endtabs %}

## 注意事项

* 注意配置异步组件的`webpackChunkName`
* 模块间公用的组件和状态放在common模块
* common模块的有些组件可以根据使用频率和优先级等情况决定是否异步加载
* 可以将多个较小模块设置相同的`webpackChunkName`以合并为同一个js文件 &#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ccqiuqiu.gitbook.io/iface/ru-men/mo-kuai.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.