快速上手小程序框架Taro顾患,安裝及使用教程(一)

前言:

這個(gè)小程序框架已經(jīng)出現(xiàn)了很久了番捂,而且自從微信小程序出現(xiàn)之后,流心觀察都可以發(fā)現(xiàn)江解,百度小程序设预,支付寶小程序,字節(jié)跳動(dòng)小程序犁河,QQ 小程序鳖枕,京東小程序也越來越多,也越來越有用了桨螺。所以宾符,掌握一個(gè)多端統(tǒng)一開發(fā)解決方案是一個(gè)很重要的事情。

介紹:

官網(wǎng)文檔:http://taro-docs.jd.com/taro/docs/GETTING-STARTED
GitHub地址:https://github.com/nervjs/taro
Star:27.6k

Taro 是由京東 - 凹凸實(shí)驗(yàn)室打造的一套開放式跨端跨框架解決方案灭翔。支持使用 React/Vue/Nerv 等框架來開發(fā)微信/京東/百度/支付寶/字節(jié)跳動(dòng)/ QQ 小程序/H5 等應(yīng)用魏烫。


步驟

Taro 項(xiàng)目基于 node,請(qǐng)確保已具備較新的 node 環(huán)境(>=12.0.0)
檢查node 版本

1:安裝node

端開發(fā)框架和環(huán)境都是需要 Node.js 肝箱,先安裝node.js開發(fā)環(huán)境哄褒,vue的運(yùn)行是要依賴于node的npm的管理工具來實(shí)現(xiàn),下載https://nodejs.org/en/煌张,安裝完成之后读处,打開cmd開始輸入命令。(我用的是win10系統(tǒng)唱矛,所以需要管理員權(quán)限罚舱,右鍵點(diǎn)擊以管理員身份運(yùn)行cmd)井辜,不然會(huì)出現(xiàn)很多報(bào)錯(cuò)。

image

2:查看node的版本號(hào)

下載好node之后管闷,以管理員身份打開cmd管理工具粥脚,,輸入 node -v 包个,回車刷允,查看node版本號(hào),出現(xiàn)版本號(hào)則說明安裝成功碧囊。

輸入命令: node -v

3:安裝

CLI 工具安裝树灶,打開cmd,右鍵以管理員身份運(yùn)行

cnpm install -g @tarojs/cli

4:項(xiàng)目初始化

使用命令創(chuàng)建模板項(xiàng)目
先進(jìn)入d盤糯而,然后執(zhí)行創(chuàng)建命令

taro init myApp

然后一路回車鍵(如果你不想使用TypeScript的話天通,可以在是否需要使用 TypeScript的這一行里面選擇No)


在創(chuàng)建完項(xiàng)目之后,Taro 會(huì)默認(rèn)開始安裝項(xiàng)目所需要的依賴熄驼,安裝使用的工具按照 yarn>cnpm>npm 順序進(jìn)行檢測(cè)像寒,一般來說,依賴安裝會(huì)比較順利瓜贾,但某些情況下可能會(huì)安裝失敗诺祸,這時(shí)候你可以在項(xiàng)目目錄下自己使用安裝命令進(jìn)行安裝

打開D盤查看一下吧,可以看見新建的項(xiàng)目目錄和自動(dòng)安裝的依賴祭芦,我這里是成功的喲筷笨。


如果依賴沒有自動(dòng)安裝成功,那就手動(dòng)輸入一下,我一般習(xí)慣使用這個(gè)命令cnpm install

5:運(yùn)行

接下來的操作就是運(yùn)行一下啦,Taro 需要運(yùn)行不同的命令龟劲,將 Taro 代碼編譯成不同端的代碼奥秆,然后在對(duì)應(yīng)的開發(fā)工具中查看效果。

我這里是編譯成微信小程序微信小程序編譯預(yù)覽及打包咸灿,要使用的命令,是這個(gè)樣子的:

$ npm run dev:weapp
$ npm run build:weapp

首先cd進(jìn)入了我的項(xiàng)目里面侮叮,然后運(yùn)行


這里就成功的看到了


如果你要編譯成避矢, 百度小程序,支付寶小程序囊榜,字節(jié)跳動(dòng)小程序审胸,QQ 小程序,京東小程序卸勺,可以直接去官方給的文檔上查看一下命令喲

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末砂沛,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子曙求,更是在濱河造成了極大的恐慌碍庵,老刑警劉巖映企,帶你破解...
    沈念sama閱讀 212,599評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異静浴,居然都是意外死亡堰氓,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,629評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門苹享,熙熙樓的掌柜王于貴愁眉苦臉地迎上來双絮,“玉大人,你說我怎么就攤上這事得问《谂剩” “怎么了?”我有些...
    開封第一講書人閱讀 158,084評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵宫纬,是天一觀的道長(zhǎng)焚挠。 經(jīng)常有香客問我,道長(zhǎng)哪怔,這世上最難降的妖魔是什么宣蔚? 我笑而不...
    開封第一講書人閱讀 56,708評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮认境,結(jié)果婚禮上胚委,老公的妹妹穿的比我還像新娘。我一直安慰自己叉信,他們只是感情好亩冬,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,813評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著硼身,像睡著了一般硅急。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上佳遂,一...
    開封第一講書人閱讀 50,021評(píng)論 1 291
  • 那天营袜,我揣著相機(jī)與錄音,去河邊找鬼丑罪。 笑死荚板,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的吩屹。 我是一名探鬼主播跪另,決...
    沈念sama閱讀 39,120評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼煤搜!你這毒婦竟也來了免绿?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,866評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤擦盾,失蹤者是張志新(化名)和其女友劉穎嘲驾,沒想到半個(gè)月后淌哟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,308評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡距淫,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,633評(píng)論 2 327
  • 正文 我和宋清朗相戀三年绞绒,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片榕暇。...
    茶點(diǎn)故事閱讀 38,768評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蓬衡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出彤枢,到底是詐尸還是另有隱情狰晚,我是刑警寧澤,帶...
    沈念sama閱讀 34,461評(píng)論 4 333
  • 正文 年R本政府宣布缴啡,位于F島的核電站壁晒,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏业栅。R本人自食惡果不足惜秒咐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,094評(píng)論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望碘裕。 院中可真熱鬧携取,春花似錦、人聲如沸帮孔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,850評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽文兢。三九已至晤斩,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間姆坚,已是汗流浹背澳泵。 一陣腳步聲響...
    開封第一講書人閱讀 32,082評(píng)論 1 267
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留兼呵,地道東北人兔辅。 一個(gè)月前我還...
    沈念sama閱讀 46,571評(píng)論 2 362
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像萍程,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子兔仰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,666評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容