## 启动部署

### 环境准备

- 安装 Node

  版本：v20

- 开发工具

  推荐 VSCode

- 必装插件

  VSCode 插件市场搜索并安装 Volar, 且一定要禁用 Vetur，不然代码会出现组件使用了但编译器还报组件未使用的警告信息，另外尤大也在 Vue3 生态话题说过 Volar 将会替代 Vetur 作为 Vue 的官方插件。

### 项目启动

1. 安装依赖  pnpm install  或 npm install
2. 运行 pnpm run dev 或 npm run dev
3. 浏览器访问 <http://localhost:1000>

### 项目部署

- 本地打包

  ```正式
  npm run build:prod

  ```测试
  npm run build:dev
  ```

  生成的静态文件位于项目根目录 dist 文件夹下

### 公用模块和方法说明
  
  **状态管理器说明**

  状态管理器存放路径为/store文件夹下

  interface ——  ts变量定义，可根据实际情况判断是否使用

  module —— 根据模块和业务划分状态管理的文件

  index.ts —— pinia在main.ts中注册的文件，如无需要一般不用更改

  pinia已经开始数据的持久化，无需单独对状态管理器中的数据进行缓存处理，会在浏览器刷新时默认存储在localStorage中

  使用方法：

  ```js
  // 示例:在相应的业务模块中引用相应的状态管理即可
  import { useUserInfo } from '@/stores/modules/userInfo'

  // 引用后在页面初始化管理器
  const userStore = useUserInfo()

  // 可直接取值
  userStore.getAdminToken

  // 通过action中定义的方法对store中的数据进行修改，请勿直接修改state中的值
  userStore.updateUserInfo(res.data)
  ```

  userInfo为用户信息模块的store，用于存储token，同时token已经添加到axios的封装方法中，可根据实际情况进行修改调整，使用方法同上

  **路由模块划分及自动引入**

  路由管理统一划分在router文件夹下

  modules —— 业务路由文件的统一存放区域，在该文件下可根据业务情况创建相应的路由文件，并将文件中路由内容暴露出来

  index —— 路由最终挂载到vue的文件

  staticRoutes —— 自动导出路由的处理文件，在该文件中将业务路由与公共路由进行统一整合

  modules下业务路由文件的格式要求

  ```js
  // 以销售模块为例
  export default {
    path: 'sales',
    name: '模块名称',
    component: () => import('@/views/引入对应的页面文件'),
    children: [
      // children中存放该模块的子路由内容
    ],
    meta: {}
  }
  ```