介紹

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

Taro

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

https://github.com/nervjs/taro

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

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

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

# 使用 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查看版本號(hào)，當(dāng)前是Taro v3.3.0

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

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

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

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

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

這里我們項(xiàng)目默認(rèn)使用了NutUI，像Vue3一樣開(kāi)發(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一樣的寫(xiě)法，引入組件：

渲染效果

總結(jié)

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