/uni-vue3-ts-template

开箱即用的uni-app vue3 TS 工程化模板项目,支持小程序/H5/APP开发使用,包含pinia,sass/less,axios,vitest,eslint,Unocss

Primary LanguageTypeScriptMIT LicenseMIT

uni-vue3-ts-template

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

支持小程序,H5,App

图片

Unocss

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

其它模板

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

使用

安装依赖

建议使用pnpm,依赖安装速度更快

npm i -g pnpm
pnpm install

MAC M1(ARM芯片),其它操作系统无需关注,正常运行需要手动安装 esbuild-darwin-64即可

pnpm add @esbuild/darwin-x64@0.18.20 -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上安装。

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

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

iOS模拟器运行

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

图片

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

图片

Android模拟器运行

这里以夜神模拟器为例

点击查看 详细步骤

先通过 HBuilderX 修改模拟器端口为 62001

图片

打开夜神模拟器

图片

选择运行到 Android 基座

图片

选择已经打开的模拟器,点击运行即可 图片

图片

打包构建

微信小程序

pnpm build:mp-weixin

H5

# CSR
pnpm build:h5

App

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

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

css预处理

已配置scssless全局变量

// 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/*"]
    }
  },
}

添加 baseUrlpaths 参数,就可以完美解决编辑器的报错提示了!

原子化css

支持小程序,h5,app