# taro-vue3-ts

**Repository Path**: front-learn/taro-vue3-ts

## Basic Information

- **Project Name**: taro-vue3-ts
- **Description**: taro-vue3-ts
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-12-10
- **Last Updated**: 2023-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# taro-vue3-ts

#### 介绍

taro-vue3-ts

- 集成 vue3，使用 script setup 语法开发
- 集成 Typescript
- 代码检查和格式优化
- 全局状态管理
- 小程序分包配置

#### 软件架构

Taro3
Vue3
TypeScript
NutUi
Pinia

#### 安装教程

1.  vscode 需安装插件

```
Eslint
Prettier
Volar
```

2.  初始化项目

```
taro init myApp
傻瓜式下一步下一步
选择vue ts
```

3.  设置代码规范

- 代码规范 ESlint
- 代码格式化 Prettier
- 提交前检查 husky

```
pnpm add @vue/eslint-config-prettier @vue/eslint-config-typescript eslint-plugin-prettier vue-tsc husky -D
```

设置代码规范和格式化规则

.eslintrc.js

```
module.exports = {
  root: true,

  env: {
    node: true,
  },

  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier', '@vue/typescript'],

  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
  globals: {
    wx: 'readonly',
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        tabWidth: 2,
        singleQuote: true,
        semi: false,
        trailingComma: 'es5',
        arrowParens: 'always',
        endOfLine: 'auto',
        printWidth: 100,
      },
    ],
    'no-debugger': 'error',
    'comma-dangle': [
      'error',
      {
        arrays: 'always-multiline',
        objects: 'always-multiline',
        imports: 'always-multiline',
        exports: 'never',
        functions: 'never',
      },
    ],
    'vue/no-use-v-if-with-v-for': [
      'error',
      {
        allowUsingIterationVar: true,
      },
    ],
    '@typescript-eslint/no-explicit-any': ['error'], //禁止使用any
    eqeqeq: 2, //必须使用全等
    'max-lines': ['error', 500], //限制行数 请勿修改 请优化你的代码
    complexity: ['error', 5], // 限制复杂度
    'require-await': 'error',
    'vue/multi-word-component-names': 'off',
  },
}
//可以添加规则 禁止删除忽略规则 请严格执行

```

.prettierrc

```
{
  "tabWidth": 2,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "es5",
  "arrowParens": "always",
  "endOfLine": "auto",
  "printWidth": 100
}
```

在 package.json 中 script 添加 Ts 检查命令和 Eslint 检查命令

```
"scripts":{
  "tsc": "vue-tsc --noEmit --skipLibCheck",
  "lint": "eslint --ext .vue --ext .js --ext .ts src/"
}
```

.lintstagedrc.js

```
module.exports = {
  'src/**/*.{js,jsx,vue,ts,tsx}': ['yarn lint'],
  '*.{vue,ts}': [
    () => {
      return `vue-tsc --noEmit --skipLibCheck`
    },
  ],
}

```

添加 husky 触发 Git 钩子，代码提交前检查

```
npx husky install
```

编辑 pre-commit 执行 Eslint 检查和 Ts 检查

```
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# lint1
# echo "---格式化检查开始---"
# npm run lint
# echo "---格式化检查结束---"
# # 检查ts
echo "---ts检查开始---"
npx lint-staged
echo "---ts检查结束---"
```

新增编辑 commit-msg

```
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no -- commitlint --edit "$1"
```

commitlint.config.js

```
module.exports = { extends: ['@commitlint/config-conventional'] }

```

.cz-config.js

