xxyu98 / uni-template

自用模板 uni vue3 ts unocss pinia

uni-vue3-ts-template

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

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

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

Dev

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

使用

安装依赖

建议使用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 dev:mp-weixin

H5

# CSR
pnpm dev:h5

打包构建

微信小程序

pnpm build:mp-weixin

H5

# CSR
pnpm build:h5

别名配置

如果我们想要在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 参数，就可以完美解决编辑器的报错提示了！