寫在前面

昨天晚上剛剛開源的mpvue引起了不少前端er們的注意，下圖是一個簡單的對比（感謝?

@胡成全
?為本文提供的對比圖）。

話不多說，我們現(xiàn)在感受一下如何使用mpvue開發(fā)小程序。(以下內(nèi)容參照mpvue文檔完成)

開發(fā)環(huán)境

* node

* npm：這里建議安裝淘寶鏡像

* 微信開發(fā)者工具：下載地址

操作順序

首先下載vue-cli

npm install -g vue-cli

使用vue-cli創(chuàng)建一個mpvue項目

vue init mpvue/mpvue-quickstart my-project

創(chuàng)建的過程中會有一些設(shè)置，包括項目名稱，作者等等內(nèi)容，一路回車到底就行。

然后我們進入到項目目錄，安裝項目依賴

cd my-project npm install

最后，運行走起~

npm run dev

這時候項目就跑起來了，當(dāng)前項目的目錄結(jié)構(gòu)如下所示：

有vue開發(fā)經(jīng)驗的朋友對這個目錄肯定不會陌生了，這里就不多說了。

接下來我們要使用微信開發(fā)者工具運行這個小程序。

在微信開發(fā)者工具中新建項目

其中項目目錄選擇vue項目中的dist目錄。

appID填寫自己小程序的appID，沒有的話可以點選體驗“小程序”，只影響是否可以真機調(diào)試。

最后點擊【確定】按鈕，就可以看到實例代碼的效果了，我們也可以掃碼在真機中調(diào)試。

大家可以看到，這是官方為我們提供的一個計數(shù)器的效果，點擊+，數(shù)字會加1，點擊-，數(shù)字會減1。我們可以在此基礎(chǔ)上簡單地修改代碼。

我們修改src>page>count>store.js中的數(shù)值，就能改變計數(shù)器添加和減少的數(shù)量，修改完成之后，直接保存，項目會自動編譯，然后我們就可以在微信開發(fā)者工具中查看小程序的效果了。

寫在最后

我并不是一個小程序開發(fā)者，但是我能感受到騰訊對小程序的投入和重視越來越大，各大公司對小程序的動作也越來越多，我想2018年小程序絕對不會像2017年那樣平淡。

總結(jié)

以上是生活随笔為你收集整理的mpvue初体验-用vue开发小程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。