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
• Vue3 的 Web 应用模板：vite-vue3-template

Env Suggest

Node >= 14.19

pnpm 7

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

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

Dev

• Vite
• TypeScript
• Sass
• Less
• Eslint
• Prettier
• Vitest - replace jest
• unocss - 即时按需原子 css 引擎
• GitHooks simple-git-hooks
• LintStaged
• StyleLint

GGB 扩展

• Api 自动引入
• Iconify 图标库
• cli 模式创建 vue3+vite+ts 项目运行报错：Cannot start service: Host version “0.16.17” does not match binary version “0.14.7”

使用

安装依赖

建议使用 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： 如果 dev 的时候发现报错，可以尝试删除node_modules之后再在命令行中运行pnpm install --shamefully-hoist重新安装依赖再pnpm dev:mp-weixin

详细参考文档

Q2： 如果运行白屏，有报错信息 “app.js 错误 ReferenceError: regeneratorRuntime is not defined”

参考解决方案 给微信小程序 IDE 开启增强编译选项

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

H5

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

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

App

Q1： 如启动到 App 侧有报错？ 请更新至最新的 HBuilderX-Alpha 客户端

安装一些必要工具

需要使用 uni-app 官方提供的 HBuilderX 启动项目

Android 模拟器在 MacOSX、Windows 上都可以安装；iOS 模拟器只能在 MacOSX 上安装。

先安装相关模拟器，详细参考文档

• 安卓：夜神模拟器
• iOS：Mac 上安装 Xcode

准备就绪后，使用 HBuilderX 打开项目

iOS 模拟器运行

通过顶部菜单栏，找到运行入口

选择一个目标设备，点击启动即可

Android 模拟器运行

这里以夜神模拟器为例

打包构建

微信小程序

pnpm build:mp-weixin

H5

# CSR
pnpm build:h5
# SSR
pnpm build:h5:ssr

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