taro + vue3 开发微信小程序的模板.zip

# 使用 Taro3 + Vue3 开发微信小程序 ## 前言 微信小程序是以微信为运行环境的一种应用，其实质是 `Hybrid` 技术的应用，Hybrid App 即混合模式移动应用，因此与 `H5` 类似，但又比 H5 拥有很多原生的能力，例如调用位置信息和摄像头等。 小程序的开发方式与 H5 十分相似，用的也是  `JavaScript`、`HTML`、`CSS`  语言。 因此，小程序开发可以说是一名前端工程师必须要掌握的技能。 原生小程序开发有一定的学习成本，现如今市面上有很多开发小程序的第三方多端框架，如果不是追求极致性能和稳定，还是不要用原生小程序开发了，开发效率太低。 第三方多端框架中，`taro` 和 `uni-app` 的使用度是最广的，一般来说，做技术选型时，团队用 `react`，就用 taro，团队用 `vue`，就用 uni-app，两者之间没有什么优劣之分，都挺好用的。 但很多开发者可能不知道，taro3.0 以上版本是支持使用 vue 的，本篇文章就来介绍一下如何使用 Taro3 + Vue3 开发微信小程序。 我根据网上的资料完成了本项目的搭建之后，用本项目开发过一个小程序，那种开发体验真的是超越了我以往开发过的所有项目，非常丝滑（可能是我第一次写 vue3 的 script setup 吧，用起来确实很舒服）。 可直接访问本项目 github 地址 clone 使用。 ## 目标功能 - 集成 vue3，使用 `script setup` 语法开发 - 集成 `Typescript` - 代码检查和格式优化 - 全局状态管理 - 小程序分包配置 - 样式封装，兼容刘海儿屏等样式问题 - http 方法封装 ## 主要技术栈 - Taro3 - Vue3 - TypeScript - NutUi - Pinia vue3 刚发布时，由于没有合适的 ui 框架支持，我学习 vue3 的热情直接被劝退了。直到现在，类似于[ quasar](http://www.quasarchs.com/introduction-to-quasar[/)、[element-plus](https://element-plus.gitee.io/zh-CN/component/button.html)、[ant-design-vue](https://next.antdv.com/docs/vue/migration-v3-cn) 等优秀框架陆续支持 vue3，并且许多 vue3 项目被用到了生产环境中，才发现大家是把 vue3 真的用起来了。 比如我们公司隔壁项目组，重构项目就用了 vue3，这时我才发现自己学习 vue3 有点晚了（tips:前端真的太卷了 😭） [NutUI](https://nutui.jd.com/#/intro) 是京东风格的移动端组件库，它支持使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。 我是从 [Taro 文档](http://taro-docs.jd.com/taro/docs/vue3) 知道 NutUI 的，taro 官方推荐使用 NutUI 开发，他们似乎也都是来自京东同一个开发团队，我抱着试一试的心态上手使用，配置简单，使用体验还不错。 [Pinia](https://pinia.vuejs.org/introduction.html) 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案，支持 Vue2 和 Vue3。 我第一次接触前端状态管理工具，是刚实习时公司的一个后台管理系统，用的 dva，那可叫一个折磨啊，差点直接把我劝退。后面慢慢熟悉了一些，但是不管用 redux，还是 vuex，还是觉得写着麻烦。 这次尝试使用 Pinia，用起来确实很舒服，符合直觉，易于学习 ，有点类似于 [recoil](https://recoiljs.org/zh-hans/docs/introduction/getting-started)，但没有 recoil 那么多的概念和 API，主体非常精简，极易上手。[Pinia 快速入门](https://juejin.cn/post/6986847203885056036) ## vscode 需安装插件 - Eslint - Prettier - Volar 与`vetur`相同，`volar`是一个针对 vue 的 vscode 插件，不过与 vetur 不同的是，volar 提供了更为强大的功能。 [Volar 介绍](https://juejin.cn/post/6966106927990308872) ## 搭建项目架构 ### 初始化项目 初始化项目之前，需安装 taro，请参考 [Taro 文档](https://taro-docs.jd.com/taro/docs/GETTING-STARTED)，完成 taro 安装 使用命令创建模板项目： ```shell taro init myApp ```  安装 cli 用来执行构建等操作，之后启动项目，会生成一个 dist 目录 ```shell yarn add @tarojs/cli yarn dev:weapp ``` > 打开微信开发工具 工程目录需要指向构建出来的 dist 文件   Hello world 出现，项目成功跑起来了！ ### 设置代码规范 - 代码规范 ESlint - 代码格式化 Prettier - 提交前检查 husky 个人认为，eslint + prettier 足以应付大部分前端代码规范问题了，且配置起来很简单，有特殊需求也可继续配置。 安装依赖 ```shell yarn 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, 'vue/setup-compiler-macros': true }, extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier', '@vue/typescript'], parserOptions: { parser: '@typescript-eslint/parser' }, rules: { 'prettier/prettier': [ 'error', { singleQuote: true, semi: false, trailingComma: 'none', arrowParens: 'avoid', printWidth: 100 } ], 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' } } ``` .prettierrc ``` { "tabWidth": 2, "singleQuote": true, "semi": false, "trailingComma": "none", "arrowParens": "avoid", "endOfLine": "auto", "printWidth": 100 } ``` 在 package.json 中 script 添加 Ts 检查命令和 Eslint 检查命令 ```json "scripts":{ "tsc": "vue-tsc --noEmit --skipLibCheck", "lint": "eslint --ext .vue --ext .js --ext .ts src/" } ``` 添加 [husky](https://github.com/typicode/husky) 触发 Git 钩子，代码提交前检查 ``` npx husky install ``` 编辑 pre-commit 执行 Eslint 检查和 Ts 检查 ``` #!/bin/sh . "$(dirname "$0")/_/husky.sh" echo "---eslint start---" npm run lint echo "---eslint end---" echo "---ts lint start---" npm run tsc echo "---ts lint end---" ``` 至此，项目的代码规范和格式规范配置完毕，多人协作也不是问题了。 ### 引入 NutUI ```shell yarn add @nutui/nutui-taro ``` 按需引入，安装插件 babel-plugin-import ```shell yarn add babel-plugin-import -D ``` 样式处理 因为 nutui 的设计稿是 375 的 所以将框架的设计尺寸调整为 375 项目配置文件 config/index.js 中配置: ```js designWidth: 375 ``` 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> ```  ### 小程序分包配置 小程序主包超过 2M，就无法真机预览了，为了提前做好准备在一开始就进行分包处理。比如下面这个小程序的配置，分了四个包。 app.config.ts ``` pages: ['pages/create/index', 'pages/find/index', 'pages/my/index'], subpackages: [ { root: 'pages/featureA', pages: ['index/index'] }, { root: 'pagesSub/search', pages: ['index'] }, { root: 'pagesSub/my', pages: ['detail/index', 'about/index'] }, { root: 'pagesSu