您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“怎么用Vue3開(kāi)發(fā)小程序”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么用Vue3開(kāi)發(fā)小程序”吧!
首先需要全局安裝 @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
必要的話,兩個(gè)都執(zhí)行一遍。
這是我的版本號(hào):
通過(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)目,如下所示:
要開(kāi)發(fā)一個(gè)項(xiàng)目,雖然說(shuō)不一定非要上 UI 庫(kù),但是有總比沒(méi)有好。純手寫樣式當(dāng)然也是考驗(yàn)一個(gè)前端工程師的技術(shù)功底,但是項(xiàng)目工期不等人,提高開(kāi)發(fā)效率才是第一位。
在我查找 Taro 是否有 Vue 相關(guān)的 UI 庫(kù)時(shí),我找到了 taro-ui-vue ,感覺(jué)很舒服,應(yīng)該很快就可以寫出一個(gè) demo 來(lái)。
后來(lái)安裝好組件包,引入組件使用的時(shí)候,編譯出錯(cuò)了,大概看了一下,是沒(méi)有兼容 Vue 3 的寫法。
于是我打算暫時(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í)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。