uni-plus 开发框架使用教程

1. 项目的目录结构及介绍

uni-plus 是一个基于 Uniapp + Vue3 + TS + Vite + Pinia + Unocss + WotUi 的跨端快速启动模板。以下是项目的目录结构及各部分的作用介绍：

uni-plus/
├── .github/              # GitHub 工作流和模板
├── .hbuilderx/           # HBuilderX 配置文件
├── .husky/               # Husky 配置文件，用于提交代码前的钩子
├── .vscode/              # VSCode 配置文件
├── src/                  # 源代码目录
│   ├── components/       # 自定义组件目录
│   ├── pages/            # 页面目录
│   ├── utils/            # 工具类目录
│   ├── stores/           # Pinia 状态管理目录
│   └── App.vue           # 应用根组件
├── .env                  # 环境变量配置文件
├── .env.development      # 开发环境配置文件
├── .env.production       # 生产环境配置文件
├── .gitignore            # Git 忽略文件
├── .npmrc                # npm 配置文件
├── .prettierignore       # Prettier 忽略文件
├── .release-it.json      # Release It 配置文件
├── .stylelintignore      # Stylelint 忽略文件
├── CHANGELOG.md          # 更改日志文件
├── LICENSE               # 开源许可证文件
├── README.md             # 项目说明文件
├── commitlint.config.cjs # CommitLint 配置文件
├── components.d.ts       # 自定义组件类型声明文件
├── eslint.config.mjs     # ESLint 配置文件
├── index.html            # HTML 入口文件
├── package.json          # 项目配置文件
├── pages.config.ts       # 页面配置文件
├── pnpm-lock.yaml        # Pnpm 锁文件
├── prettier.config.mjs   # Prettier 配置文件
├── stylelint.config.mjs  # Stylelint 配置文件
├── tsconfig.json         # TypeScript 配置文件
└── unocss.config.ts      # Unocss 配置文件

2. 项目的启动文件介绍

项目的启动文件主要包括 package.json 中的脚本，以下是主要的启动脚本介绍：

• pnpm create uni-plus my-project：创建一个新的 uni-plus 项目。
• pnpm i：安装项目依赖。
• pnpm dev:h5：启动 H5 开发环境。

在终端运行 pnpm dev:h5 脚本后，会启动一个本地服务器，并在浏览器中自动打开一个新标签页，展示 H5 的开发环境。

3. 项目的配置文件介绍

以下是项目中的几个主要配置文件的介绍：

• .env、.env.development、.env.production：环境变量配置文件，用于定义不同环境下的变量，如 API 地址等。
• tsconfig.json：TypeScript 配置文件，定义了项目的 TypeScript 编译选项。
• vite.config.ts：Vite 配置文件，用于配置 Vite 的行为，如代理设置、环境变量等。
• unocss.config.ts：Unocss 配置文件，用于配置 Unocss 的行为，如预设、规则等。
• eslint.config.mjs：ESLint 配置文件，用于定义代码质量规则。
• prettier.config.mjs：Prettier 配置文件，用于定义代码格式化规则。
• stylelint.config.mjs：Stylelint 配置文件，用于定义 CSS/SCSS 代码质量规则。