微信mpvue開發(fā)項(xiàng)目構(gòu)建

一、安裝開發(fā)環(huán)境

? ? ? ? 1) node.js

? ??????????下載地址:https://nodejs.org/en/download/? ?安裝完成后,打開你的命令行輸入如下命令褂痰,驗(yàn)證安裝是否成功:

????????????node --version? //成功則會(huì)輸出相應(yīng)版本

? ? ? ? ? ? 安裝成功之后即npm安裝成功兼搏,由于國外環(huán)境安裝速度較慢,可以切換到國內(nèi)的淘寶鏡像來提高效率

? ? ? ? ? ? ?npm set registry https://registry.npm.taobao.org/

二连霉、開發(fā)環(huán)境安裝成功之后我們需要安裝開發(fā)依賴?

? ? ? ? 1)vue-cli

? ??????????vue-cli是一個(gè)vue專用的項(xiàng)目腳手架工具榴芳,可以用于方便的創(chuàng)建vue項(xiàng)目骨架代碼,

? ? ? ? ????cnpm install vue-cli -g

? ? ? ? 2)下載微信開發(fā)者工具跺撼,調(diào)試和模擬運(yùn)行微信小程序

? ??????????下載地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

三窟感、創(chuàng)建機(jī)遇mpvue的小程序項(xiàng)目

? ? 1)快速構(gòu)建mpvue小程序項(xiàng)目,按照命令行的引導(dǎo)一路回車:

? ? ? ? 結(jié)束之后會(huì)在我的F盤下面的test文件下新建一個(gè)vuetest的文件歉井,即我們項(xiàng)目文件地址柿祈,在這個(gè)過程中vue幫我們下載了一份注冊名為? ? mpvue/mpvue-quickstart的模板代碼,然后根據(jù)開發(fā)者在命令行提示過程中輸入的信息哩至,生成一份經(jīng)過配置后的代碼躏嚎。安裝成功之后我們還需要對項(xiàng)目安裝開發(fā)所需要的依賴:

? ? ? ? 結(jié)束之后開發(fā)所需要的依賴環(huán)境就自動(dòng)安裝在了vuetest下(node_modules),執(zhí)行以下代碼即可將項(xiàng)目運(yùn)行起來:

? ? ? ? 成功運(yùn)行之后項(xiàng)目就可以進(jìn)入開發(fā)模式菩貌,一但源代碼發(fā)生變化就會(huì)觸發(fā)自動(dòng)編譯卢佣,可以用正常的vue語句開發(fā),但最終還需要轉(zhuǎn)換成小程序的的代碼才可以在微信小程序環(huán)境下運(yùn)行箭阶,編譯后的代碼會(huì)在dist目錄下::

cnpm run build

運(yùn)行查看結(jié)果虚茶,打開微信開發(fā)者工具——>新建項(xiàng)目


? ? ? ? 項(xiàng)目目錄選擇我們剛剛新建的vuetest目錄,若無AppID則可使用測試號:

? ? ? ? 點(diǎn)擊導(dǎo)入則可進(jìn)入小程序開發(fā)界面:


? ? ? ? 左側(cè)為運(yùn)行結(jié)果仇参,右側(cè)可以查看小程序源碼

三嘹叫、mpvue小程序頁面構(gòu)成

? ? 1)src目錄

? ? ? ? src目錄下是我們編寫程序的目錄文件,默認(rèn)生成的模板已經(jīng)給我們創(chuàng)建了三個(gè)文件夾作為參考案例诈乒,可以參考這里面的邏輯代碼自己來編寫自己的風(fēng)格

? ??????components:一般我們會(huì)將公共的模板或者說重復(fù)較多的部分提取成vue組件存放在這里

? ??????pages:存放小程序的頁面

????????utils:可選(可刪)罩扇。可以將代碼中一些公用工具函數(shù)組織成模塊放入該目錄下

? ??????main.js + App.vue:這兩個(gè)是入口文件抓谴,相當(dāng)于原生小程序框架中的app.json和app.js的復(fù)合體暮蹂。

? ? 2)config目錄

? ??????config目錄下包含了用于開發(fā)和生產(chǎn)環(huán)境下的不同配置,dev.env.js用于開發(fā)環(huán)境癌压,prod.env.js用于生產(chǎn)環(huán)境仰泻,可以將開發(fā)階段和生產(chǎn)階段不一樣的信息配置到這兩個(gè)文件中去,比如說后臺(tái)請求的api地址滩届,圖片地址等集侯,然后在代碼中以變量的形式進(jìn)行引用:

? ??????// dev.env.js

module.exports = merge(prodEnv, {

? NODE_ENV: '"development"',

? BASE_URL: '"http://xxxx/api"'

})

// prod.env.js

module.exports = {

? NODE_ENV: '"production"',

? BASE_URL: '"http://xxxxadd/api"'

}

? ? ? ? 后面在使用api接口的時(shí)候可以直接使用:

const baseURL = process.env.API_BASE_URL

wx.request({url:`${baseURL}/xxx`})

? ? 3)build目錄

? ??????build目錄下是一些用于項(xiàng)目編譯打包的node.js腳本和webpack配置文件被啼。一般情況下不需要修改這些文件。

? ? 4)static目錄

? ? ? ? 主要存放一些靜態(tài)資源棠枉,比如圖片浓体、文本文件等

四、小程序入口

? ? 1)app.json

