介紹

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

Taro

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

https://github.com/nervjs/taro

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

開發(fā)體驗(yàn)

首先我們安裝Taro 3腳手架，以便于我們進(jìn)行初始化項(xiàng)目

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

taro --version查看版本

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

然后使用taro cli初始化一個(gè)vue3版本的項(xiàng)目：taro init

自己選擇合適的選項(xiàng)，然后等待安裝依賴，可能需要稍等一會(huì)：

安裝完成，這時(shí)候就可以打開項(xiàng)目了，我們使用VSCode進(jìn)行代碼編寫

這里我們使用字節(jié)跳動(dòng)的小程序?yàn)槔?/p>

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

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

<template>
  <nut-button type="primary">主要按鈕</nut-button>
  <nut-button type="info">信息按鈕</nut-button>
  <nut-button type="default">默認(rèn)按鈕</nut-button>
  <nut-button type="danger">危險(xiǎn)按鈕</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ù)，感興趣的小伙伴可以嘗試一下！