微信小程序搭建(mpvue+mpvue-weui+fly.js)的詳細(xì)步驟
本文介紹了微信小程序搭建(mpvue+mpvue-weui+fly.js)的詳細(xì)步驟，分享給大家，具體如下：
- 微信小程序框架：mpvue
- ui框架：mpvue-weui
- request請(qǐng)求：fly.js
1.項(xiàng)目初始化
注：如果沒有安裝node環(huán)境的請(qǐng)先去網(wǎng)上下載node.js下來(lái)安裝，安裝后默認(rèn)安裝npm了
接下到你要建項(xiàng)目的目錄下打開cmd窗口（快捷方法：打開到目錄后按住鍵盤shift，然后點(diǎn)擊鼠標(biāo)右鍵選擇在此處打開powershell窗口即可）
npm默認(rèn)從外網(wǎng)下載包，可能會(huì)比較慢，可以換成國(guó)內(nèi)的下載地址，如下
npm set registry https://registry.npm.taobao.org/
這樣就換成國(guó)內(nèi)的淘寶鏡像下載了
npm install -g vue-cli
全局安裝vue-cli，vue的官方腳手架
npm install -g webpack
安裝webpack打包管理
npm install -g vue
全局安裝vue框架
安裝完上面的必須組價(jià)后，我們就進(jìn)去正題了，初始化mpvue框架
vue init mpvue/mpvue-quickstart my-project
進(jìn)入項(xiàng)目文件夾，并安裝依賴包
項(xiàng)目跑起來(lái)
運(yùn)行的原理
2.項(xiàng)目運(yùn)行
引入項(xiàng)目，到微信小程序官網(wǎng)下載此開發(fā)工具
項(xiàng)目跑起來(lái)
3.引入mpvue-weui
接下來(lái)就引入mpvue-weui了
只要引入weui.css文件即可，其他都不用
mpvue-weui的網(wǎng)站 https://kuangpf.com/mpvue-weui/#/
接下來(lái)新建一頁(yè)測(cè)試頁(yè)面來(lái)試用weui
需要注意的標(biāo)點(diǎn)符號(hào)，否則會(huì)報(bào)錯(cuò)
新增了一頁(yè)要重新npm run dev，否則會(huì)找不到頁(yè)面（終止的命令：ctrl+c）
重新運(yùn)行后
進(jìn)入到test頁(yè)面，證明跳轉(zhuǎn)是沒問(wèn)題的
引用一下weui的grid作為示例
結(jié)果
此功能界面的代碼都是從上面網(wǎng)站上復(fù)制過(guò)來(lái)的，也可以從git上把mpvue-weui的項(xiàng)目clone下來(lái)，里面有更多詳細(xì)的代碼，可以直接復(fù)制下來(lái)用
4.引入fly請(qǐng)求
接下來(lái)request部分，fly.js也是上面推薦的，使用方法如下
使用npm安裝fly.js
npm install flyio
使用方法
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
分享一個(gè)自定義的console類 讓你不再糾結(jié)JS中的調(diào)試代碼的兼容
在寫JS的過(guò)程中，為了調(diào)試我們常常會(huì)寫很多 console.log、console.info、console.group、console.warn、console.error代碼來(lái)查看JS的運(yùn)行情況，但發(fā)布時(shí)又因?yàn)镮E不支持console，又要去掉這些代碼，一不小心就會(huì)出錯(cuò)2012-04-04
Vue+ElementUI實(shí)現(xiàn)文件照片音頻視頻預(yù)覽功能
這篇文章主要介紹了JavaScript代碼實(shí)現(xiàn)微博批量取消關(guān)注功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
js鼠標(biāo)滑過(guò)圖片震動(dòng)特效的方法
這篇文章主要介紹了js鼠標(biāo)滑過(guò)圖片震動(dòng)特效的方法,涉及onMouseOver事件及圖片操作的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
引用類型是一種數(shù)據(jù)結(jié)構(gòu)，用于將數(shù)據(jù)和功能組織在一起。這篇文章主要介紹了JavaScript入門教程之引用類型的相關(guān)資料，需要的朋友一起學(xué)習(xí)吧2016-05-05
這篇文章主要介紹了JS常用加密編碼與算法,結(jié)合實(shí)例形式總結(jié)分析了javascript常見的utf8、base64編碼及md5、md4、SHA1等算法實(shí)現(xiàn)方法,需要的朋友可以參考下2016-12-12
JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(二)：隊(duì)列
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(二)：隊(duì)列,隊(duì)列是只允許在一端進(jìn)行插入操作,另一個(gè)進(jìn)行刪除操作的線性表,隊(duì)列是一種先進(jìn)先出（First-In-First-Out，F(xiàn)IFO）的數(shù)據(jù)結(jié)構(gòu),需要的朋友可以參考下2015-06-06
這篇文章主要給大家介紹了關(guān)于js面試題之異步問(wèn)題的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
基于JavaScript Array數(shù)組方法(新手必看篇)
下面小編就為大家?guī)?lái)一篇基于JavaScript Array數(shù)組方法(新手必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
javascript 使用正則test( )第一次是 true,第二次是false
這篇文章主要介紹了使用正則test( )第一次是 true,第二次是false的相關(guān)資料,需要的朋友可以參考下2017-02-02
Javascript使用uploadify來(lái)實(shí)現(xiàn)多文件上傳
本篇文章主要介紹了Javascript使用uploadify來(lái)實(shí)現(xiàn)多文件上傳，具有一定的參考價(jià)值，有需要的可以了解一下。2016-11-11