vue3移动端项目构建TS，vue3+vant+vite+axios+pinia+sass+typescript

# vant_ts_common #### 介绍 vant前端移动框架，node环境V18+，使用更高版本出现问题，可降至V18 #### 软件架构 软件架构采用：vue3 + axios + sass + vant + vite + pinia + typescript 1. vue3：web开发框架 https://cn.vuejs.org/ 2. axios：请求 3. vant官网：ui组件库，https://vant-contrib.gitee.io/vant/#/zh-CN 4. vite：https://vitejs.cn/ 5. pinia：https://pinia.vuejs.org/zh/ 6. sass基础语法：https://blog.csdn.net/randy521520/article/details/131242242 7. typescript：https://blog.csdn.net/randy521520/article/details/130425863 #### 目录结构src ``` |-- assets 静态资源 | |-- scss 样式文件 | | |-- globals.scss 全局样式文件 | | |-- globalMixin.scss 全局sass mixin函数 | | |-- iframe.scss 初始化样式文件引入 | | |-- globalVar.scss 全局sass变量 | |-- font 字体 | |-- images 静态图片 |-- common 公共项目文件，用于放一些公共枚举、请求等 | |-- enum.ts 公共枚举文件 | |-- request.ts 公共请求封装 |-- components 公共组件 | |-- common 公共组件 | |-- dataView 数据展示组件 | |-- feature 功能性组件 | |-- layout 布局组件 | |-- page 页面级组件，一般用于某个模块功能组件封装 |-- hooks 公共hooks函数 | |-- useCommon.ts 通用hooks | |-- useEventEmitter.js 事件发射器 | |-- usePxTransform.js 像素单位转换 | |-- useTheme.ts 主题配置hooks |-- lang 国际化语言配置 |-- pages 页面 |-- utils 存放全局js文件 | |-- commonUtil.ts 公共js | |-- storageUtil.ts 缓存js |-- App.vue vue项目根组件 |-- main.ts 项目入口文件 |-- router.ts 路由配置 |-- tabBar.ts tabBar配置 |-- style.scss 页面初始化样式 ``` #### JS规范 + 命名规范，使用小驼峰命名 ``` 1. 事件命名，如：onTableClick，统一on开头，事件名称结尾 2. 请求获取命名，如：getDataRequest，统一get开头，Request结尾 3. 请求修改命名，如：updateDataRequest，统一update开头，Request结尾 4. 请求修删除命名，如：deleteDataRequest，统一delete开头，Request结尾 5. 变量命名，如：userInfo ``` + 语法规范 ``` 1. 字符串统一使用单引号‘’，标签内的属性和import除外 2. 字符串拼接，统一使用`` ``` + 注释规范 ``` 1. 方法、参数注释，采用多行注释，https://blog.csdn.net/randy521520/article/details/116536475?spm=1001.2014.3001.5501 2. 变量及其他注释，采用单行注释 3. 需要优化的代码，单行注释开始需加上todo ``` #### 使用说明 1. yarn dev 启动开发环境 2. yarn pro 启动生产环境 3. yarn build:dev 构建开发环境 4. yarn build:prod 构建生产环境 5. yarn preview 本地预览构建好的项目