VivenZZ/unipptemplate

uni-vue3-ts-template

uni-app Vue3 + TypeScript + Vite + Pinia 模板项目

支持小程序，H5，App

H5	微信小程序	App(iOS)	App(Android)

其它模板

• Vue3的uni-app 纯js模板：uni-app-template
• Vue3的Web应用模板：vite-vue3-template

Use This Template

npx degit atqq/uni-vue3-ts-template#main my-uni-vue3-ts-vite-project

Feature

Prod

• Vue3
• Pinia - replace vuex
• Axios
• UI/组件库
  • uView - vk-uview-ui
  • uni-ui - 待接入

Dev

• Vite
• TypeScript
• Sass
• Less
• Eslint
• Prettier
• Vitest - replace jest
• LintStaged
• GitHooks
• StyleLint

使用

安装依赖

npm i -g pnpm

pnpm install

本地启动

微信小程序

# 构建出产物
pnpm dev:mp-weixin

然后将编译结果dist/dev/mp-weixin导入微信开发者工具即可运行

点击查看 导入详细步骤

H5

# CSR
pnpm dev:h5
# SSR
pnpm dev:h5:ssr

根据提示，打开对应地址即可访问

App

安装一些必要工具

需要使用 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
# SSR
pnpm build:h5:ssr

App

基于 HBuilderX 参考官方文档进行进一步的操作

其它更多运行脚本 查看 package.json中的scripts