启动部署

环境准备

• 安装 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: {} }