```
module.exports = {
  // type 类型
  types: [
    { value: 'feat', name: '✨ 新增产品功能' },
    { value: 'fix', name: '🐛 修复 bug' },
    { value: 'docs', name: '📝 文档的变更' },
    {
      value: 'style',
      name: '💄 不改变代码功能的变动(如删除空格、格式化、去掉末尾分号等)'
    },
    {
      value: 'refactor',
      name: '♻ 重构代码。不包括 bug 修复、功能新增'
    },
    {
      value: 'perf',
      name: '⚡ 性能优化'
    },
    { value: 'test', name: '✅ 添加、修改测试用例' },
    {
      value: 'build',
      name: '👷‍ 构建流程、外部依赖变更，比如升级 npm 包、修改 webpack 配置'
    },
    { value: 'ci', name: '🔧 修改了 CI 配置、脚本', emoji: '🔧' },
    {
      value: 'chore',
      name: '对构建过程或辅助工具和库的更改,不影响源文件、测试用例的其他操作'
    },
    { value: 'revert', name: '⏪ 回滚 commit' }
  ],

  // scope 类型，针对 React 项目
  // scopes: [
  //   ['components'],
  //   ['deps', '项目依赖修改']
  //   // 如果选择 custom ,后面会让你再输入一个自定义的 scope , 也可以不设置此项， 把后面的 allowCustomScopes 设置为 true
  // ].map(([value, description]) => {
  //   return {
  //     value,
  //     name: `${value.padEnd(30)} (${description})`
  //   }
  // }),

  // allowTicketNumber: false,
  // isTicketNumberRequired: false,
  // ticketNumberPrefix: 'TICKET-',
  // ticketNumberRegExp: '\\d{1,5}',

  // 可以设置 scope 的类型跟 type 的类型匹配项，例如: 'fix'
  /*
    scopeOverrides: {
      fix: [
        { name: 'merge' },
        { name: 'style' },
        { name: 'e2eTest' },
        { name: 'unitTest' }
      ]
    },
   */
  // 覆写提示的信息
  messages: {
    type: '请确保你的提交遵循了原子提交规范！\n选择你要提交的类型:',
    scope: '\n 选择一个 scope (可选):',
    // 选择 scope: custom 时会出下面的提示
    customScope: '请输入自定义的 scope:',
    subject: '填写一个简短精炼的描述语句:\n',
    body:
      '添加一个更加详细的描述，可以附上新增功能的描述或 bug 链接、截图链接 (可选)。使用 "|" 换行:\n',
    breaking: '列举非兼容性重大的变更 (可选):\n',
    footer: '列举出所有变更的 ISSUES CLOSED  (可选)。 例如.: #31, #34:\n',
    confirmCommit: '确认提交?'
  },

  // 是否允许自定义填写 scope ，设置为 true ，会自动添加两个 scope 类型 [{ name: 'empty', value: false },{ name: 'custom', value: 'custom' }]
  allowCustomScopes: false,
  allowBreakingChanges: ['feat', 'fix'],
  // skip any questions you want
  // skipQuestions: [],

  // subject 限制长度
  subjectLimit: 100
  // breaklineChar: '|', // 支持 body 和 footer
  // footerPrefix : 'ISSUES CLOSED:'
  // askForBreakingChangeFirst : true,
}
```

安装 @commitlint/cli 等

```
pnpm add @commitlint/cli @commitlint/config-conventional lint-staged
```

#### 引入 NutUI

```
pnpm add @nutui/nutui-taro
```

在 .babelrc 或 babel.config.js 中添加配置：

```
module.exports = {
  // ...
  plugins: [
    [
      'import',
      {
        libraryName: '@nutui/nutui',
        libraryDirectory: 'dist/packages/_es',
        camel2DashComponentName: false
      },
      'nutui3-vue'
    ],
    [
      'import',
      {
        libraryName: '@nutui/nutui-taro',
        libraryDirectory: 'dist/packages/_es',
        camel2DashComponentName: false
      },
      'nutui3-taro'
    ]
  ]
}
```

