大家好，我是 菲鸽，今天带给大家 unibest 文档系列文章第1篇 ------ 简介篇。欢迎食用~
简介
unibest 是最好的 uniapp 开发模板，是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite4 + UnoCss + VSCode(可选 webstorm) + uni插件+ wot-ui（可选其他UI库）实现。它使用了最新的前端技术栈，无需依靠 HBuilderX，通过命令行方式即可运行 web、小程序 和 App。（注：App 还是需要 HBuilderX）
unibest 内置了 约定式路由、layout布局、请求封装、请求拦截、登录拦截、UnoCSS、i18n多语言 等基础功能，提供了 代码提示、自动格式化、统一配置、代码片段 等辅助功能，让你编写 uniapp 拥有 best 体验 （ unibest 的由来）。
⭐ Star History
Github Star History 实时地址：star-history.com/#codercup/u... 。
与同类型模板对比，如下图，红色的为 unibest，后来居上，遥遥领先。
同类模板对比实时地址：star-history.com/#codercup/u...
🗂 生成过程
unibest 由最初始的官方cli脚手架模板生成，执行的命令如下：
sh
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-projectuniapp 官方链接：点击跳转 - quickstart-cli
在官方生成的项目基础上，增加了如下内容：
- 前端基础配置六件套
- prettier
- eslint
- stylelint
- husky
- lint-staged
- commitlint
- UnoCSS
- UnoCSS Icons
- Uni 插件
- vite-plugin-uni-pages
- vite-plugin-uni-layouts
- vite-plugin-uni-manifest
- vite-plugin-uni-platform
- UI库（默认
wot-ui，支持替换其他UI库) - pinia + pinia-plugin-persistedstate
- 通用功能
- 请求封装
- 请求拦截
- 路由拦截
✨ 特性
-
🔥 最新语法 -
<script lang="ts" setup>语法 -
🎨 UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎
-
😃 UnoCSS Icons & icones - 海量图标供你选择
-
🍍 pinia & pinia-plugin-persistedstate - 全端适配的全局数据管理
-
🗂
uni.request请求封装 - 一键引入，快捷使用 -
📦
路由拦截基础封装，支持扩展，快捷使用，拒绝黑盒 -
📥 API 自动加载 - 直接使用 Composition API 无需引入
-
🎉
v3Code Snippets 加快你的页面生成 -
🦾
Pritter&ESLint&Stylelint&husky&lint-staged+commitlint- 保证代码质量 -
🌈
TypeScript加持，同时又兼容js，同时满足不同人群 -
💡
ES6 import自动排序，css 属性自动排序，增强编码一致性 -
🖥
多环境配置分开，想则怎么配置就怎么配置
📦 目录结构
通过 tree -I node_modules -I dist -I .git -a > tree.md 命令生成。
tree
.
├── .editorconfig
├── .eslintrc-auto-import.json
├── .eslintrc.cjs
├── .gitignore
├── .husky
│ ├── _
│ │ ├── .gitignore
│ │ └── husky.sh
│ ├── commit-msg
│ └── pre-commit
├── .npmrc
├── .prettierrc.cjs
├── .stylelintrc.cjs
├── .vscode ------- 项目级别的vscode配置
│ ├── extensions.json
│ ├── settings.json
│ └── vue3.code-snippets
├── LICENSE
├── README.app.md
├── README.md
├── commitlint.config.cjs
├── env --------- 环境变量配置
│ ├── .env
│ ├── .env.development
│ ├── .env.local
│ ├── .env.production
│ └── .env.test
├── favicon.ico
├── index.html
├── manifest.config.ts ------ ts 方式编写 manifest.json
├── pages.config.ts ------ ts 方式编写 package.json
├── shell
│ └── postinstall.js
├── shims-uni.d.ts
├── src
│ ├── App.vue
│ ├── auto-import.d.ts
│ ├── components
│ │ └── .gitkeep
│ ├── env.d.ts
│ ├── hooks ------ hooks
│ │ ├── .gitkeep
│ │ └── useRequest.ts
│ ├── interceptors ------ 拦截器，已经内置请求拦截、路由拦截、原型方法补丁
│ │ ├── index.ts
│ │ ├── prototype.ts
│ │ ├── request.ts
│ │ └── route.ts
│ ├── layouts ------ 布局文件
│ │ ├── default.vue
│ │ └── demo.vue
│ ├── main.ts
│ ├── manifest.json
│ ├── pages --------- 页面
│ │ └── index
│ │ ├── about.vue
│ │ ├── index.vue
│ │ ├── request.vue
│ │ └── request2.vue
│ ├── pages-sub ----------其中一个分包页面，可以写多个
│ │ └── demo
│ │ └── index.vue
│ ├── pages.json
│ ├── service ----------- 接口和数据类型
│ │ └── index
│ │ ├── foo.d.ts
│ │ └── foo.ts
│ ├── static
│ │ ├── images
│ │ │ └── .gitkeep
│ │ ├── logo.svg
│ │ └── tabbar
│ │ ├── example.png
│ │ ├── exampleHL.png
│ │ ├── home.png
│ │ ├── homeHL.png
│ │ ├── personal.png
│ │ └── personalHL.png
│ ├── store ------------ 全局状态管理 pinia
│ │ ├── index.ts
│ │ └── user.ts
│ ├── style
│ │ └── index.scss
│ ├── types
│ │ ├── auto-import.d.ts
│ │ ├── global.d.ts
│ │ └── uni-pages.d.ts
│ ├── typings.ts
│ ├── uni.scss
│ └── utils ------------- 工具函数
│ ├── http.ts
│ ├── index.ts
│ └── platform.ts
├── tsconfig.json
├── uno.config.ts -------- UnoCSS 配置，uniapp 适配
└── vite.config.ts -------- Vite 插件配置项目目录真实截图如下：
全文完~