介绍

Vue3发布已经有一段时间了，从目前来看，其生态还算可以，也已经有了各种组件库给予了支持，但是不管是Vue3还是Vue2都无法直接用来开发小程序，因此国内一些技术团队针对Vue开发了一些多端兼容运行的开发框架，今天来体验一下使用Taro来体验一下使用Vue3开发多平台运行的小程序，以便于兼容各大小程序平台！

Taro

Taro是一个由多个团队一起维护的开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 / RN 等应用

https://github.com/nervjs/taro

目前支持以下平台的转换

开发体验

首先我们安装Taro 3脚手架，以便于我们进行初始化项目

# 使用 npm（或cnpm） 安装 CLI
npm install -g @tarojs/cli
#或者使用 yarn 安装 CLI
yarn global add @tarojs/cli

taro --version查看版本

如果使用yarn安装后未出现版本信息，则使用 yarn global bin查看yarn包目录，将之添加到环境变量即可，然后再使用taro --version查看版本号，当前是Taro v3.3.0

然后使用taro cli初始化一个vue3版本的项目：taro init

自己选择合适的选项，然后等待安装依赖，可能需要稍等一会：

安装完成，这时候就可以打开项目了，我们使用VSCode进行代码编写

这里我们使用字节跳动的小程序为例：

熟悉的CompositionAPI，这里我们使用yarn dev:tt（其余平台类似）进行编译，然后将dist目录导入到开发者工具进行预览测试

这里我们项目默认使用了NutUI，像Vue3一样开发组件，仅仅测试使用

<template>
  <nut-button type="primary">主要按钮</nut-button>
  <nut-button type="info">信息按钮</nut-button>
  <nut-button type="default">默认按钮</nut-button>
  <nut-button type="danger">危险按钮</nut-button>
  <nut-button type="warning">警告按钮</nut-button>
  <nut-button type="success">成功按钮</nut-button>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { Button } from "@nutui/nutui-taro";

export default defineComponent({
  name: "Button",
  components: { Button },
  setup() {
    return {};
  },
});
</script>

<style lang="sass"></style>

和Vue3一样的写法，引入组件：

渲染效果

总结

Vue3结合Taro让熟悉Vue3 的开发者们更加容易开发小程序，虽然还有一些问题尚待解决，但是大部分情况下，Taro已经能胜任多端开发的任务，感兴趣的小伙伴可以尝试一下！