介紹

Vue3發(fā)布已經(jīng)有一段時間了，從目前來看，其生態(tài)還算可以，也已經(jīng)有了各種組件庫給予了支持，但是不管是Vue3還是Vue2都無法直接用來開發(fā)小程序，因此國內(nèi)一些技術(shù)團隊針對Vue開發(fā)了一些多端兼容運行的開發(fā)框架，今天來體驗一下使用Taro來體驗一下使用Vue3開發(fā)多平臺運行的小程序，以便于兼容各大小程序平臺！

Taro

Taro是一個由多個團隊一起維護的開放式跨端跨框架解決方案，支持使用 React/Vue/Nerv 等框架來開發(fā) 微信 / 京東 / 百度 / 支付寶 / 字節(jié)跳動 / QQ 小程序 / H5 / RN 等應(yīng)用

https://github.com/nervjs/taro

目前支持以下平臺的轉(zhuǎn)換

開發(fā)體驗

首先我們安裝Taro 3腳手架，以便于我們進行初始化項目

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

taro –version查看版本

如果使用yarn安裝后未出現(xiàn)版本信息，則使用 yarn global bin查看yarn包目錄，將之添加到環(huán)境變量即可，然后再使用taro –version查看版本號，當(dāng)前是Taro v3.3.0

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

自己選擇合適的選項，然后等待安裝依賴，可能需要稍等一會：

安裝完成，這時候就可以打開項目了，我們使用VSCode進行代碼編寫

這里我們使用字節(jié)跳動的小程序為例：

熟悉的CompositionAPI，這里我們使用yarn dev:tt（其余平臺類似）進行編譯，然后將dist目錄導(dǎo)入到開發(fā)者工具進行預(yù)覽測試

這里我們項目默認使用了NutUI，像Vue3一樣開發(fā)組件，僅僅測試使用

<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一樣的寫法，引入組件：

渲染效果

總結(jié)

Vue3結(jié)合Taro讓熟悉Vue3 的開發(fā)者們更加容易開發(fā)小程序，雖然還有一些問題尚待解決，但是大部分情況下，Taro已經(jīng)能勝任多端開發(fā)的任務(wù)，感興趣的小伙伴可以嘗試一下！