本篇內(nèi)容主要講解“怎么用Vue3開發(fā)小程序”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用Vue3開發(fā)小程序”吧!

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網(wǎng)站建設、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的金塔網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

首先需要全局安裝 @tarojs/cli ：

# 使用 npm 安裝 CLI $ npm install -g @tarojs/cli # OR 使用 yarn 安裝 CLI $ yarn global add @tarojs/cli # OR 安裝了 cnpm，使用 cnpm 安裝 CLI $ cnpm install -g @tarojs/cli

如果你的本地已經(jīng)安裝了 @tarojs/cli ，并且版本是 3.x，那么可以忽略上述操作。但是如過你的版本是 2.x，你需要先將它卸載了，再進行上述安裝，卸載如下：

$ npm uninstall -g @tarojs/cli # 或者 $ yarn global remove @tarojs/cli

必要的話，兩個都執(zhí)行一遍。

這是我的版本號：

初始化項目

通過如下命令行初始化項目：

taro init taro-vue3

選項如下，這里要注意 CSS 預處理去選擇 Sass，后面 UI 框架會用到：

稍等一會兒，項目便可初始化完畢。

結束之后進入項目，運行指令：

npm run dev:weapp

編譯成功之后，通過微信開發(fā)者工具打開 dist 目錄，瀏覽項目，如下所示：

UI 庫添加

要開發(fā)一個項目，雖然說不一定非要上 UI 庫，但是有總比沒有好。純手寫樣式當然也是考驗一個前端工程師的技術功底，但是項目工期不等人，提高開發(fā)效率才是第一位。

在我查找 Taro 是否有 Vue 相關的 UI 庫時，我找到了 taro-ui-vue ，感覺很舒服，應該很快就可以寫出一個 demo 來。

后來安裝好組件包，引入組件使用的時候，編譯出錯了，大概看了一下，是沒有兼容 Vue 3 的寫法。

于是我打算暫時放棄了，然后到 taro-ui-vue 的倉庫里提了一個 Issue，如下所示：

我再一次沸騰了，居然還有這玩意兒 taro-ui-vue3 ，此時此刻我突然就很想和東哥做兄弟，哈哈哈哈。

繼續(xù)整！我們可以在項目里通過 npm install taro-ui-vue3 添加組件包，根據(jù)官網(wǎng)的提示，我這里采用了樣式全局引入的方式：

// app.js import { createApp } from 'vue' import store from './store'  import 'taro-ui-vue3/dist/style/index.scss'  const App = createApp({   onShow (options) {},   // 入口組件不需要實現(xiàn) render 方法，即使實現(xiàn)了也會被 taro 所覆蓋 })  App.use(store)  export default App

頁面中直接通過引入組件使用：

如下圖所示：

到此，相信大家對“怎么用Vue3開發(fā)小程序”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！