如何使用Taro + Vue3开发小程序（练习）

如何使用taro3 + vue3开发小程序？下一篇将介绍如何使用taro3 + vue3开发微信小程序。 希望对您有所帮助！

微信小程序是一款以微信为运行环境的应用程序。 其本质是混合动力技术的应用。 混合应用程序是混合模式的移动应用程序，因此它们与 H5 类似，但它们也比 H5 拥有更多原生功能，例如位置和摄像头通话。

小程序的开发方式和H5非常类似，都是使用JavaScript、HTML、CSS语言。

因此，小规模程序开发是前端工程师应该掌握的技能。

开发原生小程序需要一定的学习成本。 目前市面上有很多用于开发小程序的第三方多端框架。 除非你追求极致的性能和稳定性，否则最好不要开发原生小程序。 开发效率太低。

第三方多终端框架中，使用最广泛的是taro和uni-app。 一般来说，在选择技术时，团队使用React，然后是taro，然后团队使用Vue。 只需使用 uni- 应用程序即可。 两者没有区别，而且都非常容易使用。

但是很多开发者可能不知道taro3.0以上版本支持使用vue。 本文将向您展示如何使用Taro3 + Vue3开发微信小程序。

我根据网上的资料搭建完这个项目后，就利用这个项目开发了一个小程序。 开发体验确实超越了我以往开发过的所有项目，非常顺利（这可能是我第一次写Vue3脚本配置，但是非常好用）。

您可以直接访问并克隆该项目的github地址。

目标功能集成vue3、脚本设置语法开发集成Typescript代码检查及格式优化全局状态管理小程序外包配置风格封装、兼容刘海屏等风格问题http方法封装主要技术StackTaro3Vue3TypeScriptNutUiPinia

我学习vue3的热情就因为刚发布时缺乏适当的ui框架支持而被直接浇灭了。 迄今为止，许多优秀的框架（例如 quasar、element-plus 和 ant-design-vue）都支持 Vue3，并且许多 Vue3 项目正在生产中。 这时我才发现原来大家都在用vue3。 。

例如，我们旁边的一个项目团队使用 vue3 进行重建项目。 这时我才发现自己学习vue3有点落后了（提示：前端其实太复杂了）。

NutUI是一个京东风格的移动组件库。 支持使用Vue语言创建可在H5和小程序平台上使用的应用程序，帮助开发者提高开发效率和体验。

我从Taro文档中了解了NutUI。 Taro官方推荐使用NutUI进行开发。 他们似乎都是京东同一个开发团队的成员。 我开始使用它的目的是尝试一下，但感觉还不错。 。

Pinia 是 Vue 的状态管理库。 与 Vuex 一样，它是 Vue 的另一个状态管理解决方案，支持 Vue2 和 Vue3。

我第一次接触前端状态管理工具是在公司后端管理系统实习期间。 我用的是dva 这是一种折磨，几乎让我放弃了。 已经习惯了，但是无论用redux还是vuex写起来都很痛苦。

这次我尝试使用pinia。 它非常易于使用、直观且易于学习。 这与 Recoil 类似，但它没有 Recoil 那么多的概念或 API。 主体结构非常合理，很容易上手。 Pinia快速启动VScode需要安装插件EslintPrettierVolar

与vetur类似，volar是vue的vscode插件，但与vetur不同的是，volar提供了更强大的功能。能。

Volar 概述

初始化项目架构构建项目

在初始化项目之前，您必须安装 taro。 要完成taro的安装，请参考taro文档。

使用命令创建模板项目：

taro init myApp

执行如下操作：I will。 当您以构建方式启动项目时，会生成一个 dist。 目录

yarn add @tarojs/cliyarn dev:weapp 应该打开微信开发工具项目目录并指向构建的dist。 file

显示Hello world，工程成功。 开始跑步吧！

配置代码规范 代码规范 ESlint 格式化代码 Prettier Husky 在提交前检查

个人认为 eslint + prettier 足以处理大多数前端代码规范问题。 配置也非常容易。 如果您有特殊需要，您仍然可以配置它。 。

安装依赖

yarn add @vue/eslint-config-prettier @vue/eslint-config-typescript eslint-p lugin- prettier vue -tsc husky -D

配置代码规范和格式 规则

.eslintrc.js

