创建uniapp vue3+ts项目

### 创建基于 Vue 3 和 TypeScript 的 UniApp 项目 为了创建一个基于 Vue 3 和 TypeScript 的 UniApp 项目，可以遵循以下指南： #### 安装 HBuilderX 开发工具 HBuilderX 是 DCloud 推荐用于开发 UniApp 应用程序的集成开发环境。下载并安装最新版 HBuilderX。 #### 初始化 UniApp 项目 启动 HBuilderX 并通过 `File -> New Project` 来创建一个新的 UniApp 项目。选择模板时指定使用 Vue 3 版本支持。 #### 修改 package.json 文件以启用 TypeScript 支持 编辑项目的根目录下的 `package.json` 文件，确保包含如下脚本命令以便初始化 TypeScript 编译过程： ```json { "scripts": { "dev": "uni serve", "build:mp-weixin": "cross-env NODE_ENV=production vue-cli-service uni-build --minify --target weapp" }, "dependencies": { "@types/node": "^18.7.23", "typescript": "~4.5.4" } } ``` #### 更新 tsconfig.json 配置文件 在项目根目录下添加或更新 `tsconfig.json` 文件来适配 Vue 3 及其组件编写方式： ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@//*": [ "src/components/*" ] }, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitAny": false, "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "lib": ["esnext", "dom"], "allowSyntheticDefaultImports": true, "sourceMap": true, "outDir": "./dist/" }, "include": ["./src/**/*.ts", "./src/**/*.d.ts", "./src/**/*.tsx", "./src/**/*.vue"] } ``` #### 添加全局声明文件 components.d.ts 为了让 TypeScript 正确识别自定义组件和其他第三方库中的类型定义，在项目 src 目录内新增名为 `components.d.ts` 的文件，并加入必要的声明语句[^2]: ```typescript declare module '*.vue' { import type { DefineComponent } from 'vue' const component: DefineComponent<{}, {}, any> export default component } // 扩展更多全局可用的组件接口... export {} ``` #### 使用 Vuex 进行状态管理 如果计划采用 Vuex 实现应用的状态管理模式，则需先执行安装操作 `npm install vuex@next`[^3]。接着按照官方文档指导完成相应设置工作，比如建立 store 模块等。 #### 整合 ESLint 工具链 对于代码风格统一性和质量保障方面的要求，推荐引入 ESLint 工具辅助静态分析。可以通过运行命令 `npx eslint --init` 或者直接调用 `npm init @eslint/config` 来快速搭建适合当前工程特性的 linter 环境[^4]。同时记得调整 `.eslintrc.js` 中有关路径别名解析的部分配置项，使之能够兼容 Webpack 构建流程中所设定的 alias 映射关系[^5]。