uni-vue3-ts-template
uni-vue3-ts-template copied to clipboard
ATQQ
开箱即用的uni-app vue3 TS 工程化模板项目，支持小程序/H5/APP开发使用，包含pinia，sass/less，axios，vitest，eslint，Unocss
uni-vue3-ts-template
uni-app Vue3 + TypeScript + Vite + Pinia + Unocss 模板项目
支持小程序，H5，App
| H5 | 微信小程序 | App(iOS) | App(Android) |
|---|---|---|---|
 |
 |
 |
 |
其它模板
- Vue3的uni-app 纯js模板：uni-app-template
- Vue3的Web应用模板：vite-vue3-template
Env Suggest
Node >= 18
pnpm 8
Registry taobao - https://registry.npmmirror.com/
Use This Template
npx degit atqq/uni-vue3-ts-template#main my-uni-vue3-ts-vite-project
Feature
Prod
Dev
- [x] Vite
- [x] TypeScript
- [x] Sass
- [x] Less
- [x] Eslint
- [x] Prettier
- [x] Vitest - replace jest
- [x] unocss - 即时按需原子 css 引擎
- [x] GitHooks simple-git-hooks
- ~~LintStaged~~
- ~~StyleLint~~
使用
安装依赖
建议使用pnpm，依赖安装速度更快
npm i -g pnpm
pnpm install
MAC M1(ARM芯片)，其它操作系统无需关注，正常运行需要手动安装 esbuild-darwin-64即可
pnpm add @esbuild/[email protected] -D
安装的版本或者指令可以运行下面这个脚本获取
node arm-esbuild-version.js
# 或者
pnpm mac:m1:esbuild
本地启动
微信小程序
# 构建出产物
pnpm dev:mp-weixin
Q1： 如果dev的时候发现报错，可以尝试删除
node_modules之后再在命令行中运行pnpm install --shamefully-hoist重新安装依赖再pnpm dev:mp-weixin
Q2： 如果运行白屏，有报错信息 “app.js错误ReferenceError: regeneratorRuntime is not defined”
参考解决方案 给微信小程序IDE开启增强编译选项
然后将编译结果dist/dev/mp-weixin导入微信开发者工具即可运行
点击查看 导入详细步骤
Q3：真机运行白屏，模拟器，开发环境都正常
参考issue 25，使用build 生产的资源进行真机调试就可以了
H5
# CSR
pnpm dev:h5
根据提示，打开对应地址即可访问
App
Q1： 如启动到App侧有报错？ 请更新至最新的HBuilderX-Alpha客户端
安装一些必要工具
需要使用 uni-app 官方提供的 HBuilderX 启动项目
Android模拟器在MacOSX、Windows上都可以安装；iOS模拟器只能在MacOSX上安装。
先安装相关模拟器，详细参考文档
- 安卓：夜神模拟器
- iOS：Mac上安装Xcode
准备就绪后，使用 HBuilderX 打开项目
iOS模拟器运行
通过顶部菜单栏，找到运行入口
选择一个目标设备，点击启动即可
Android模拟器运行
这里以夜神模拟器为例
点击查看 详细步骤
先通过 HBuilderX 修改模拟器端口为 62001
打开夜神模拟器
选择运行到 Android 基座
选择已经打开的模拟器，点击运行即可
打包构建
微信小程序
pnpm build:mp-weixin
H5
# CSR
pnpm build:h5
App
基于 HBuilderX 参考官方文档进行进一步的操作
其它更多运行脚本 查看 package.json中的scripts
css预处理
已配置scss和less全局变量
// 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文档
-
@代替./src -
@components代替./src/components
// vite.config.ts
export default defineConfig({
// ......
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@components': path.resolve(__dirname, './src/components')
}
}
})
例子：
// 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 文件，纠正下路径才可以。
// tsconfig.json
{
// ......
"compilerOptions": {
// ......
+ "baseUrl": "./",
+ "paths": {
+ "@/*": ["src/*"],
+ "@components/*": ["src/components/*"]
}
},
}
添加 baseUrl 和 paths 参数，就可以完美解决编辑器的报错提示了！
原子化css
- unocss - 即时按需原子 css 引擎
- unocss-preset-weapp - 兼容小程序 unocss 预设
支持小程序，h5，app
ATQQ