一套代碼，多端運行——使用Vue3開發兼容多平臺的小程序

發布時間：2023-07-03 02:10:24 作者：網友整理

介紹

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