怎么用Vue3開(kāi)發(fā)小程序

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

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

首先需要全局安裝 @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，那么可以忽略上述操作。但是如過(guò)你的版本是 2.x，你需要先將它卸載了，再進(jìn)行上述安裝，卸載如下：

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

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

這是我的版本號(hào)：

初始化項(xiàng)目

通過(guò)如下命令行初始化項(xiàng)目：

taro init taro-vue3

選項(xiàng)如下，這里要注意 CSS 預(yù)處理去選擇 Sass，后面 UI 框架會(huì)用到：

稍等一會(huì)兒，項(xiàng)目便可初始化完畢。

結(jié)束之后進(jìn)入項(xiàng)目，運(yùn)行指令：

npm run dev:weapp

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

UI 庫(kù)添加

要開(kāi)發(fā)一個(gè)項(xiàng)目，雖然說(shuō)不一定非要上 UI 庫(kù)，但是有總比沒(méi)有好。純手寫(xiě)樣式當(dāng)然也是考驗(yàn)一個(gè)前端工程師的技術(shù)功底，但是項(xiàng)目工期不等人，提高開(kāi)發(fā)效率才是第一位。

在我查找 Taro 是否有 Vue 相關(guān)的 UI 庫(kù)時(shí)，我找到了 taro-ui-vue ，感覺(jué)很舒服，應(yīng)該很快就可以寫(xiě)出一個(gè) demo 來(lái)。

后來(lái)安裝好組件包，引入組件使用的時(shí)候，編譯出錯(cuò)了，大概看了一下，是沒(méi)有兼容 Vue 3 的寫(xiě)法。

于是我打算暫時(shí)放棄了，然后到 taro-ui-vue 的倉(cāng)庫(kù)里提了一個(gè) Issue，如下所示：

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

繼續(xù)整！我們可以在項(xiàng)目里通過(guò) 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) {},   // 入口組件不需要實(shí)現(xiàn) render 方法，即使實(shí)現(xiàn)了也會(huì)被 taro 所覆蓋 })  App.use(store)  export default App

頁(yè)面中直接通過(guò)引入組件使用：

<template>   <view class="index">     <NumberDisplay/>     <NumberSubmit/>     <AtButton class="add-btn" type='primary'>測(cè)試</AtButton>   </view> </template>  <script> import NumberDisplay from '../../components/NumberDisplay.vue' import NumberSubmit from '../../components/NumberSubmit.vue' import { AtButton } from 'taro-ui-vue3' export default {   name: 'Index',   components: {     NumberDisplay,     NumberSubmit,     AtButton   } } </script>  <style> .index {   font-family: "Avenir", Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 60px; } </style>

如下圖所示：

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

本文標(biāo)題：怎么用Vue3開(kāi)發(fā)小程序
URL鏈接：http://bm7419.com/article16/gihcgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷(xiāo)、Google、搜索引擎優(yōu)化、全網(wǎng)營(yíng)銷(xiāo)推廣、企業(yè)建站、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)