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: 模态狂组件。
其他组件

开发

安装依赖：

npm install

Css Modules Type 定义文件生成

npm run style:dts

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

开发

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: 导航栏高度

ccqgithub/taro-vue3