uni-app Vue3 + TypeScript + Vite + Pinia + Unocss 模板项目
fork from ATQQ/uni-vue3-ts-template
支持小程序,H5,App
H5 | 微信小程序 | App(iOS) | App(Android) |
---|---|---|---|
其它模板
- Vue3的uni-app 纯js模板:uni-app-template
- Vue3的Web应用模板:vite-vue3-template
Node >= 16
pnpm >= 7
Registry taobao - https://registry.npmmirror.com/
pnpm create matrix-starter
选择vue3 - uniapp模板
- Vue3
- Pinia - 全局状态管理
- uni-network 为 uni-app 打造的基于 Promise 的 HTTP 客户端
- uni-use - uni-app (vue3) 组合式工具集
- uView - vk-uview-ui vue3组件库
- Vite
- TypeScript
- Sass
- Less
- Eslint
- Prettier
- unocss - 即时按需原子 css 引擎
- simple-git-hooks - GitHooks
- unplugin-auto-import - 直接使用 Composition API 无需引入
- @uni-helper/vite-plugin-uni-manifest - 创建 manifest.config.(ts|mts|cts|js|cjs|mjs|json), 然后用 TypeScript 编写你的 manifest.json
- @uni-helper/vite-plugin-uni-components - 直接使用组件无须import,支持typescript类型提示
- @uni-helper/vite-plugin-uni-layouts - Vite 下 uni-app 的可定制布局框架
建议使用pnpm,依赖安装速度更快
npm i -g pnpm
pnpm install
MAC M1(ARM芯片),其它操作系统无需关注,正常运行需要手动安装 esbuild-darwin-64
即可
pnpm add esbuild-darwin-64@0.15.13 -D
# 构建出产物
pnpm dev:mp-weixin
Q1: 如果运行白屏,有报错信息 “app.js错误ReferenceError: regeneratorRuntime is not defined”
参考解决方案 给微信小程序IDE开启增强编译选项
然后将编译结果dist/dev/mp-weixin
导入微信开发者工具即可运行
# CSR
pnpm dev:h5
# SSR
pnpm dev:h5:ssr
根据提示,打开对应地址即可访问
Q1: 如启动到App侧有报错? 请更新至最新的HBuilderX-Alpha客户端
需要使用 uni-app
官方提供的 HBuilderX 启动项目
Android模拟器在MacOSX、Windows上都可以安装;iOS模拟器只能在MacOSX上安装。
先安装相关模拟器,详细参考文档
- 安卓:夜神模拟器
- iOS:Mac上安装Xcode
准备就绪后,使用 HBuilderX 打开项目
通过顶部菜单栏,找到运行入口
选择一个目标设备,点击启动即可
这里以夜神模拟器为例
pnpm build:mp-weixin
# CSR
pnpm build:h5
# SSR
pnpm build:h5:ssr
基于 HBuilderX
参考官方文档进行进一步的操作
其它更多运行脚本 查看 package.json中的scripts
// 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不会识别路径的别名,显示找不到模块的报错,这个时候需要修改 tsconfig.json
文件,纠正下路径才可以。
// tsconfig.json
{
// ......
"compilerOptions": {
// ......
+ "baseUrl": "./",
+ "paths": {
+ "@/*": ["src/*"],
+ "@components/*": ["src/components/*"]
}
},
}
添加 baseUrl
和 paths
参数,就可以完美解决编辑器的报错提示了!
- unocss - 即时按需原子 css 引擎
- unocss-preset-weapp - 兼容小程序 unocss 预设
支持小程序,h5,app