uni-app Vue3 Vite3 Pinia TypeScript 基础框架

特性

• 最新技术栈：使用 Vue3/Vite3/Pinia/TypeScript/Windicss/Unocss 等前端前沿技术开发;
• Eslint/Prettier：规范代码格式，统一编码;
• 路由拦截：基于 uni.addInterceptor 进行路由拦截;
• 请求拦截：核心使用 luch-request，支持请求和响应拦截等;
• 缓存加密：使用AES加密缓存，可设置区分在开发或生成环境中是否加密;
• 自动导入：自动导入 vue3 的 hooks 等。

目录结构

├── mock              # mockjs
├── src
│  ├── api            # 接口相关
│  │  ├── models      # 数据模型
│  │  ├── auth.ts
│  │  └── ...
│  ├── assets         # 静态资源目录，css、less/scss 等资源不要放在 static 目录下
│  ├── components     # 组件目录
│  │  ├── AppProvider
│  │  └── ...
│  ├── config         # 配置相关
│  │  ├── app.ts
│  │  └── encryptionConfig.ts
│  ├── enums          # 枚举/常量
│  │  ├── appEnum.ts
│  │  └── ...
│  ├── language        # i18n
│  │  ├── lang
│  │  └── index.ts
│  ├── pages           # 页面
│  │  ├── about
│  │  └── ...
│  ├── pagesA          # 子页面(拆包)
│  │  └── list
│  ├── stores           # state 状态管理模式(pinia)
│  │  ├── modules
│  │  └── index.ts
│  ├── static          # 静态文件静态公共文件
│  │  ├── images
│  │  └── ...
│  ├── types           # 类型文件
│  ├── uni_modules     # uni 组件库
│  ├── utils           # 工具类
│  │  ├── cache        # 缓存相关目录
│  │  ├── http         # request相关目录
│  │  ├── interceptors # 拦截器相关目录
│  │  └── ...
│  ├── wxcomponents    # 微信小程序组件
│  ├── App.vue        # 这个文件的作用包括:调用应用生命周期函数、配置全局样式、配置全局的存储globalData
│  ├── env.d.ts
│  ├── main.ts        # main.[js/ts] 是uni-app的入口文件,主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex.
│  ├── manifest.json # manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等
│  ├── pages.json # 对uni-app进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等 官方文档:https://uniapp.dcloud.net.cn/collocation/pages.html
│  └── uni.scss   # uni.scss文件的用途是为了方便整体控制应用的风格 官方文档:https://uniapp.dcloud.net.cn/collocation/uni-scss.html
├── .editorconfig
├── .env
├── .env.development
├── .env.production
├── .env.staging
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .npmrc
├── .prettierignore
├── .prettierrc.js
├── LICENSE
├── README.md
├── favicon.ico
├── index.html
├── package-lock.json
├── package.json
├── tsconfig.json
└── vite.config.ts

安装使用

• 安装依赖

# nodejs v18.12.x
npx degit cruldra/uniapp-vue3-ts-template my-project

cd my-project

pnpm install

• 运行

# 其他端请查看 package.json script

# h5 or npm run xxx
pnpm dev:h5

# 微信小程序, 生成的包在 dist/dev/mp-weixin 下，用微信开发者工具打开
pnpm dev:mp-weixin

• 打包

# 其他端请查看 package.json script
pnpm build:h5

开发工具

VsCode 插件

• volar
• ESLint
• prettier
• UnoCSS

Git 提交规范

• 参考 vue 规范 (Angular)

  • feat 增加新功能
  • fix 修复问题/BUG
  • style 代码风格相关无影响运行结果的
  • perf 优化/性能提升
  • refactor 重构
  • revert 撤销修改
  • test 测试相关
  • docs 文档/注释
  • chore 依赖更新/脚手架配置修改等
  • workflow 工作流改进
  • ci 持续集成
  • types 类型定义文件更改
  • wip 开发中

参考资料

• uni-app Vue3 Vite3 TypeScript 基础框架 - 基于该项目进行修改
• uni-app - 跨平台框架
• Vue3 - Vue3
• Vite - 构建工具
• Pinia - 状态管理（代替 Vuex)
• TypeScript - TS
• luch-request - API 请求库
• Windi CSS - ACSS 框架
• unplugin-auto-import - 自动导入
• UnoCSS - 原子 CSS 引擎。