【unibest文档】一、简介篇

大家好,我是 菲鸽,今天带给大家 unibest 文档系列文章第1篇 ------ 简介篇。欢迎食用~

简介

unibest 是最好的 uniapp 开发模板,是一个集成了多种工具和技术的 uniapp 开发模板,由 uniapp + Vue3 + Ts + Vite4 + UnoCss + VSCode(可选 webstorm) + uni插件+ wot-ui(可选其他UI库)实现。它使用了最新的前端技术栈,无需依靠 HBuilderX,通过命令行方式即可运行 web小程序App。(注:App 还是需要 HBuilderX

unibest 内置了 约定式路由layout布局请求封装请求拦截登录拦截UnoCSSi18n多语言 等基础功能,提供了 代码提示自动格式化统一配置代码片段 等辅助功能,让你编写 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-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
  • 通用功能
    • 请求封装
    • 请求拦截
    • 路由拦截

✨ 特性

  • ⚡️ Vue 3, Vite, pnpm, esbuild - 就是快!

  • 🔥 最新语法 - <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 命令生成。

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 插件配置

项目目录真实截图如下:

全文完~

相关推荐
耶啵奶膘43 分钟前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
我开心就好o8 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index8 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情15 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑00718 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字18 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔19 小时前
uniapp rpx兼容平板
uni-app
荔枝吖19 小时前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗19 小时前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
halo141621 小时前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app