微信小程序搭建(mpvue+mpvue-weui+fly.js)的詳細(xì)步驟
本文介紹了微信小程序搭建(mpvue+mpvue-weui+fly.js)的詳細(xì)步驟，分享給大家，具體如下：
- 微信小程序框架：mpvue
- ui框架：mpvue-weui
- request請求：fly.js
1.項(xiàng)目初始化
注：如果沒有安裝node環(huán)境的請先去網(wǎng)上下載node.js下來安裝，安裝后默認(rèn)安裝npm了
接下到你要建項(xiàng)目的目錄下打開cmd窗口（快捷方法：打開到目錄后按住鍵盤shift，然后點(diǎn)擊鼠標(biāo)右鍵選擇在此處打開powershell窗口即可）
npm默認(rèn)從外網(wǎng)下載包，可能會比較慢，可以換成國內(nèi)的下載地址，如下
npm set registry https://registry.npm.taobao.org/
這樣就換成國內(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)目跑起來
運(yùn)行的原理
2.項(xiàng)目運(yùn)行
引入項(xiàng)目，到微信小程序官網(wǎng)下載此開發(fā)工具
項(xiàng)目跑起來
3.引入mpvue-weui
接下來就引入mpvue-weui了
只要引入weui.css文件即可，其他都不用
mpvue-weui的網(wǎng)站 https://kuangpf.com/mpvue-weui/#/
接下來新建一頁測試頁面來試用weui
需要注意的標(biāo)點(diǎn)符號，否則會報(bào)錯(cuò)
新增了一頁要重新npm run dev，否則會找不到頁面（終止的命令：ctrl+c）
重新運(yùn)行后
進(jìn)入到test頁面，證明跳轉(zhuǎn)是沒問題的
引用一下weui的grid作為示例
結(jié)果
此功能界面的代碼都是從上面網(wǎng)站上復(fù)制過來的，也可以從git上把mpvue-weui的項(xiàng)目clone下來，里面有更多詳細(xì)的代碼，可以直接復(fù)制下來用
4.引入fly請求
接下來request部分，fly.js也是上面推薦的，使用方法如下
使用npm安裝fly.js
npm install flyio
使用方法
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)獲取自己所處位置的經(jīng)緯度坐標(biāo)功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)獲取自己所處位置的經(jīng)緯度坐標(biāo)功能,涉及微信小程序地圖功能獲取經(jīng)緯度信息的相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
js實(shí)現(xiàn)圖片從左往右漸變切換效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)圖片從左往右漸變切換效果的方法,是比較典型的圖片漸變切換效果特效,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
脫敏指的是通過特定的技術(shù)手段對敏感數(shù)據(jù)進(jìn)行處理,使其不再直接暴露給用戶或系統(tǒng),防止敏感信息泄露,通常在測試、開發(fā)、數(shù)據(jù)處理等場景中使用,本文給大家介紹了JS實(shí)現(xiàn)手機(jī)號脫敏的方法,需要的朋友可以參考下2025-03-03
JavaScript中return返回多個(gè)值的三個(gè)方法實(shí)現(xiàn)
本文主要介紹了JavaScript中return返回多個(gè)值的三個(gè)方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
5 cool javascript apps...2007-03-03
10 種最常見的 Javascript 錯(cuò)誤(頻率最高)
本文是小編給大家收藏的JavaScript 中頻度最高的 10 種錯(cuò)誤，我們會告訴你什么原因?qū)е铝诉@些錯(cuò)誤，以及如何防止這些錯(cuò)誤發(fā)生。需要的朋友參考下2018-02-02
ionic組件ion-tabs選項(xiàng)卡切換效果實(shí)例
這篇文章主要為大家詳細(xì)介紹了ionic組件ion-tabs選項(xiàng)卡切換效果實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
JS實(shí)現(xiàn)數(shù)組深拷貝的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組深拷貝的方法,結(jié)合實(shí)例形式分析了javascript數(shù)組深拷貝的相關(guān)原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
javascript實(shí)現(xiàn)圖片預(yù)加載和懶加載
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)圖片預(yù)加載和懶加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
用js一次改變多個(gè)input的readonly屬性值的方法
這篇文章主要介紹了用js一次改變多個(gè)input的readonly屬性值的方法,需要的朋友可以參考下2014-06-06