? ??????app.json是小程序的全局配置文件辈讶,其包含了小程序的頁面文件路徑配置命浴、窗口的全局樣式信息、底部選項(xiàng)卡式菜單欄的配置贱除,以及一些小程序網(wǎng)絡(luò)超時(shí)的配置等等生闲。


? ? 2)App.vue

? ??????App.vue組件中可以編寫小程序的生命周期方法(通常使用Vue的生命周期方法,但也兼容原生的生命周期方法)月幌,也可以在其中加入小程序的全局樣式

? ? 3)其他頁面

? ??????我們新建一個(gè)名為index的子目錄(請遵循每個(gè)頁面放入一個(gè)子目錄的良好習(xí)慣)碍讯,然后在該子目錄下,新建2個(gè)文件:一個(gè)用于實(shí)現(xiàn)頁面主體功能的index.vue組件扯躺,另一個(gè)則用于將這個(gè)頁面組件生成Vue實(shí)例并加載的main.js捉兴。以后的每一個(gè)mpvue頁面組件都會(huì)擁有這樣的結(jié)構(gòu)。然后在main.js中編寫如下代碼录语,非常簡單的一段代碼倍啥,它的功能是引入index.vue并創(chuàng)建Vue實(shí)例:

import Vue from 'vue'

import App from './index'

const app = new Vue(App)

app.$mount()

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市澎埠,隨后出現(xiàn)的幾起案子逗栽,更是在濱河造成了極大的恐慌,老刑警劉巖失暂,帶你破解...
    沈念sama閱讀 222,946評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件彼宠,死亡現(xiàn)場離奇詭異,居然都是意外死亡弟塞,警方通過查閱死者的電腦和手機(jī)凭峡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來决记,“玉大人摧冀,你說我怎么就攤上這事∠倒” “怎么了索昂?”我有些...
    開封第一講書人閱讀 169,716評論 0 364
  • 文/不壞的土叔 我叫張陵,是天一觀的道長扩借。 經(jīng)常有香客問我椒惨,道長,這世上最難降的妖魔是什么潮罪? 我笑而不...
    開封第一講書人閱讀 60,222評論 1 300
  • 正文 為了忘掉前任康谆,我火速辦了婚禮领斥,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘沃暗。我一直安慰自己月洛,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評論 6 398
  • 文/花漫 我一把揭開白布孽锥。 她就那樣靜靜地躺著嚼黔,像睡著了一般。 火紅的嫁衣襯著肌膚如雪惜辑。 梳的紋絲不亂的頭發(fā)上隔崎,一...
    開封第一講書人閱讀 52,807評論 1 314
  • 那天,我揣著相機(jī)與錄音韵丑,去河邊找鬼。 笑死虚缎,一個(gè)胖子當(dāng)著我的面吹牛撵彻,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播实牡,決...
    沈念sama閱讀 41,235評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼陌僵,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了创坞?” 一聲冷哼從身側(cè)響起碗短,我...
    開封第一講書人閱讀 40,189評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎题涨,沒想到半個(gè)月后偎谁,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,712評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡纲堵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評論 3 343
  • 正文 我和宋清朗相戀三年巡雨,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片席函。...
    茶點(diǎn)故事閱讀 40,926評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡铐望,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出茂附,到底是詐尸還是另有隱情正蛙,我是刑警寧澤,帶...
    沈念sama閱讀 36,580評論 5 351
  • 正文 年R本政府宣布营曼,位于F島的核電站乒验,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蒂阱。R本人自食惡果不足惜徊件,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評論 3 336
  • 文/蒙蒙 一奸攻、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧虱痕,春花似錦睹耐、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至新思,卻和暖如春窖梁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背夹囚。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評論 1 274
  • 我被黑心中介騙來泰國打工纵刘, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人荸哟。 一個(gè)月前我還...
    沈念sama閱讀 49,368評論 3 379
  • 正文 我出身青樓假哎,卻偏偏與公主長得像,于是被迫代替她去往敵國和親鞍历。 傳聞我的和親對象是個(gè)殘疾皇子舵抹,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評論 2 361

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

  • 在尤大微博鋪墊著“將會(huì)引入一些關(guān)于 TypeScript 的改進(jìn)”一周之后,代號為 Level E 的 Vue.j...
    極樂叔閱讀 14,799評論 0 12
  • 開始 這個(gè)項(xiàng)目是一個(gè)mpvue 的demo, 沒有具體的業(yè)務(wù)實(shí)現(xiàn)方法劣砍,只有簡單的頁面切換惧蛹,還有常用的一些方法封裝,...
    aimee66閱讀 7,001評論 0 5
  • 橄欖樹綠瀾滄畔刑枝, 密林碧翠遍遠(yuǎn)山香嗓。 傣家竹樓美如畫 富民喜看香蕉園。 膠林應(yīng)是天然源 割膠小伙忙不完装畅。 辛勤勞動(dòng)人...
    詩小雅閱讀 593評論 1 9
  • 基本思想 將序列中第一個(gè)元素作為有序序列陶缺,然后將剩下的n-1個(gè)元素按照關(guān)鍵字大小依次插入該有序序列,每插入一個(gè)元素...
    時(shí)光雜貨店閱讀 250評論 0 1
  • 今天我要回學(xué)校了洁灵,昨天從爺爺家離開時(shí)饱岸,爺爺一把拉住我,問我大學(xué)伙食怎么樣徽千,然后拿出了自己存了很久都不舍得用的兩千元...
    天才寬寬閱讀 161評論 0 0