安装 nutui 会遇到样式的报错 如图
!()[https://camo.githubusercontent.com/49ddf1578b07341f281abe26de1d883af7fee93676b92801933fa9f530ee21c0/68747470733a2f2f747661312e73696e61696d672e636e2f6c617267652f3030386933736b4e6779316777657567327869626a6a33326179306f696538312e6a7067]

解决办法：引入 @tarojs/plugin-html 插件 https://taro-docs.jd.com/taro/docs/use-h5

按需引入，安装插件 babel-plugin-import

```
pnpm add babel-plugin-import -D
```

样式处理 因为 nutui 的设计稿是 375 的 所以将框架的设计尺寸调整为 375

项目配置文件 config/index.js 中配置:

```
  designWidth: 375,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    375: 2 / 1,
  },
```

app.ts

```
import { createApp } from 'vue'
import { Button } from '@nutui/nutui-taro'

const app = createApp()

app.use(Button)
```

index.vue 中，nut-button 组件直接在 template 中写，不用再引入

```
<template>
  <view class="index">
    <text>{{ msg }}</text>
    <nut-button type="primary">主要按钮</nut-button>
  </view>
</template>
```

安装 @tarojs/plugin-vue-devtools 方便调试

```
pnpm add @tarojs/plugin-vue-devtools
```

安装 Pinia 进行状态管理

```
pnpm add @tarojs/plugin-html taro-plugin-pinia pinia
```

> nutui 事件不触发 是因为 @tarojs/plugin-html 版本不对 我当前这个项目固定设置为 3.3.12 如果设置为最新 3.3.13 则不行

项目配置文件 config/index.js 中配置:

```
  plugins: isOpenDevTools
    ? ['@tarojs/plugin-html', '@tarojs/plugin-vue-devtools', 'taro-plugin-pinia']
    : ['@tarojs/plugin-html', 'taro-plugin-pinia'],
```

#### 小程序分包配置

> 随着业务代码和组件的引入越来越多，主包的大小一定会越来越大，超过 2m 的主包以后微信开发工具就无法使用预览的功能，为了提前做好准备在一开始就进行分包处理，主包只包含公共组件和公共代码，分包里放入业务代码和业务代码

```
//app.config.ts
export default {
  pages: ['pages/index/index'],
  window: {
    backgroundColor: '#fff',
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black',
  },
  subpackages: [
    {
      root: 'pages/featureA',
      pages: ['index/index'],
    },
  ],
}
```

#### taro3 配合 Vue DevTools 调试

> 开启 Vue DevTools 之后 预览主包体积会大于 2M 导致无法预览 视情况开启调试 正式构建不会开启 Vue DevTools 调试

默认不开启 devtools 调试 新增 script 开启

```
"devtools:weapp": "npm run build:weapp -- --watch --devtools"

```

公共样式

```
page {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto,
    'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}

// 解决iPhone x 以后的机型 底部安全区域的问题 https://jelly.jd.com/article/6006b1055b6c6a01506c87fd
.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
```

#### 细节调整

小程序配置细节
需要注意开发者工具的项目设置：

需要设置关闭 ES6 转 ES5 功能，开启可能报错
需要设置关闭上传代码时样式自动补全，开启可能报错
需要设置关闭代码压缩上传，开启可能报错
其他限制
小程序中不支持 <style scoped>，建议使用 cssModules 代替。
不能在页面组件的 DOM 树之外插入元素，因此不支持 <teleport>
Vue 3 内部实现使用了 Proxy ，在 iOS 9 及以下操作系统无法运行。但 Vue 官方团队在正式版发布后会推出兼容版本。
在 H5 端使用 ref 获取基础组件的 DOM 节点，现在只能得到适配层的 Vue 组件实例，而不是对应的 webComponent 根节点。在 Vue2 里可以通过修改父元素的 refs 属性实现，但 Vue3 中组件间初始化顺序有变化，因此暂时不能支持。
小程序端非类似 HTML 表单标签规范的表单组件，如 Picker，暂不兼容 v-model。Vue3 的 v-model 绑定属性改为了 modelValue，事件绑定改为了 update:modelValue。对于 HTML 表单标签会自动对接表单的值与事件，例如 input 会自动对应 modelValue 与 value、update:modelValue 与 @input。但对于 Picker 这种小程序特有表单则无法对应，建议这种情况不使用 v-model。
VirtualList 组件需要实现一份 Vue3 版本（待实现）
所有组件的 id 必须在整个应用中保持唯一（即使他们在不同的页面），否则可能导致事件不触发的问题

#### 使用说明

1.  xxxx
2.  xxxx
3.  xxxx

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request

#### 特技

1.  使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)