项目源码地址：[vue-uniapp-template](https://gitee.com/youlaiorg/vue-uniapp-template) 开局先看一下效果图，内容和UI正在升级中... ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a6897c9dff054b63bc46d0117f634d2b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=Ri6TpT3EAnM7FnBJJZd9z9hv%2BCU%3D) ## 前言本文将从零开始，详细介绍如何通过 `Vite + degit` 构建一个基于 Vue3 和 TypeScript 的 UniApp 跨移动端开源脚手架模板。内容会涵盖从环境配置到项目部署的各个重要开发环节，通过详实的步骤讲解，致力于打造高效的开发工具，进而提升项目质量与开发效率。 ## 环境准备 [vue-uniapp-template](https://gitee.com/youlaiorg/vue-uniapp-template) 是一个跨移动端脚手架模板，它结合了 `UniApp`、`Vue 3` 和 `TypeScript` 这些主流技术栈。其构建借助了 `Vite`，你可以使用 `degit` 直接从官方克隆基于 `Vite` 和 `TypeScript` 的模板来搭建此项目。 ### 安装 Node > `Node.js` 是运行 JavaScript 代码的环境，也是 `npm` 包管理器的依赖。打开 [Node.js 官方下载页面](https://nodejs.org/zh-cn/download/prebuilt-installer)，根据你的操作系统选择合适的版本进行下载，**推荐安装 LTS 版本**，这是长期支持版本，适合开发环境，比如这里选择 `v20.18.0(LTS) ` 版本。 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ab04888cbb0e4d47bced8e294ee5b2d4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=ql79cNbP1s7uXsNVCR6dSwk3lgg%3D) 下载之后，双击安装包根据提示安装，通过以下命令检查是否成功安装： ```bash node -v ``` ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/61bf9b0681414673b2a7789aefc46426~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=i1moOYE%2BILNo%2Fuix5aCAtJ%2F9u8M%3D) ### 安装 VSCode > `VSCode` 是一款非常流行的代码编辑器，特别适合前端开发。访问 [Visual Studio Code 官方网站](https://code.visualstudio.com/) ,根据你的操作系统下载相应版本的 `VSCode` ,下载完成后，双击安装程序并按照提示完成安装。 ## 创建项目 ### 初始化项目按照 [uni-app 官方文档](https://uniapp.dcloud.net.cn/quickstart-cli.html#创建uni-app) 的步骤，通过 `degit` 工具来克隆 `uni-app` 官方提供的 `vue3` + `vite` + `typescript` 脚手架模板。 ```bash npx degit dcloudio/uni-preset-vue#vite-ts vue-uniapp-template ``` ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/eff2045c0aca4b2fa2ef9c8c547fd126~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=0f50QwbhpGePkmuJuULGSb7sM9Y%3D) 如果使用命令创建失败，可以通过 Gitee 下载 ZIP 包：[vite-ts 分支](https://gitee.com/dcloud/uni-preset-vue/tree/vite-ts)。 ### 配置编译器默认生成的 `TypeScript ` 编译器配置文件 `tsconfig.json` 中继承的 `@vue/tsconfig/tsconfig.json` 文件不存在。因此，你需要移除此继承配置并添加相应的编译设置。 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/cdb0ed12958c44f3a073507e528c6502~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=TznAGoIUUhXB%2FDDA7r%2BJwTGwv98%3D) 根据 [TypeScript 官方配置文档](https://www.typescriptlang.org/tsconfig/)，调整后的完整配置如下： ```json { "compilerOptions": { "module": "esnext", "moduleResolution": "node", "target": "esnext", "allowJs": true, "skipLibCheck": true, "strict": true, "sourceMap": true, "baseUrl": ".", "paths": { "@/*": ["./src/*"] }, "lib": ["esnext", "dom"], "types": ["@dcloudio/types"] }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "exclude": ["node_modules", "dist"] } ``` * `"module": "esnext"`: 指定模块系统为 `ESNext`，即最新的 ECMAScript 模块系统，支持 `import.meta` 和其他最新的特性。 * `"moduleResolution": "node"`: 模块解析策略，通常设置为 `Node` 以支持 Node.js 风格的模块解析。 * `"target": "esnext"`: 将目标 JavaScript 版本设置为 `ESNext`，编译输出现代浏览器能够支持的最新特性代码。 * `"allowJs": true`: 允许 TypeScript 编译器处理 `.js` 文件，混合使用 TypeScript 和 JavaScript 文件。 * `"skipLibCheck": true`: 跳过库文件的类型检查，提升编译速度。 * `"strict": true` : 启用所有严格类型检查选项。 ### 启动项目创建完成后，使用 `VSCode` 打开项目并启动： ```bash # 安装依赖 pnpm install # 启动项目 pnpm run dev:h5 ``` ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/64edef25433244d9bb9d8afa1b1f6f73~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=t7MQv56AlP4zlTni0tLhxX7G3Jo%3D) 项目启动后，访问预览效果： ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/323c55fe0e4e40b3b9f64dad8c427aa1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=gKcayS508K%2Fh3Dh%2FIq7HGnxJaLE%3D) ## 代码规范配置为了保证项目代码的规范性和一致性，可以为项目配置 `ESLint`、`Stylelint`、`Prettier` 以及 `Husky`，从而确保代码质量和开发流程的一致性。 ### 集成 ESLint `ESLint` 是一款 JavaScript 和 TypeScript 的代码规范工具，能够帮助开发团队保持代码风格一致并减少常见错误。 **ESLint 中文网**： #### 安装插件 VSCode 插件市场搜索 ESLint 插件并安装 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1c29b06d07b24bd89ac2c70f2817ad6a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=FivHZzenK%2FyUlgS4jyDRMv%2FjCwI%3D) #### 配置 ESLint 通过以下命令快速生成 ESLint 配置文件： ```bash npx eslint --init ``` ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ed5848763f864a748b63c064e66dbb81~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=70GzXVcZpXv2wosNcERFK66kDyo%3D) 执行该命令后，ESLint 会通过交互式问题的方式，帮助生成配置文件。针对 9.x 版本，默认会生成基于 Flat Config 格式的 `eslint.config.mjs` 文件，与之前的 `.eslintrc` 格式有所不同。默认生成的 `eslint.config.mjs` 文件如下所示： ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7cb02be212004539b61260fa57a4f652~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=zR94EClB2RT60xZ7CLsi7cEEPNc%3D) 在此基础上，可以根据项目的需求进行一些定制化配置，例如添加忽略规则或自定义的特殊规则。 ```js import globals from "globals"; // 全局变量配置 import pluginJs from "@eslint/js"; // JavaScript 的推荐配置 import tseslint from "typescript-eslint"; // TypeScript 配置 import pluginVue from "eslint-plugin-vue"; // Vue 配置 export default [ {files: ["**/*.{js,mjs,cjs,ts,vue}"]}, // 校验的文件类型 {languageOptions: { globals: {...globals.browser , ...globals.node} }}, // 浏览器/Node环境全局变量 pluginJs.configs.recommended, // JavaScript 推荐配置 ...tseslint.configs.recommended, // TypeScript 推荐配置 ...pluginVue.configs["flat/essential"], // Vue 推荐配置 { files: ["**/*.vue"], languageOptions: { parserOptions: { parser: tseslint.parser } } }, // 对 .vue 文件使用 TypeScript 解析器 // 添加忽略的文件或目录 { ignores: [ "/dist", "/public", "/node_modules", "**/*.min.js", "**/*.config.mjs", "**/*.tsbuildinfo", "/src/manifest.json", ] }, // 自定义规则 { rules: { quotes: ["error", "double"], // 强制使用双引号 "quote-props": ["error", "always"], // 强制对象的属性名使用引号 semi: ["error", "always"], // 要求使用分号 indent: ["error", 2], // 使用两个空格进行缩进 "no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行 "no-trailing-spaces": "error", // 不允许行尾有空格 // TypeScript 规则 "@typescript-eslint/no-explicit-any": "off", // 禁用 no-explicit-any 规则，允许使用 any 类型 "@typescript-eslint/explicit-function-return-type": "off", // 不强制要求函数必须明确返回类型 "@typescript-eslint/no-empty-interface": "off", // 禁用 no-empty-interface 规则，允许空接口声明 "@typescript-eslint/no-empty-object-type": "off", // 允许空对象类型 // Vue 规则 "vue/multi-word-component-names": "off", // 关闭多单词组件名称的限制 "vue/html-indent": ["error", 2], // Vue 模板中的 HTML 缩进使用两个空格 "vue/no-v-html": "off", // 允许使用 v-html (根据实际项目需要) }, }, ]; ``` #### 添加 ESLint 脚本为了方便使用 ESLint，可以在 `package.json` 中添加 `lint` 脚本命令： ```json { "scripts": { "lint:eslint": "eslint --fix ./src" } } ``` 此脚本会自动修复符合 ESLint 规则的代码问题，并输出检查结果。 #### 测试效果在 `App.vue` 文件中声明一个未使用的变量，并运行 `pnpm run lint:eslint`，可以看到 ESLint 提示该变量未使用。如下图所示： ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/326d9e03905545469b62ca822626a84c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=piZVktpITT%2BUjG0kAd2xvXUUi%2FE%3D) #### 推荐配置安装 Vue 文件解析器 `vue-eslint-parser`： ```bash pnpm add -D vue-eslint-parser ``` 针对不同文件配置插件和解析器： ```javascript // eslint.config.mjs import globals from "globals"; import js from "@eslint/js"; // ESLint 核心插件 import pluginVue from "eslint-plugin-vue"; import pluginTypeScript from "@typescript-eslint/eslint-plugin"; // Prettier 插件及配置 import configPrettier from "eslint-config-prettier"; import pluginPrettier from "eslint-plugin-prettier"; // 解析器 import * as parserVue from "vue-eslint-parser"; import * as parserTypeScript from "@typescript-eslint/parser"; // 定义 ESLint 配置 export default [ // 通用 JavaScript/TypeScript 配置 { ...js.configs.recommended, ignores: [ "/dist", "/public", "/node_modules", "**/*.min.js", "**/*.config.mjs", "**/*.tsbuildinfo", "/src/manifest.json", ], languageOptions: { globals: { ...globals.browser, // 浏览器变量 (window, document 等) ...globals.node, // Node.js 变量 (process, require 等) }, }, plugins: { prettier: pluginPrettier, }, rules: { ...configPrettier.rules, ...pluginPrettier.configs.recommended.rules, "no-debug": "off", // 允许使用 debugger "prettier/prettier": [ "error", { endOfLine: "auto", // 解决换行符冲突 }, ], }, }, // TypeScript 配置 { files: ["**/*.?([cm])ts"], languageOptions: { parser: parserTypeScript, parserOptions: { sourceType: "module", }, }, plugins: { "@typescript-eslint": pluginTypeScript, }, rules: { ...pluginTypeScript.configs.recommended.rules, "@typescript-eslint/no-explicit-any": "off", // 允许使用 any "@typescript-eslint/no-empty-function": "off", // 允许空函数 "@typescript-eslint/no-empty-object-type": "off", // 允许空对象类型 "@typescript-eslint/consistent-type-imports": [ "error", { disallowTypeAnnotations: false, fixStyle: "inline-type-imports" }, ], // 统一类型导入风格 }, }, // TypeScript 声明文件的特殊配置 { files: ["**/*.d.ts"], rules: { "eslint-comments/no-unlimited-disable": "off", // 关闭 eslint 注释相关规则 "unused-imports/no-unused-vars": "off", // 忽略未使用的导入 }, }, // JavaScript (commonjs) 配置 { files: ["**/*.?([cm])js"], rules: { "@typescript-eslint/no-var-requires": "off", // 允许 require }, }, // Vue 文件配置 { files: ["**/*.vue"], languageOptions: { parser: parserVue, parserOptions: { parser: "@typescript-eslint/parser", sourceType: "module", }, }, plugins: { vue: pluginVue, }, processor: pluginVue.processors[".vue"], rules: { ...pluginVue.configs["vue3-recommended"].rules, "vue/no-v-html": "off", // 允许 v-html "vue/require-default-prop": "off", // 允许没有默认值的 prop "vue/multi-word-component-names": "off", // 关闭组件名称多词要求 "vue/html-self-closing": [ "error", { html: { void: "always", normal: "always", component: "always" }, svg: "always", math: "always", }, ], // 自闭合标签 }, }, ]; ``` ### 集成 Prettier Prettier 是一个代码格式化工具，能够和 ESLint 配合使用，确保代码风格统一。 **prettier 中文网**： #### 安装插件 VSCode 插件市场搜索 `Prettier - Code formatter` 插件安装 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d516e47381d6464789f4b766cc9458ad~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=Un409%2FKkQRxNSh9QIeJ777SYSJI%3D) #### 安装依赖 ```bash pnpm install -D prettier eslint-config-prettier eslint-plugin-prettier ``` * **prettier**：主要的 Prettier 格式化库。 * **eslint-plugin-prettier**：将 Prettier 的规则作为 ESLint 的规则来运行。 * **eslint-config-prettier**：禁用所有与格式相关的 ESLint 规则，以避免和 Prettier 的冲突。 #### 配置 Prettier 项目根目录下新建配置文件 `prettier.config.mjs`，添加常用规则： ```js export default { printWidth: 100, // 每行最多字符数量，超出换行(默认80) tabWidth: 2, // 缩进空格数，默认2个空格 useTabs: false, // 指定缩进方式，空格或tab，默认false，即使用空格 semi: true, // 使用分号 singleQuote: false, // 使用单引号 (true:单引号;false:双引号) trailingComma: 'all', // 末尾使用逗号 }; ``` #### 配置忽略文件项目根目录新建 `.prettierignore` 文件指定 Prettier 不需要格式化的文件和文件夹 ```bash # .prettierignore node_modules dist public *.min.js ``` #### 添加格式化脚本在 `package.json` 文件中添加： ```json { "scripts": { "format": "prettier --write ./src" } } ``` #### 保存自动格式化打开 VSCode 的 `File` → `Preferences` → `Settings`，然后选择 `Open Settings (JSON)`，添加以下配置 ```json { "editor.formatOnSave": true, // 保存格式化文件 "editor.defaultFormatter": "esbenp.prettier-vscode" // 指定 prettier 为所有文件默认格式化器 } ``` #### 测试下图演示了保存时的自动格式化效果，展示了代码中引号和换行的自动调整： ![在这里插入图片描述](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1b483a87d995439c96f9d5243c4baac0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=iSVW5cjYoPKtA48Cqhr7%2FlnwTLk%3D) ### 集成 Stylelint Stylelint 一个强大的 CSS linter(检查器)，可帮助您避免错误并强制执行约定。 **Stylelint 官网**： #### 安装插件 VSCode 插件搜索 `Stylelint` 并安装 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/78949c274b8543eba02597f683b57d10~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=aRnf8kCv5Y71v72sek5MJioNN4M%3D) #### 安装依赖 ```bash pnpm install -D postcss postcss-html postcss-scss stylelint stylelint-config-recommended stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-config-recess-order stylelint-config-html stylelint-prettier ``` | 依赖 | 说明 | 备注 | | --------------------------------- | --------------------------------------- | --------------------------------------------- | | postcss | CSS 解析工具，允许使用现代 CSS 语法并将其转换为兼容的旧语法 | - | | postcss-html | 解析 HTML (类似 HTML) 的 PostCSS 语法 | 参见 [postcss-html 文档](链接) | | postcss-scss | PostCSS 的 SCSS 解析器 | 参见 [postcss-scss 文档](链接)，支持 CSS 行类注释 | | stylelint | stylelint 核心库 | 参见 [stylelint](链接) | | stylelint-config-recommended | 提供了基础的 Stylelint 配置，适用于大多数项目，允许自定义规则集 | 与 stylelint-config-standard 相比，此配置提供了更多的灵活性 | | stylelint-config-recommended-scss | 扩展基础配置，为 SCSS 特定规则提供支持 | 参见 [stylelint-config-recommended-scss 文档](链接) | | stylelint-config-recommended-vue | 扩展基础配置，为 Vue 文件中的样式提供支持 | 参见 [stylelint-config-recommended-vue 文档](链接) | | stylelint-config-recess-order | 提供优化样式顺序的配置 | 参见 CSS 书写顺序规范 | | stylelint-config-html | 为 HTML (类似 HTML) 文件提供共享配置 | 参见 [stylelint-config-html 文档](链接) | | stylelint-prettier | 集成 stylelint 和 prettier，确保样式同时满足两个工具的规范 | - | 其中选择 stylelint-config-recommended 替代 stylelint-config-standard 的原因在于它不仅提供了灵活性，还更加轻量。stylelint-config-recommended 默认包含的规则较少，避免了 stylelint-config-standard 中可能不需要的规则，这样可以减少配置的复杂度，提高项目的启动速度，同时让开发者能够集中关注对项目真正重要的风格指南。轻量配置有助于简化工作流程，特别是在大型或复杂的项目中。 #### 配置 Stylelint 根目录新建 `.stylelintrc.cjs` 文件，配置如下： ```javascript { "extends": [ "stylelint-config-recommended", "stylelint-config-recommended-scss", "stylelint-config-recommended-vue/scss", "stylelint-config-html/vue", "stylelint-config-recess-order" ], "plugins": ["stylelint-prettier"], "overrides": [ { "files": ["**/*.{vue,html}"], "customSyntax": "postcss-html" }, { "files": ["**/*.{css,scss}"], "customSyntax": "postcss-scss" } ], "rules": { "import-notation": "string", "selector-class-pattern": null, "custom-property-pattern": null, "keyframes-name-pattern": null, "no-descending-specificity": null, "no-empty-source": null, "selector-pseudo-class-no-unknown": [ true, { "ignorePseudoClasses": ["global", "export", "deep"] } ], "unit-no-unknown": [true, { "ignoreUnits": ["rpx"] }] "property-no-unknown": [ true, { "ignoreProperties": [] } ], "at-rule-no-unknown": [ true, { "ignoreAtRules": ["apply", "use", "forward"] } ] } } ``` #### 配置忽略文件根目录创建 .stylelintignore 文件，配置忽略文件如下： ```basic *.min.js dist public node_modules ``` #### 添加 Stylelint 脚本 package.json 添加 Stylelint 检测指令： ```json "scripts": { "lint:stylelint": "stylelint \"**/*.{css,scss,vue,html}\" --fix" } ``` #### 保存自动修复项目根目录下`.vscode/settings.json` 文件添加配置： ```json { "editor.codeActionsOnSave": { "source.fixAll.stylelint": true }, "stylelint.validate": ["css", "scss", "vue", "html"] } ``` 为了验证把尺寸属性 width 放置在定位属性 position 前面，根据 [CSS 书写顺序规范](https://jingyan.baidu.com/article/647f0115cf48957f2148a8a3.html) 推断是不符合规范的，在保存时 Stylelint 自动将属性重新排序，达到预期。 ![在这里插入图片描述](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d004a30f6cd345a891d1ac639e1ec1ce~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=QyNvX6kCp52Cqyy2bfk7yeHPNB0%3D) #### 测试执行以下命令进行检测 ```bash npm run lint:stylelint ``` ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e83d311398ab45c2818289c7dbc84fd4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=WGeHy3QASQCzCwRW6wa4mBY6%2FkY%3D) ## Git提交规范配置配置 Husky 的 `pre-commit` 和 `commit-msg` 钩子，实现代码提交的自动化检查和规范化。 * **pre-commit**: 使用 Husky + Lint-staged，在提交前进行代码规范检测和格式化。确保项目已配置 ESLint、Prettier 和 Stylelint。 * **commit-msg**: 结合 Husky、Commitlint、Commitizen 和 cz-git，生成规范化且自定义的 Git commit 信息。 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/00d27c7738c24ed08aa67e71c2c7bab6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=ZDgGBE7sLDNivg7Zsp%2Bg2CsRYpc%3D) ### 集成 Husky Husky 是 Git 钩子工具，可以设置在 git 各个阶段（`pre-commit`、`commit-msg` 等）触发。 **Husky官网**：[https://typicode.github.io](https://typicode.github.io/husky/zh/get-started.html) ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7950a21cd1a943ac9f444bb3f9143803~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=vikoXUJ%2FmfSdhUHKUxMGiMsRgbc%3D) #### 安装依赖 ```bash pnpm add -D husky ``` #### 初始化 `init` 命令简化了项目中的 husky 设置。它会在 `.husky/` 中创建 `pre-commit` 脚本，并更新 `package.json` 中的 `prepare` 脚本。 ```bash pnpm exec husky init ``` #### 测试 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6e98dd62709d442fb83f4bb6d3ebd39d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=G9hr7n6RNYNux%2FsdhlUOayXTKmo%3D) 通过 `pre-commit` 钩子，可以自动运行各种代码检查工具，在提交代码前强制执行代码质量和样式检查。常见的工具包括： * **`eslint`**：用于检查和修复 JavaScript/TypeScript 代码中的问题。 * **`stylelint`**：用于检测和修复 CSS/SCSS 样式问题。接下来，集成 **`lint-staged`** 和 **`commitlint`** 来进一步完善开发体验。 ### 集成 lint-staged `lint-staged` 是一个工具，专门用于只对 Git 暂存区的文件运行 lint 或其他任务，确保只检查和修复被修改或新增的代码部分，而不会影响整个代码库。这样可以显著提升效率，尤其是对于大型项目。 #### 安装依赖使用以下命令安装 `lint-staged`： ```json pnpm add -D lint-staged ``` #### 配置 lint-staged 在 `package.json` 中添加 `lint-staged` 配置，确保在 `pre-commit` 阶段自动检测暂存的文件： ```json { "name": "vue-uniapp-template", "version": "0.0.0", "lint-staged": { "*.{js,ts}": [ "eslint --fix", "prettier --write" ], "*.{cjs,json}": [ "prettier --write" ], "*.{vue,html}": [ "eslint --fix", "prettier --write", "stylelint --fix" ], "*.{scss,css}": [ "stylelint --fix", "prettier --write" ], "*.md": [ "prettier --write" ] } } ``` 在 `package.json` 的 `scripts` 部分中，添加用于运行 `lint-staged` 的命令： ```json "scripts": { "lint:lint-staged": "lint-staged" } ``` #### 添加 Husky 钩子在项目根目录的 `.husky/pre-commit` 中添加以下命令，确保在提交代码前执行 `lint-staged`： ```bash pnpm run lint:lint-staged ``` #### 测试提交代码时，`lint-staged` 会自动对暂存的文件运行相应的 lint 任务。 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4b36f87d586943d3a784f1b0b65e5d38~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=%2BFOfa35InO2IfzU9TVzaaAPfhdk%3D) 通过这种集成方式，确保代码在提交前经过自动格式化和校验，提高代码质量和一致性。 ### 集成 Commitlint `commitlint` 用于检查 Git 提交信息是否符合特定规范（如 Angular 提交规范），从而保证提交信息的一致性。 **Commitlint官网**： #### 安装依赖 ```bash pnpm add -D @commitlint/cli @commitlint/config-conventional ``` #### 配置 Commitlint 在项目根目录下创建 `commitlint.config.cjs` 文件，添加以下内容来启用 Angular 规范： ```json module.exports = { // 继承的规则 extends: ["@commitlint/config-conventional"], // 自定义规则 rules: { // 提交类型枚举，git提交type必须是以下类型 @see https://commitlint.js.org/#/reference-rules "type-enum": [ 2, "always", [ "feat", // 新增功能 "fix", // 修复缺陷 "docs", // 文档变更 "style", // 代码格式（不影响功能，例如空格、分号等格式修正） "refactor", // 代码重构（不包括 bug 修复、功能新增） "perf", // 性能优化 "test", // 添加疏漏测试或已有测试改动 "build", // 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等） "ci", // 修改 CI 配置、脚本 "revert", // 回滚 commit "chore", // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例） ], ], "subject-case": [0], // subject大小写不做校验 }, }; ``` #### 添加 Husky 钩子将 `commitlint` 与 Husky 集成，在 `.husky/commit-msg` 文件中添加以下内容，确保提交信息符合规范： ```bash npx --no-install commitlint --edit $1 ``` #### 测试根据 Angular 的提交规范，提交信息由以下部分组成： 1. **类型**：表示本次提交的类型，例如 `feat` (新功能)、`fix` (修复 bug)、`docs` (文档更新)。 2. **作用域**（可选）：说明本次提交影响的模块，例如 `auth`、`ui`。 3. **简短描述**：简洁明了的提交描述，限定在 50 字符以内。当你尝试提交不符合规范的提交信息时，提交会被阻止，并显示相关错误提示。如下图所示： ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/03aa99787a2a40ff9ba770d0ee3b209a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=2WkuoT1fEl0%2BtopRR8%2F4WpPoXnc%3D) ### 集成 Commitizen 和 cz-git * **commitizen**: 是一个帮助开发者以标准化格式生成提交信息的工具。--[Commitizen 官方文档](https://commitizen.github.io/cz-cli/) * **cz-git**: `cz-git` 是 `Commitizen` 的适配器之一，它基于 `Commitizen`，提供了更多自定义功能和增强的交互体验。--[cz-git 官方文档](https://cz-git.qbb.sh/zh/) #### 安装依赖 ```bash pnpm add -D commitizen cz-git ``` #### 配置 cz-git 在项目中初始化 `Commitizen`，并配置使用 `cz-git` 作为适配器。在 `package.json` 中添加以下配置： ```json "config": { "commitizen": { "path": "node_modules/cz-git" } } ``` 在`commitlint` 的配置文件 `commitlint.config.cjs` 中添加配置，commitlint 配置模板： ```javascript module.exports = { // 继承的规则 extends: ["@commitlint/config-conventional"], // 自定义规则 rules: { // ... }, // cz-git 配置 prompt: { messages: { type: "选择你要提交的类型 :", scope: "选择一个提交范围（可选）:", customScope: "请输入自定义的提交范围 :", subject: "填写简短精炼的变更描述 :\n", body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n', breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n', footerPrefixesSelect: "选择关联issue前缀（可选）:", customFooterPrefix: "输入自定义issue前缀 :", footer: "列举关联issue (可选) 例如: #31, #I3244 :\n", generatingByAI: "正在通过 AI 生成你的提交简短描述...", generatedSelectByAI: "选择一个 AI 生成的简短描述:", confirmCommit: "是否提交或修改commit ?", }, // prettier-ignore types: [ { value: "feat", name: "特性: ✨ 新增功能", emoji: ":sparkles:" }, { value: "fix", name: "修复: 🐛 修复缺陷", emoji: ":bug:" }, { value: "docs", name: "文档: 📝 文档变更", emoji: ":memo:" }, { value: "style", name: "格式: 💄 代码格式（不影响功能，例如空格、分号等格式修正）", emoji: ":lipstick:" }, { value: "refactor", name: "重构: ♻️ 代码重构（不包括 bug 修复、功能新增）", emoji: ":recycle:" }, { value: "perf", name: "性能: ⚡️ 性能优化", emoji: ":zap:" }, { value: "test", name: "测试: ✅ 添加疏漏测试或已有测试改动", emoji: ":white_check_mark:"}, { value: "build", name: "构建: 📦️ 构建流程、外部依赖变更（如升级 npm 包、修改 vite 配置等）", emoji: ":package:"}, { value: "ci", name: "集成: 🎡 修改 CI 配置、脚本", emoji: ":ferris_wheel:"}, { value: "revert", name: "回退: ⏪️ 回滚 commit",emoji: ":rewind:"}, { value: "chore", name: "其他: 🔨 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）", emoji: ":hammer:"}, ], useEmoji: true, emojiAlign: "center", useAI: false, aiNumber: 1, themeColorCode: "", scopes: [], allowCustomScopes: true, allowEmptyScopes: true, customScopesAlign: "bottom", customScopesAlias: "custom", emptyScopesAlias: "empty", upperCaseSubject: false, markBreakingChangeMode: false, allowBreakingChanges: ["feat", "fix"], breaklineNumber: 100, breaklineChar: "|", skipQuestions: [], issuePrefixes: [{ value: "closed", name: "closed: ISSUES has been processed" }], customIssuePrefixAlign: "top", emptyIssuePrefixAlias: "skip", customIssuePrefixAlias: "custom", allowCustomIssuePrefix: true, allowEmptyIssuePrefix: true, confirmColorize: true, maxHeaderLength: Infinity, maxSubjectLength: Infinity, minSubjectLength: 0, scopeOverrides: undefined, defaultBody: "", defaultIssues: "", defaultScope: "", defaultSubject: "", }, }; ``` #### 添加 cz-git 脚本在`package.json` 文件中添加 `commit` 脚本命令 ```json "scripts": { "commit": "git-cz" } ``` #### 测试执行 `pnpm run commit` 命令后，按照提示输入相关信息，最终生成符合规范的提交信息。 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/23442d3f36a843598c4cb6b73dcd1dfc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=yhD5jxjw887ImolhE%2FrW0UaAA3k%3D) ## 整合 Sass **Sass**是帮助开发者编写、管理和维护样式的强大工具，通过 ` ``` 在 `pages.json` 文件中，声明登录页面的路由： ```json // src/pages.json { "pages": [ { "path": "pages/login/index", "style": { "navigationBarTitleText": "登录" } } ] } ``` ### 登录测试访问登录页面： (`admin`/`123456`) 测试登录接口，登录成功后可以看到返回的访问令牌。 ![在这里插入图片描述](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/eea09b645a584737ad75f6921206777e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=Vx1V09qawUKcmyKW4Q5jIZleZm8%3D) ### 整合源码整合`HTTP请求`代码版本：[vue-uniapp-template#737f6a3](https://gitee.com/youlaiorg/vue-uniapp-template/tree/737f6a3ee5217dcad006fa06b6fae63374d9826b)。 ## 整合 Pinia > Pinia 是 Vue 的状态管理库，专为跨组件或页面共享状态设计。 * **Pinia 官方文档**: ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b33250467a9347e494372f077989ad72~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=npP19IJFWKg3snSQFQZmxdDiDgA%3D) ### 安装依赖首先，安装 `pinia` 依赖： ```bash pnpm add pinia ``` ### 全局注册在项目的 `src` 目录下创建 `store` 文件夹，并新建 `index.ts` 文件，初始化并注册 Pinia 实例。 ```typescript // src/store/index.ts import type { App } from "vue"; import { createPinia } from "pinia"; const store = createPinia(); // 注册 Pinia export function setupStore(app: App) { app.use(store); // 全局注册 Pinia } ``` 接着，将 `store` 在项目入口文件 `main.ts` 中引入，并将其作为全局插件传递给应用： ```typescript // src/main.ts import { createSSRApp } from "vue"; import App from "./App.vue"; import { setupStore } from "@/store"; export function createApp() { const app = createSSRApp(App); // 全局注册 store setupStore(app); return { app, }; } ``` 接下来，我们通过 Pinia 管理登录状态和用户信息，并在多个页面共享状态。 ### 用户信息接口编写一个 API 来获取当前登录用户的信息： ```typescript import request from "@/utils/request"; const USER_BASE_URL = "/api/v1/users"; const UserAPI = { /** * 获取当前登录用户信息 * * @returns 登录用户昵称、头像信息，包括角色和权限 */ getUserInfo(): Promise { return request({ url: `${USER_BASE_URL}/me`, method: "GET", }); }, }; export default UserAPI; /** 登录用户信息 */ export interface UserInfo { /** 用户ID */ userId?: number; /** 用户名 */ username?: string; /** 昵称 */ nickname?: string; /** 头像URL */ avatar?: string; /** 角色 */ roles: string[]; /** 权限 */ perms: string[]; } ``` ### 用户状态管理通过 Pinia 定义 `user` 模块，管理登录状态、用户信息等。 ```typescript // src/store/module/user.ts import { defineStore } from "pinia"; import AuthAPI from "@/api/auth"; import UserAPI, { UserInfo } from "@/api/user"; export const useUserStore = defineStore("user", () => { // 确保 token 是响应式的 const token = ref(uni.getStorageSync("token") || ""); const userInfo = ref(null); // 登录 const login = async (username: string, password: string) => { const { tokenType, accessToken } = await AuthAPI.login(username, password); token.value = `${tokenType} ${accessToken}`; // Bearer token uni.setStorageSync("token", token.value); }; // 获取用户信息 const getUserInfo = async () => { const info = await UserAPI.getUserInfo(); userInfo.value = info; }; // 登出 const logout = async () => { await AuthAPI.logout(); userInfo.value = null; token.value = ""; // 清空 token uni.removeStorageSync("token"); // 从本地缓存移除 token }; return { token, userInfo, login, logout, getUserInfo, }; }); ``` ### 个人中心页面个人中心页面展示用户的头像和昵称，未登录时引导用户去登录。 ```html ``` 登录页通过 `Pinia` 实现用户信息的全局状态管理，并在登录成功后跳转到个人中心页面。 ```html ``` ### 测试效果登录后，个人中心会显示用户的头像和昵称。通过 Pinia 实现了登录状态的共享和跨页面传递。 ![在这里插入图片描述](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/27ade3b841814fd48ada3611b9f39813~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=Yda2FOm1nueWa6QQnI3Kf3jrYxQ%3D) ### 整合源码整合`Pinia`代码版本：[vue-uniapp-template#737f6a3](https://gitee.com/youlaiorg/vue-uniapp-template/tree/737f6a3ee5217dcad006fa06b6fae63374d9826b)。 ## 反向代理在开发中，若服务端没有启用 CORS（跨域资源共享），浏览器会基于安全策略拦截跨域请求，导致无法访问接口。为了绕过这个问题，我们可以通过 Vite 的反向代理功能，将开发阶段的请求代理到真实的 API 服务器上，伪装成同源请求。本节将介绍如何配置 Vite 的反向代理来处理跨域请求。 *** ### 环境变量配置我们将通过环境变量来管理项目端口和 API 请求地址，以下是 `.env.development` 中的相关配置： ```bash # .env.development # 项目运行的端口号 VITE_APP_PORT=5173 # API 请求的基础路径（开发环境） VITE_APP_BASE_API=/dev-api # 真实 API 服务器的 URL VITE_APP_API_URL=https://api.youlai.tech ``` ### 请求工具的调整为了让请求走代理，我们需要在请求工具中将 `VITE_APP_API_URL` 替换为 `VITE_APP_BASE_API`。这样，所有对 `API` 的请求都会通过代理标识 `/dev-api` 进行转发。 ```typescript export default function request(options: UniApp.RequestOptions): Promise { return new Promise((resolve, reject) => { uni.request({ ...options, // 原请求方式: 使用真实 API URL // url: `${import.meta.env.VITE_APP_API_URL}${options.url}`, // 示例: https://api.youlai.tech/login // 修改后：使用代理标识，实际转发到真实 API url: `${import.meta.env.VITE_APP_BASE_API}${options.url}`, // 示例: http://localhost:5173/dev-api/login }); }); } ``` ### Vite 反向代理配置接下来，在 `vite.config.ts` 中添加反向代理配置，将 `/dev-api` 的请求代理到 `VITE_APP_API_URL`，通过 `http-proxy` 实现请求的转发。 ```typescript // vite.config.ts import { defineConfig, UserConfig, ConfigEnv, loadEnv } from "vite"; export default defineConfig(async ({ mode }: ConfigEnv): Promise => { const env = loadEnv(mode, process.cwd()); return { server: { host: "0.0.0.0", port: +env.VITE_APP_PORT, open: true, // 反向代理配置 proxy: { [env.VITE_APP_BASE_API]: { target: env.VITE_APP_API_URL, // 目标服务器 changeOrigin: true, // 支持跨域 rewrite: (path) => path.replace(new RegExp("^" + env.VITE_APP_BASE_API), ""), // 去掉前缀 }, }, }, plugins: [ // 插件配置... ], }; }); ``` ### 测试与验证在配置好反向代理后，浏览器发出的请求将被 Vite 的代理服务器拦截并转发至真实的 API 地址。例如，浏览器请求 `http://localhost:5173/dev-api/api/v1/auth/login` 时，Vite 会将该请求代理到 `https://api.youlai.tech/api/v1/auth/login`。下图展示了这一过程，浏览器认为请求的 URL 与应用的主机地址一致，因此不会阻止该请求，即便真实请求已通过代理转发到外部服务器。 ![在这里插入图片描述](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/84ae4696f41048d291d1086cb39db12d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=nXjTL3NxQ1fSYeHfxEJkpaV35U4%3D) 需要注意，反向代理的目标是伪装请求来源，虽然它绕过了浏览器的同源策略，但有时也会让开发者误以为请求地址错误。实际上，这是由于代理转发过程造成的表面请求地址与真实请求地址的差异。 ### 整合源码整合`反向代理`和`环境变量`代码版本：[vue-uniapp-template#272d643](https://gitee.com/youlaiorg/vue-uniapp-template/tree/272d643744b3b009a90a54e9344a0fc827f8b9fc)。 ## 整合 wot-design-uni `wot-design-uni` 是基于 `Vue 3` 和 `TypeScript` 构建的高质量组件库。组件库遵循 `Wot Design` 的设计规范，提供 70 多个组件，支持暗黑模式、国际化和自定义主题，旨在为开发者提供一致的 UI 交互，同时提高开发效率。 > **说明：** 本文档整合步骤基于 `wot-design-uni` 官方文档编写，建议开发者参考 [官方文档](https://wot-design-uni.pages.dev/guide/quick-use.html#npm-%E5%AE%89%E8%A3%85) 进行安装和配置，以确保组件库的正确使用。 *** ### 安装依赖根据官方文档，使用 `pnpm` 安装组件库的依赖： ```bash pnpm add wot-design-uni ``` ### 配置自动引入组件在传统的 `Vue` 项目中，使用组件需要手动安装、引用、注册。而使用 `easycom` 可以简化这些操作。只要组件路径符合规范，就可以直接在页面中使用，无需手动导入和注册。在 `pages.json` 文件中配置 `easycom` 自动引入： ```json // pages.json { "easycom": { "autoscan": true, "custom": { "^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue" } }, "pages": [ // 这里是项目已有的内容 ] } ``` **关于 `easycom`：**\ `easycom` 是 `uni-app` 提供的自动化引入功能，更多细节请参考 [easycom 官方文档](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)。 ### Volar 支持为了让 `Volar` 正确识别和提示全局组件，你需要在项目的 `tsconfig.json` 文件中配置全局组件类型支持： ```json // tsconfig.json { "compilerOptions": { "types": ["wot-design-uni/global"] } } ``` 这将确保你在 `TypeScript` 项目中编写代码时，Volar 能提供完整的类型支持和代码提示。 ### 测试组件安装和配置完成后，你可以开始使用 `wot-design-uni` 的组件。在页面中，直接写组件标签即可，无需手动导入和注册： ```html ``` 你将看到如下按钮效果： ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/83985b6879a143f6b2eb6921f05183d6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=Wk4JX%2Bh4MAM477SzFtrfNnk4nhE%3D) ### 整合源码整合`wot-design-uni` 代码版本：[vue-uniapp-template#a775721](https://gitee.com/youlaiorg/vue-uniapp-template/tree/a7757213f282a6414a3cf2cc13aa2c54a9479ae4)。 ## 项目部署 ### H5 部署执行 `pnpm run build:h5` 命令来完成项目的打包： ```bash pnpm run build:h5 ``` 打包后生成的静态文件位于 `dist/build/h5` 目录下。将该目录下的文件复制到服务器的 `/usr/share/nginx/html/vue-uniapp-template` 目录。接下来，配置 nginx： ```nginx # nginx.conf server { listen 80; server_name localhost; location / { root /usr/share/nginx/html/vue-uniapp-template; index index.html index.htm; } # 反向代理配置 location /prod-api/ { # 将 api.youlai.tech 替换为后端 API 地址，注意保留后面的斜杠 / proxy_pass http://api.youlai.tech/; } } ``` 这样配置完成后，就可以通过 `nginx `服务器来访问你的项目了。 ### 小程序发布 #### 下载工具下载 [ HBuilder X ](https://www.dcloud.io/hbuilderx.html) 编辑器 ![image-20241024232438606.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4ce262d678f1459fba5ed52e56c18fc4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=HrV6CdL%2FW5a24YqdMk42E6U16YI%3D) 下载 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html) ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f8a00af1bddc4cd7a5a6c1cb9b85c571~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=nudJS3LhfIOBBPHDwfuc0h17DQk%3D) #### 获取小程序 AppID 访问 [微信公众平台](https://mp.weixin.qq.com/)申请小程序，获取 `AppID`。如果已申请，可在 `首页` → `小程序信息` → `查看详情` 查看 AppID ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c412bd7ad8c842a59c893eff6261f41c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=FXBgXE9MQt7eGrNTMeD4m%2FrbkTA%3D) ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/495a703f36804784bdf5d3ac29819e40~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=EJDmcbK6ALovXQPNz4gwNKLNSkw%3D) #### 配置项目使用 HBuilder X 打开项目，修改 `manifest.json` 文件中的小程序配置，并填写获取的 AppID。 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/39c4d484703a4089a6601bb991faff43~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=lflR11V5u8DPrlPfFLVrDXWYRII%3D) #### 设置微信开发者工具使用微信扫码登录微信开发者工具，开启服务端口：点击工具栏`设置`→`安全设置`→`安全`→`服务端口`，选择打开。 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/34e7be896f4142dfb4a203a4c72a6571~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=Fd6ps%2FONs%2B3XnDx4rHzKe8qaPHs%3D) #### 运行项目在 HBuilder X 中，点击 `运行`→`运行到小程序模拟器`→`微信开发者工具`。 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/83362003392841378bc88caef996eda0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=B%2FTQx9tXcvlVPOjxg%2FXKW7GHSfQ%3D) 项目编译完成后，微信开发者工具会自动启动并呈现页面。 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5946839d88e04752b93d709d2221488e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=eAJ9fpbyWnPPqiLyoDdT1U9GH7s%3D) #### 上传发布在微信开发者工具中，点击 `上传` 将应用发布到小程序平台。 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/00abd258e75d482b973d9404c7c44af1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=QedDPgZ5kryP6vsOLXeFBqJ8r%2BM%3D) ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b401aac9eff245eeae83d7869608db1b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=FqWefYYk%2FwA5gY7lZj3L4CzE%2BN0%3D) #### 查看效果最后，使用手机打开小程序查看效果： ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6d4170b722a24488b7b0d2fd51721ecc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyJ5p2l5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1748519569&x-signature=Xmclfi%2BeaTjTKheZEjXBazUBsiA%3D) ## 结语通过本文的详细讲解，相信你已经掌握了如何从零搭建一个高效的、基于 Vue3 和 TypeScript 的 UniApp 跨移动端解决方案脚手架模板——vue-uniapp-template。无论是代码规范、状态管理、样式配置，还是 Git 提交规范与项目部署，都能帮助你在实际项目中提高开发效率和代码质量。希望本文能为你的项目开发提供全面的指导与支持，助你快速搭建出一个高效的跨移动端解决方案。Happy 1024 & Happy Coding! ## 附：项目源码本篇文章涉及的源码已开源，项目地址：，项目正在努力建设中，希望有兴趣参与开源的小伙伴们联系我(haoxianrui)。