Search K
Appearance
UniBest 简介
unibest 是最好的 uniapp 开发框架，由 uniapp + Vue3 + Ts + Vite5 + UnoCss + VSCode(可选 webstorm) + uni插件+ wot-ui（可选其他 UI 库）构建，集成了多种工具和技术，使用了最新的前端技术栈，无需依靠 HBuilderX，通过命令行方式即可运行 web、小程序 和 App。（注：App 还是需要 HBuilderX）
unibest 内置了 约定式路由、layout布局、请求封装、请求拦截、登录拦截、UnoCSS、i18n多语言 等基础功能，提供了 代码提示、自动格式化、统一配置、代码片段 等辅助功能，让你编写 uniapp 拥有 best 体验 （ unibest 的由来）。
unibest目前支持H5、小程序和App。
安装
方式一：命令创建
新版 create-unibest@v3 通过下面的命令可以快速生成项目模板:
pnpm create unibest new <项目名称>
如果执行
pnpm create unibest， 则会打印帮助信息，等同pnpm create unibest -h。
实际操作如下：
- 有
new关键字，则进入创建项目流程。
bash
system ~ % pnpm create unibest new
┌ create-unibest@v3.1.0 快速创建 unibest@v4.1.0 项目
│
◇ 请输入项目名称[项目名称只能包含字母、数字、下划线和短横线，千万别写中文]
│ uni-demo
│
◆ 请选择需要支持的平台（多选）[脚手架将根据所选平台生成对应的平台代码，请根据实际情况选择]
│ ◻ H5
│ ◼ 微信小程序
│ ◻ APP
│ ◻ 支付宝小程序（包含钉钉）
│ ◻ 抖音小程序
│
◆ 请选择UI库
│ ○ 无UI库
│ ● wot-ui
│ ○ uview-pro
│ ○ sard-uniapp
│ ○ uv-ui
│ ○ uview-plus
◆ 是否需要登录策略（黑白名单、登录拦截等）？[暂不知道的，选No即可，项目生成后也可以加该策略]
│ ○ Yes / ● No
◆ 是否需要多语言i18n？
│ ○ Yes / ● No
◆ 项目uni-demo创建成功！- 没有
new关键字，则打印帮助信息。
bash
feige996 ~ % pnpm create unibest
WARN 1 deprecated subdependencies found: node-domexception@1.0.0
.../19ad2678dfe-1611 | +25 +++
.../19ad2678dfe-1611 | Progress: resolved 25, reused 25, downloaded 0, added 25, done
create-unibest - 跨平台开发框架脚手架
全局安装:
npm i -g create-unibest 全局安装，得到 best 命令
npm update -g create-unibest 更新 create-unibest 包
best <command> [options]
best new my-project 创建新的unibest项目
best -v 查看版本信息
best -h 查看帮助信息
临时使用:
pnpm create unibest <command> [options]
pnpm create unibest new my-project 创建新的unibest项目
pnpm create unibest -v 查看版本信息
pnpm create unibest -h 查看帮助信息方式二：下载模板【推荐】
进入阿里云的codeup，搜索toolkit，然后进入uniapp/unibest-vue3-wotui进行下载，当前模板已集成业务所需的一些工具和请求封装，也移除了一些不需要的文件及配置，详细使用文档请查阅unibest 模板教程。
框架说明
- 前端基础配置六件套
- 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|dist|.git" -a > tree.md 命令生成，当前命令只能在 bash 中运行，window自带的是有问题的，如果有需要查看下边的安装教程。
tree 安装教程
- tree 下载地址：http://gnuwin32.sourceforge.net/packages/tree.htm
- 打开进入 Tree for Windows 页面，选择下载
Binaries zip文件 - 解压压缩包，找到压缩包内的
bin目录，将bin目录下的tree.exe复制 - 找到
C:\Program Files\Git\usr\bin目录，将tree.exe粘贴到该目录下，安装即完成 - 如果git安装不在C盘，可以打开
git bash命令窗口，然后将tree.exe文件拖入命令窗口中，然后再最前边添加cp（后边要加空格），最后边添加/usr/bin/（前边要加空格），最终命令参考如下，按回车即可
sh
cp /d/Desktop/tree-1.5.2.2-bin/bin/tree.exe /usr/bin/txt
.
|-- .commitlintrc.cjs
|-- .cursor
| `-- rules
| |-- api-http-patterns.mdc
| |-- development-workflow.mdc
| |-- project-overview.mdc
| |-- styling-css-patterns.mdc
| |-- uni-app-patterns.mdc
| `-- vue-typescript-patterns.mdc
|-- .editorconfig
|-- .gitignore
|-- .husky
| |-- _
| | |-- .gitignore
| | |-- applypatch-msg
| | |-- commit-msg
| | |-- h
| | |-- husky.sh
| | |-- post-applypatch
| | |-- post-checkout
| | |-- post-commit
| | |-- post-merge
| | |-- post-rewrite
| | |-- pre-applypatch
| | |-- pre-auto-gc
| | |-- pre-commit
| | |-- pre-merge-commit
| | |-- pre-push
| | |-- pre-rebase
| | `-- prepare-commit-msg
| |-- commit-msg
| `-- pre-commit
|-- .node-version
|-- .npmrc
|-- .prettierignore
|-- .prettierrc.cjs
|-- .trae
| `-- rules
| `-- project_rules.md
|-- .vscode
| |-- extensions.json
| |-- settings.json
| `-- vue3.code-snippets
|-- LICENSE
|-- README.md
|-- env
| |-- .env
| |-- .env.development
| |-- .env.production
| `-- .env.test
|-- eslint.config.mjs
|-- favicon.ico
|-- index.html
|-- manifest.config.ts
|-- package.json
|-- pages.config.ts
|-- pnpm-lock.yaml
|-- scripts
| |-- create-base-files.js
| |-- open-dev-tools.js
| `-- postupgrade.js
|-- src
| |-- App.ku.vue
| |-- App.vue
| |-- api
| | |-- types
| | | |-- login.ts
| | | `-- user.ts
| | `-- user.ts
| |-- components
| | `-- .gitkeep
| |-- env.d.ts
| |-- hooks
| | |-- useRequest.ts
| | |-- useScroll.md
| | |-- useScroll.ts
| | `-- useUpload.ts
| |-- http
| | |-- README.md
| | |-- alova.ts
| | |-- tools
| | | |-- enum.ts
| | | `-- queryString.ts
| | `-- types.ts
| |-- layouts
| | |-- default.vue
| | `-- navbar.vue
| |-- main.ts
| |-- manifest.json
| |-- pages
| | |-- about
| | | `-- index.vue
| | |-- index
| | | `-- index.vue
| | `-- me
| | `-- me.vue
| |-- pages.json
| |-- router
| | |-- README.md
| | |-- config.ts
| | `-- interceptor.ts
| |-- static
| | `-- tabbar
| | |-- example.png
| | |-- exampleHL.png
| | |-- home.png
| | |-- homeHL.png
| | |-- personal.png
| | |-- personalHL.png
| | `-- scan.png
| |-- store
| | |-- app.ts
| | |-- index.ts
| | `-- user.ts
| |-- style
| | |-- iconfont.css
| | `-- index.scss
| |-- subpackages
| | |-- REAME.md
| | `-- auth
| | |-- 404
| | | |-- README.md
| | | `-- index.vue
| | |-- login
| | | |-- README.md
| | | `-- login.vue
| | `-- register
| | `-- register.vue
| |-- tabbar
| | |-- README.md
| | |-- config.ts
| | |-- index.vue
| | |-- store.ts
| | `-- types.ts
| |-- types
| | |-- async-component.d.ts
| | |-- async-import.d.ts
| | |-- auto-import.d.ts
| | `-- uni-pages.d.ts
| |-- typings.d.ts
| |-- typings.ts
| |-- uni.scss
| |-- uni_modules
| | `-- .gitkeep
| `-- utils
| |-- index.ts
| |-- lodash.ts
| |-- logger.ts
| |-- mpAuthorize.ts
| |-- mpSubscription.ts
| |-- queue.ts
| |-- storage.ts
| |-- tips.ts
| |-- token.ts
| |-- upgrade.ts
| `-- uploadFile.ts
|-- tree.md
|-- tsconfig.json
|-- uno.config.ts
|-- vite-plugins
| |-- README.md
| |-- copy-native-resources.ts
| `-- sync-manifest-plugins.ts
`-- vite.config.ts