更新记录

1.0.0（2023-07-10） 下载此版本

上传

平台兼容性

开发注意

基本事项

1. 一个页面/组件文件夹下应包含三个基础文件：.scss、.vue、.ts 文件，便于代码区分及维护，页面文件命名格式：小驼峰，组件文件命名格式：大驼峰
2. .vue 页面文件中<script setup lang="ts" name="home">中的 name，即原 vue2 的 name
3. ts 中同一个功能的放在一块
4. scss 中相关通用颜色使用变量
5. 公共样式/变量文件：src/assets/css/global.scss，有需要在这里写公共样式/变量，写之前先浏览原有的是否存在相关样式
6. 字体图标文件：src/assets/css/zoicon.css。
7. 项目环境配置文件：src/utils/envionment.ts，实现一次打包，不同环境域名下的环境自动切换，无需再配置类似.env.test文件和不同环境不同打包命令方式
8. src/components下的组件无需 import 导入页面代码中，框架自动引入。
9. @mosowe2/js包含了 web 系统开发的大部分功能函数，优先选择，额外的功能函数在src/utils/index.ts中添加，注意写好注释，文档地址
10. @mosowe2/element-plus-pro包含了三个高级组件：ProForm、ProTable、Dialog，在开发过程中优先选择，保持网站风格一致，有特殊例外不能满足的再寻他法，文档地址
11. 框架主界面布局组件在src/window文件夹下
12. 左侧菜单栏路由支持 http / https 外链，点击时在新窗口打开连接
13. 环境水印配置文件：src/utils/watermark.js，已在 App.vue 中配置

关于权限校验

权限校验有两个，声明都在/src/directives/permission.ts文件：

1. 一个是v-permission自定义指令，用于挂载 html 代码上，接收一个 string，值为当前元素权限值
2. 另一个是hasPermission全局校验函数，使用方法为：

<!-- html中 -->
<div v-if="hasPermission('123')"></div>
<!-- 同 -->
<div v-permission="'123'"></div>

// ts中
const app = getCurrentInstance()?.appContext.config.globalProperties;
console.log(app?.hasPermission('123'));

关于 axios 配置说明

1. axios 相关文件在src/axios，以下提及文件均在此文件夹下
2. /services/文件夹下是相关功能页面接口函数声明文件，文件命名格式：语义化小驼峰，建议每个接口函数名以Api结尾，避免与页面中函数名冲突
3. apiCode.ts该文件存放后端接口返回相关的 code 值
4. apiNames.ts该文件用户存放后端接口名称，支持接口名中带{}格式，例：/crp/user/{id}/detail，命名格式为：语义化小驼峰，同一功能模块的前置单词保持一致，写好注释
5. axios.ts该文件是对 axios 的get,post,delete,put,file几种方法的封装，file为文件上传，文件上传及数据导出方式参考/services/common.ts
6. axiosConfig.ts该文件是对 axios 的统一封装，内部处理了相关的网络状态、接口异常 code 的处理流程
7. 在页面引用/service/进行接口联调时，建议使用 then/catch 方式，其中 then 返回的是 http status=200 且 api 返回 code 为成功时的值（即在 then 中无需判断 apiCode，因为这里面永远是无异常成功返回），其他均在 catch 中。
8. 可使用window.$cancelRequest()方法终止接口请求

关于 pinia 状态库

1. /src/store下是状态管理库文件，以下提及文件均在此文件夹下
2. index.ts文件用于状态库的配置，配置方式参考内部，不同功能的不要写在一个 hook 里面，写好注释，state 的变量格式为：PI_ 开头的语义化下划线全大写，actions 的方法命名格式为：set 开头的语义化小驼峰
3. persistentData.ts文件用于数据持久化，即刷新页面的时候，状态库从缓存取值
4. `typing.d.tsts 的类型声明，状态库增删改的时候维护一下这个文件，在页面中使用的时候 ts 类型引用，格式：store开头 语义化小驼峰 Type结尾，建议 store 后面跟 defineStore() 的第一个参数，例：storeUserType

关于缓存

1. 使用 sessions 缓存，@mosowe2/js 模块的 sessions 方法，比直接写 sessionStorage 方便，其提供：set，get，remove，clear 四种方法操作缓存
2. 缓存命名格式：例本项目为 crp，所以格式为：crp-开头语义化小写短横线

关于自定义指令

1. 自定义指令文件夹为：/directives/，文件夹下的每一个 ts 文件对应一个自定义指令，不要合并为一个 ts 文件，命名格式为：语义化小写短横线

关于自定义 hook

1. 自定义指令文件夹为：/hook/，每一个 hook 的命名格式为：use 开头语义化小驼峰

使用中有其他问题及时提出，优化改进

框架说明：

相关文档：基于 vite 搭建一个 vue 移动端脚手架

vue3 语法糖

基于 web 管理系统的配置，基于 vite+vue3+ts。

vite 官网

优点：

1. 光速启动
2. 热模块替换
3. 按需编译

脚手架功能

1. elementPlus 组件 UI 库
2. axios 网络数据交互
3. pinia 状态管理
4. vue-router 路由管理
5. scss 预编译
6. autoprefixer 自动补全
7. typescript 语法
8. window.$cancelRequest()取消请求
9. 新template 类型组件自动引入，无需 import，不是 template 类型组件的需要手动引入，如：Toast
10. 新自动导入 vue3 HOOKS
11. 新components 文件夹下的组件自动引入
12. 新采用域名配置环境变量，即可以通过设置src/utils/envionment.ts配置文件实现一次打包，不同环境域名下的环境自动切换，无需再配置类似.env.test文件
13. 新element 自封装高级组件：@mosowe2/element-plus-pro，文档地址