简介
unibest
是最好的 uniapp
开发框架,由 uniapp
+ Vue3
+ Ts
+ Vite4
+ UnoCss
+ VSCode
(可选 webstorm
) + uni插件
+ wot-ui
(可选其他 UI 库)构建,集成了多种工具和技术,使用了最新的前端技术栈,无需依靠 HBuilderX
,通过命令行方式即可运行 web
、小程序
和 App
。(注:App
还是需要 HBuilderX
)
unibest
内置了 约定式路由
、layout布局
、请求封装
、请求拦截
、登录拦截
、UnoCSS
、i18n多语言
等基础功能,提供了 代码提示
、自动格式化
、统一配置
、代码片段
等辅助功能,让你编写 uniapp
拥有 best
体验 ( unibest 的由来
)。
unibest
目前支持H5
、小程序
和App
。
⭐ Star History
Github Star History 实时地址:https://star-history.com/#codercup/unibest&Date 。
与同类型模板对比,如下图,红色的为 unibest
,后来居上,遥遥领先。
Details
同类模板对比实时地址:https://star-history.com/#codercup/unibest&Ares-Chang/uni-vitesse&uni-helper/vitesse-uni-app&Date
🗂 生成过程
unibest
由最初始的官方 cli 脚手架模板生成,执行的命令如下:
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
uniapp
官方链接:点击跳转 - 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 无需引入
🎉
v3
Code Snippets 加快你的页面生成🦾
Pritter
&ESLint
&Stylelint
&husky
&lint-staged
+commitlint
- 保证代码质量🌈
TypeScript
加持,同时又兼容js
,同时满足不同人群💡
ES6 import
自动排序,css 属性
自动排序,增强编码一致性🖥
多环境
配置分开,想则怎么配置就怎么配置
📦 目录结构
通过 tree -I node_modules -I dist -I .git -a > tree.md
命令生成。
.
├── .editorconfig
├── .eslintignore
├── .eslintrc-auto-import.json
├── .eslintrc.cjs
├── .gitignore
├── .husky
├── .npmrc
├── .prettierignore
├── .prettierrc.cjs
├── .stylelintignore
├── .stylelintrc.cjs
├── .vscode
├── LICENSE
├── README.md
├── commitlint.config.cjs
├── env
│ ├── .env
│ ├── .env.development
│ ├── .env.production
│ └── .env.test
├── favicon.ico
├── index.html
├── manifest.config.ts
├── package.json
├── pages.config.ts
├── src
│ ├── App.vue
│ ├── components
│ │ └── .gitkeep
│ ├── env.d.ts
│ ├── hooks
│ │ ├── .gitkeep
│ │ ├── useRequest.ts
│ │ └── useUpload.ts
│ ├── interceptors
│ │ ├── index.ts
│ │ ├── prototype.ts
│ │ ├── request.ts
│ │ └── route.ts
│ ├── layouts
│ │ ├── default.vue
│ │ └── demo.vue
│ ├── main.ts
│ ├── manifest.json
│ ├── pages
│ │ ├── about
│ │ │ ├── about.vue
│ │ │ └── components
│ │ │ ├── request.vue
│ │ │ └── upload.vue
│ │ └── index
│ │ └── index.vue
│ ├── pages-sub
│ │ └── demo
│ │ └── index.vue
│ ├── pages.json
│ ├── service
│ │ └── index
│ │ └── foo.ts
│ ├── static
│ │ ├── images
│ │ │ └── .gitkeep
│ │ ├── logo.svg
│ │ └── tabbar
│ │ ├── example.png
│ │ ├── exampleHL.png
│ │ ├── home.png
│ │ ├── homeHL.png
│ │ ├── personal.png
│ │ └── personalHL.png
│ ├── store
│ │ ├── index.ts
│ │ └── user.ts
│ ├── style
│ │ └── index.scss
│ ├── types
│ │ ├── auto-import.d.ts
│ │ ├── global.d.ts
│ │ ├── shims-uni.d.ts
│ │ └── uni-pages.d.ts
│ ├── typings.ts
│ ├── uni.scss
│ ├── uni_modules
│ │ └── .gitkeep
│ └── utils
│ ├── http.ts
│ ├── index.ts
│ └── platform.ts
├── tsconfig.json
├── uni-pages.d.ts
├── uno.config.ts
└── vite.config.ts