Taro Vue3 快速开始脚手架

Tips

• 开发前请先替换自己的 app id

特性

• Taro3。
• Vue3。
• Typescript。
• Vue I18n国际化。
• Luxon时间选择。
• Pinia状态管理 + Pinia DI。
• Css Modules。
• 代码风格 Lint: Eslint + StyleLint + Prettier。
• Git Lint: Husky + CommitLint + LintStaged。
• 路径别名: @/assets, @/components 等等。
• 登录: 内置简单的登录流程。
• Portal：Taro本身不支持Teleport组件，自己实现一个类似功能的Portal组件。
• Popup: 弹窗组件。
• Toast: 自定义Toast。
• Modal: 模态狂组件。
• 其他组件

开发

1. 安装依赖：

npm install

2. Css Modules Type 定义文件生成

npm run style:dts

自定监听.module.scss文件，生成.module.scss.d.ts定义文件，这样引用的时候有类型提示。

3. 开发

npm run dev:weapp

目录

• config: Build 配置
• envs: Build 环境变量
• scripts: 脚本文件
• src: 主要源码
  • @/assets: 静态资源
    • icon: 图标
    • static: 静态大文件，不打包进小程序（packOptions.ignore），而是上传服务器，通过链接访问
    • staticIcons: 这里面的图标再小也不Base64，因为地图不能用
  • @/components: 组件库
  • @/config：配置
  • @/constants: 常量
    • @/constants/langs: 翻译文件
  • @/types: 类型定义
  • @/pages: 页面
  • @/root: 直接copy到根目录
  • @/service: 业务逻辑，API调用
  • @/store: 全局Store
  • @/style: 全局样式
  • @/use: 公用 Compisiton APIs
  • @/utils: 公用辅助方法

环境变量

执行npm run env会自动降envs目录下定义的环境变量名自动添加到env.d.ts文件中，从而支持process.env.xx类型提示。

• process.env.TARO_ENV_REAL: 构建类型，微信小程序、h5 等。
• process.env.TARO_APP_ENV: 构建的环境，比如 staging，test 等。

合并顺序：优先级从上到下

process.env .env.${taroEnv}.local .env.local .env.${taroEnv}.${nodeDev} .env.${taroEnv} .env

CSS Modules

执行npm run styles:dts，会监听.module.scss文件，自动生成.module.scss.d.ts，以支持 Typescript。

路径提示

为了便于文件迁移，以及区分第三方模块，设置src/**的别名为@/，导入文件用import xx from '@/xx'。

为了在 import image 的时候有路径提示，推荐 vscode 安装path-autocomplete，并且在项目下的.vscode/settings.json里配置：

{
  "path-autocomplete.pathMappings": {
    "@": "${folder}/src",
    "~@": "${folder}/src"
  }
}

Typescript

• 安装Volar插件。
• Vue Typescript 开发注意事项。

基础组件

如果使用template，taro的基础组件在vue中有点问题，所以需要重新封装一下，如果缺少某组件，请在src/components/Native/index.ts中自行添加。

Toast

<script setup lang="ts">
import { showToast } from '@/utils';

showToast('test');
</script>

Confirm Modal

<script setup lang="ts">
import { confirm } from '@/utils';

const confirmSomething = async () => {
  const isConfirm = await confirm({
    title: '',
    content: ''
  })
}
</script>

骨架屏

和 Page 路径对应的 pages/xxx/xxx.skeleton.wxml 会添加在页面模板后面，可以作为Taro 节点还未渲染的默认显示。

参考: 'pages/index/index.skeleton.wxml'

• glb.appInited: AppStore.dataInited
• glb.loaded: '页面loaded'
• glb.ready: '页面主区域渲染完毕'
• glb.topBarHeight: 导航栏高度