# uniapp-ts-unocss-pinia-vue3-demo
**Repository Path**: ggbhack/uniapp-ts-unocss-pinia-vue3-demo
## Basic Information
- **Project Name**: uniapp-ts-unocss-pinia-vue3-demo
- **Description**: uniapp-ts-unocss-pinia-vue3-demo 架子
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-01-12
- **Last Updated**: 2025-07-01
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# uni-vue3-ts-template
uni-app Vue3 + TypeScript + Vite + Pinia + Unocss 模板项目
## 项目架构
---
- api 接口
- components 组件文件
- enums 枚举
- PageEnum 页面枚举
- hooks hooks 函数库
- locales 多语言
- logics 项目初始化
- packageDemo demo 模块
- pages 主包
- [ ] index 首页
- [ ] login 登录
- [ ] bindDevice 绑定
- [ ] logs 操作日志
- settings 配置文件
- statics 静态文件
- store 状态管理
- index pinia
- styles 主题样式配置
- utils
- uniUtil uni 工具包
- hooks
- types 项目用到的类型声明文件
- uni_modules uni 库
支持小程序，H5，App
| H5 | 微信小程序 | App(iOS) | App(Android) |
| :-------------------------------------------------------------------------: | :-------------------------------------------------------------------------: | :-------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: |
|  |  |  | 
|
其它模板
- Vue3 的 uni-app 纯 js 模板：[uni-app-template](https://github.com/ATQQ/uni-app-template)
- Vue3 的 Web 应用模板：[vite-vue3-template](https://github.com/ATQQ/vite-vue3-template)
## Env Suggest
**Node >= 14.19**
**pnpm 7**
**Registry taobao - https://registry.npmmirror.com/**
## Use This Template
```sh
npx degit atqq/uni-vue3-ts-template#main my-uni-vue3-ts-vite-project
```
## Feature
### Prod
- [x] [Vue3](https://vuejs.org/)
- [x] [Pinia](https://pinia.vuejs.org/) - replace vuex
- [x] [Axios](https://github.com/axios/axios)
- UI/组件库
- [x] [uView](https://uiadmin.net/uview-plus/) - uview-plus
- [ ] [uni-ui](https://github.com/dcloudio/uni-ui) - 待接入
### Dev
- [x] [Vite](https://github.com/vitejs/vite)
- [x] [TypeScript](https://github.com/microsoft/TypeScript/#readme)
- [x] [Sass](https://github.com/sass/sass)
- [x] [Less](https://github.com/less/less.js)
- [x] [Eslint](https://eslint.org/)
- [x] [Prettier](https://prettier.io/)
- [x] [Vitest](https://vitest.dev/) - replace jest
- [x] [unocss](https://github.com/unocss/unocss) - 即时按需原子 css 引擎
- [x] GitHooks [simple-git-hooks](https://github.com/toplenboren/simple-git-hooks#readme)
- ~~LintStaged~~
- ~~StyleLint~~
### GGB 扩展
- [x] [Api 自动引入](https://github.com/antfu/unplugin-auto-import)
- [x] [Iconify 图标库](https://icones.netlify.app)
- [x] [cli 模式创建 vue3+vite+ts 项目运行报错：Cannot start service: Host version “0.16.17” does not match binary version “0.14.7”](https://blog.csdn.net/a843334549/article/details/129020800)
## 使用
### 安装依赖
**建议使用 pnpm，依赖安装速度更快**
```sh
npm i -g pnpm
```
```sh
pnpm install
```
**MAC M1(ARM 芯片)，其它操作系统无需关注**，正常运行需要手动安装 `esbuild-darwin-64`即可
```sh
pnpm add esbuild-darwin-64@0.15.13 -D
```
## 本地启动
### 微信小程序
```sh
# 构建出产物
pnpm dev:mp-weixin
```
> **Q1：** 如果 dev 的时候发现报错，可以尝试删除`node_modules`之后再在命令行中运行`pnpm install --shamefully-hoist`重新安装依赖再`pnpm dev:mp-weixin`
>
> [详细参考文档](https://pnpm.io/zh/faq#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%883)
> **Q2：** 如果运行白屏，有报错信息 “app.js 错误 ReferenceError: regeneratorRuntime is not defined”
>
> 参考[解决方案](https://blog.csdn.net/FUFCY/article/details/125160828) 给微信小程序 IDE 开启**增强编译选项**
然后将编译结果`dist/dev/mp-weixin`导入微信开发者工具即可运行
点击查看 导入详细步骤
### H5
```sh
# CSR
pnpm dev:h5
# SSR
pnpm dev:h5:ssr
```
根据提示，打开对应地址即可访问
### App
> **Q1：** 如启动到 App 侧有报错？
> 请更新至最新的 HBuilderX-Alpha 客户端
#### 安装一些必要工具
需要使用 `uni-app` 官方提供的 [HBuilderX](https://www.dcloud.io/hbuilderx.html) 启动项目
**Android 模拟器在 MacOSX、Windows 上都可以安装；iOS 模拟器只能在 MacOSX 上安装。**
先安装相关模拟器，[详细参考文档](https://hx.dcloud.net.cn/Tutorial/App/installSimulator)
- 安卓：[夜神模拟器](https://www.yeshen.com/blog/)
- iOS：Mac 上安装 Xcode
准备就绪后，使用 HBuilderX 打开项目
#### iOS 模拟器运行
通过顶部菜单栏，找到运行入口
选择一个目标设备，点击启动即可
#### Android 模拟器运行
这里以[夜神模拟器](https://www.yeshen.com/blog/)为例
点击查看 详细步骤
先通过 HBuilderX 修改模拟器端口为 `62001`
打开夜神模拟器
选择运行到 Android 基座
选择已经打开的模拟器，点击运行即可
## 打包构建
### 微信小程序
```
pnpm build:mp-weixin
```
### H5
```sh
# CSR
pnpm build:h5
# SSR
pnpm build:h5:ssr
```
### App
基于 `HBuilderX` 参考[官方文档](https://hx.dcloud.net.cn/Tutorial/App/SafePack)进行进一步的操作
其它更多运行脚本 查看 [package.json](./package.json)中的 scripts
## css 预处理
### 已配置`scss`和`less`全局变量
```typescript
// vite.config.ts
export default defineConfig({
// ......
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/static/styles/variables.scss";'
},
less: {
additionalData: '@import "@/static/styles/variables.less";'
}
}
}
})
```
`additionalData`的值是文件的路径，可以按照自己业务需求去修改，**如果项目样式变量分的比较细，可以使用一个样式文件引入多个变量样式文件，然后在这里引入入口文件**
## 别名配置
如果我们想要在`import`的时候 src 的路径简写成`@`，下面的就是配置 vite 的别名，[属性类型请查看 vite 文档](https://vitejs.cn/config/#resolve-alias)
- `@` 代替 `./src`
- `@components`代替`./src/components`
```typescript
// vite.config.ts
export default defineConfig({
// ......
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@components': path.resolve(__dirname, './src/components')
}
}
})
```
例子：
```diff
// pages/index/index.vue
- import Hello from '../../components/hello/index.vue'
+ import Hello from '@/components/hello/index.vue'
// 或者
+ import Hello from '@components/hello/index.vue'
```
### ts
如果是使用 ts 开发，这样还不够，ts 不会识别路径的别名，显示找不到模块的报错，这个时候需要修改 `tsconfig.json` 文件，纠正下路径才可以。
```diff
// tsconfig.json
{
// ......
"compilerOptions": {
// ......
+ "baseUrl": "./",
+ "paths": {
+ "@/*": ["src/*"],
+ "@components/*": ["src/components/*"]
}
},
}
```
添加 `baseUrl` 和 `paths` 参数，就可以完美解决编辑器的报错提示了！
## 原子化 css
- [unocss](https://github.com/unocss/unocss) - 即时按需原子 css 引擎
- [unocss-preset-weapp](https://github.com/MellowCo/unocss-preset-weapp) - 兼容小程序 unocss 预设
> 支持小程序，h5，app