module.exports = { root: true, env: { node: true, 'vue/setup-compiler-macros': true }, extends : ['插件:vue/vue3-e ssential', 'eslint:推荐', '@vue/prettier', '@vue/typescript'], parserOptions: { 解析器: '@typescript-eslint/parser' }, 规则: { 'prettier/prettier': [ 'error', {singleQuote: true, semi: false, TrailingComma: 'none', 'arrowParens: 'avoid', 'printWidth: 100 '} ], 'no-console': process.env.NODE_ENV === '生产'？ '警告' : '关闭', 'no-debugger': process.env.NODE_ENV === '生产' ? '警告' : '关闭' }}

.prettierrc

{ "tabWidth" : 2. "singleQuote": true, "semi": false, "trailingComma": "none", "arrowParens": "avoid", "endOfLine": "auto", "printWidth": 100}

将 In Ts 检查和 Eslint 检查命令添加到脚本 package.json

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

添加 husky 触发 Git hook ，预提交代码

npx husky install

pre-commit运行Eslint检查和Ts检查 编辑。

#!/bin/sh. "$(dirname "$0")/_/husky.sh"echo "---eslint start---" npm run lintecho "--[k3 ] ]eslint end-- -"echo "---ts lint start---"npm run tscecho "---ts lint end---"

至此，代码规范和格式为你的项目规格已经定下来，多人协作不再是问题。

入门将配置添加到 NutUIyarn add @nutui/nutui-taro

.babelrc 或 babel.config.js:

module.exports = { // ... plugins: [ [ '导入', { 库名称: '@nutui/nutui', 库目录: 'dist/packages/_es', Camel2DashComponentName: false }, 'nutui3-vue' ], [ '导入', { 库名称: '@nutui/nutui-taro', 库目录 : 'dist/packages/_es', ' Camel2DashComponentName: false ' }, 'nutui3-taro ' ] ]}

根据需要引入并安装插件 babel-plugin-import

yarn add babel-plugin-import -D

样式处理nutui设计方案为375，所以将框架设计尺寸调整为375

项目配置文件 config/ Index.js 中配置：

designWidth：375

app.ts

从'vue'导入{createApp}从导入{Button} '@nutui/nutui-taro'const app = createApp()app .use(Button)

在index.vue中，nut-button组件是直接在模板中用中文写的，引入的你不用'不需要再做一次

{{ msg }} 主按钮

说实话，设置起来还是很痛苦，不过根据官网的文档，没有什么坑，所以也还好。

小程序的子包配置

如果小程序的主包超过2M，实际上预览是在机器上完成的，最初是分包进行初步准备。 例如下面的小程序配置被拆分为四个包：

app.config.ts

页面：['pages/create/index', 'pages/find/index', 'pages/my/index'], 子包: [{ root : 'pages/featureA', 页面: ['index/index']},{ root: 'pagesSub/search', 页面: ['index']},{ root: 'pagesSub/my', 页面: ['详细信息/指数'， '摘要/索引']},{ Root: '页面子/书籍', 页面: ['详细信息/索引', '人员/列表/索引', '人员/详细信息/索引']}],

Mini您可以在程序开发工具编辑器中通过代码依赖分析查看主包和子包的大小。

使用脚本设置。 迷你语法封装 程序页面生命周期方法

hooks/life.ts

import { getCurrentInstance } from '@tarojs/taro'import { onMounted } from 'vue'const Current = getCurrentInstance()export f function useDidShow(callback ) { onMounted(callback) 当前?.page?.onShow && (Current.page.onShow = 回调)} 导出函数 usePullDownRefresh(callback) {Current?.page?.onPullDownRefresh && (Current.page.onPullDownRefresh = 回调)}

使用

import { useDidShow } from '@/hooks/life'useDidShow(() => { // console.log ('onShow')}) 安装Pinia 执行状态管理yarn add piniayarn add taro-plugin-pinia

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

plugins: ['taro-plugin-pinia']

用户信息及用户登录以用户登录状态为例实现该功能

需要处理的文件代码如下：

stores/auth.ts

从 'pinia' 界面导入 {defineStore} UserInfoProp {nickName:string avatarUrl:string}const useAuth =defineStore({ id: 'au thInfo', state: ( ) => ({ userInfo: { nickName: '', avatarUrl: '' }, isLogin: false }), actions: {login() { this.isLogin = true }, logout() { this.isLogin = false }, setUserInfo(userInfo: UserInfoProp) { this.userInfo = userInfo } }})export { useAuth }

stores/index.ts

import { createPinia } from 'pinia'import { useAuth } from './auth'export const store = createPinia()const storeObj = { auth: useAuth}// 它封装在 useStore 的形式中，所以当你查看引用时它是存储数据 我知道这是一个导出函数 useStore(key: string) { return storeObj[key]()}

Personal Center Index.vue

用户信息 组件