- 代码地址:
- 需求文档:
- 需求规格说明:
- 蓝湖设计图:
pnpm install pnpm run dev 打包命令请查看这里
全部参数变量请查看这里
- 推荐使用
pnpm install安装依赖,因vite-plugin-imagemin等有些包在国内不太好安装 .env.development、.env.sit、.env.uat、.env.production需要修改为项目对应环境的配置auto-imports.d.ts、components.d.ts为按需加载(vue、vue-router、pinia、components下组件)自动生成文件,请勿修改且在代码内不要重复导入node_modules、mobile等非源码文件勿提交到SVN/git,可添加到SVN/git的ignore/.gitignore列表中- 对弹框进行统一管理,弹框组件请根据
/src/components/Popups/popBase.vue、/src/hooks/usePopups.ts内提示使用 - 项目内已引入
vite-plugin-imagemin图片压缩工具,默认在uat、production环境下开启。注:开启后打包时间会比较长(126张图片将近两分钟),可在配置项VITE_APP_TINY关闭,自行在https://tinypng.com压缩
┌─mobile/dist 打包文件目录 |─public |─src │ └─api 业务请求接口 │ └─assets 存放应用引用的本地静态资源(如图片、序列帧等)的目录 │ └─img 静态图片文件目录 │ └─style 样式文件目录 │ └─axios 封装axios请求 | └─requestCancel.ts 重复请求取消方法 | └─requestCode.ts 统一处理请求状态码方法 │ └─common 公共文件 │ └─style 公共样式文件目录 | └─ts 公共函数的目录 │ └─components 符合vue组件规范的组件目录 │ └─BaseComponents 基础组件目录 │ └─BaseLoading.vue 静态资源预加载组件 │ └─Popups 弹窗组件目录 │ └─popBase.vue 弹窗组件使用实例 │ └─enum 枚举文件目录 │ └─hooks 抽离hooks的文件目录 │ └─useLogin 抽离登录方法 │ └─usePopups 弹窗统一管理方法的hooks │ └─useToast toast提示的hooks │ └─router 路由文件 │ └─stores 状态管理仓库(pinia)文件目录 | └─app.ts 存放app内状态state的文件 | └─appActions.ts 存放操作状态方法action的文件 | └─popups.ts 存放弹窗状态state的文件 按规则使用即可,可不更改 │ └─typings ts类型定义文件目录 | └─app.d.ts app内数据类型 | └─cmb.d.ts cmb request/response的数据结构类型定义文件 | └─env.d.ts 自定义npm上没有声明文件包的声明文件 | └─global.d.ts 全局window上数据类型 | └─request.d.ts 请求的request的数据结构类型定义文件 | └─response.d.ts 请求的response.data.data的数据结构类型定义文件 │ └─utils 常用的工具类函数文件目录 | └─cmbUtil.ts cmb常用api | └─is.ts is类型推断 | └─index.ts 工具方法 | └─router.ts 重写路由跳转 │ └─views 路由对应vue文件目录 | └─components 抽分页面组件文件目录 | └─Home 首页页面组件 | └─index.vue 首页 │ └─App.vue App根文件 │ └─auto-imports.d.ts 按需加载api自动生成文件(勿改) │ └─components.d.ts 按需加载组件自动生成文件(勿改) │ └─componentsInstance.d.ts 统一定义组件类型文件(勿改) │ └─main.js 入口文件 |─.env.xxx 环境变量配置 |─.eslintrc-auto-import 自定义按需加载api文件,配置项与auto-imports.d.ts相对 |─.eslintrc.cjs ESLint规则 │─index.html │─package.json │─pnpm-lock.yaml ├─README.md 项目信息 ├─tsconfig.json ts配置文件 ├─tsconfig.app.json ts配置文件,会覆盖tsconfig ├─tsconfig.node.json ├─tsconfig.vitest.json ├─vite.config.ts vite配置 └─vitest.config.ts #当前环境 VITE_NODE_ENV = "production" #判断打包逻辑 VITE_APP_ENV = "production" #判断预生产(设置预生产顶部跑马灯) VITE_APP_PRE_PRODUCTION = "false" #生产环境不需要log VITE_APP_LOG = "true" #资源路径 VITE_APP_RESOURCE_URL = "xxx" #请求接口路径 VITE_APP_BASE_URL = "xxx" #是否开启Vconsole(生产环境关闭) VITE_APP_VCONSOLE_ABLED = "false" #是否开启图片压缩(生产环境打开) VITE_APP_TINY = "true" #活动短链 VITE_APP_CHAIN = "xxx" #活动秘钥 VITE_APP_KEY = "xxx" #活动商户号 VITE_APP_CORPNO = "xxx" #分享链接 VITE_APP_SHARE_URL = "xxx" #降级页 VITE_APP_ERROR_PAGE_URL = "xxx" #App卡券 VITE_APP_CARD_URL = "xxx" #H5标题 VITE_APP_TITLE = "项目名称" pnpm run dev 本地启动项目 pnpm run sit 测试环境打包 pnpm run uat 预生产环境打包 pnpm run prod 生成环境打包 pnpm run getImg 自动加载assets/img/下静态图片(图片懒加载使用),环境打包命令会自动执行,无需重复执行