# template-uni-v2 **Repository Path**: huxley-w/template-uni-v2 ## Basic Information - **Project Name**: template-uni-v2 - **Description**: uni-app vue2 开发模板 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-03-31 - **Last Updated**: 2025-05-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: template, uni-app, vue2, JavaScript ## README # template-uni-v2 基于 Vue2 + JavaScript 的 uni-app 开发模板 ## 特性 - 🚀 基于 Vue 2.6.14 + JavaScript - 📱 支持多端开发（H5、微信小程序、支付宝小程序、App等） - 🎨 集成 UV-UI 组件库 - 📦 集成 Vuex 状态管理和持久化 - 🔧 完善的工具集成（请求封装、本地存储、日期处理等） - 📝 规范的代码提交和格式化配置 - 🌐 多环境配置和打包支持 ## 核心框架 - Vue 2.6.14 - uni-app 2.0.2 - Vuex 3.2.0 - SCSS ## 项目结构 ```bash src/ # 源代码目录 ├── config/ # 配置文件 │ ├── index.js # 配置模块索引文件 │ └── modules/ # 配置模块目录 ├── enum/ # 枚举定义 │ ├── index.js # 枚举模块索引文件 │ └── modules/ # 枚举模块目录 ├── pageExamples/ # 示例页面（分包） │ ├── components/ # 分包组件 │ └── pages/ # 分包页面 ├── pages/ # 页面（主包） │ ├── index/ # 首页 │ └── examples/ # 示例入口页 ├── static/ # 静态资源 │ ├── images/ # 图片资源 │ ├── iconfont/ # 字体图标 │ └── js/ # 静态JS文件 ├── store/ # 状态管理 │ ├── index.js # 状态管理入口 │ ├── getters.js # 全局getters │ └── modules/ # 状态模块 ├── styles/ # 样式文件 │ ├── index.scss # 样式模块索引文件 │ ├── _custom.scss # 自定义样式 │ ├── abstracts/ # 抽象样式 │ ├── base/ # 基础样式 │ └── utils/ # 工具样式 ├── test/ # 测试文件 │ └── apiTest.js # API测试 ├── types/ # 类型定义 │ ├── env.d.ts # 环境类型 │ ├── shims-uni.d.ts # uni类型声明 │ └── shims-vue.d.ts # Vue类型声明 ├── utils/ # 工具函数 │ ├── index.js # 工具函数入口 │ └── modules/ # 工具模块 ├── App.vue # 应用入口 ├── main.js # 入口文件 ├── manifest.json # 应用配置 ├── pages.json # 页面配置 ├── uni.promisify.adaptor.js # Promise适配器 └── uni.scss # uni样式变量 ``` ## 主要依赖 - `@dcloudio/uni-app`: 2.0.2 - uni-app 核心库 - `vue`: 2.6.14 - Vue 2 框架 - `vuex`: 3.2.0 - 状态管理 - `vuex-persistedstate`: 4.1.0 - Vuex 持久化插件 - `@climblee/uv-ui`: 1.1.20 - UV-UI 组件库 - `luch-request`: 3.0.0 - 网络请求库 - `lodash-es`: 4.17.21 - 工具函数库 - `dayjs`: 1.11.13 - 日期处理库 ## 开发工具与规范 - ESLint: 代码质量检查 (7.32.0) - Prettier: 代码格式化 (2.8.8) - Stylelint: 样式规范检查 (14.9.1) - Husky: Git hooks (8.0.3) - lint-staged: 暂存文件检查 (10.5.4) - commitlint: Git 提交信息规范检查 (17.0.0) ## 快速开始 ### 说明 本项目使用 yarn 作为包管理器。使用其他包管理器（如 npm、pnpm）可能会导致依赖安装错误。 ### 环境要求 - Node.js >= 14 - yarn >= 1.22 ### yarn 镜像设置 ```bash # 查看当前镜像 yarn config get registry # 设置镜像源 # npm 官方镜像 yarn config set registry https://registry.npmjs.org/ # 淘宝镜像 yarn config set registry https://registry.npmmirror.com/ # 华为云镜像 yarn config set registry https://mirrors.huaweicloud.com/repository/npm/ # 腾讯云镜像 yarn config set registry https://mirrors.cloud.tencent.com/npm/ # 使用 nrm 管理镜像源 # 安装 nrm npm install -g nrm # 查看可用镜像源 nrm ls # 切换镜像源 nrm use taobao ``` ### 安装依赖 ```bash yarn install ``` ### 开发命令 ```bash # H5 开发 yarn dev:h5 # 微信小程序开发 yarn dev:mp-weixin # 支付宝小程序开发 yarn dev:mp-alipay # App 开发 yarn dev:app-plus ``` ### 构建命令 ```bash # H5 构建 yarn build:h5 # 微信小程序构建 yarn build:mp-weixin # 支付宝小程序构建 yarn build:mp-alipay # App 构建 yarn build:app-plus ``` ### 其他命令 ```bash # 代码检查 yarn lint # 代码格式化 yarn format # 样式检查 yarn lint:style # 样式格式化 yarn lint:style:fix ``` ## 开发规范 ### 代码规范 - ESLint 配置 - Vue 2 基础规则集 - Prettier 集成 - 未使用导入检查 (unused-imports) - 导入顺序自动排序 (simple-import-sort) - 自定义规则 - Stylelint 配置 - SCSS 语法支持 - Vue 单文件组件支持 - 属性顺序规范 (recess-order) - 标准规则集合 - Prettier 配置 - 行宽限制：100 - 缩进：2 空格 - 使用单引号 - 尾随逗号 - 括号间距 ### Git 提交规范 使用 Conventional Commits 规范，格式如下： ```bash ():