寫在前面

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

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

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

開發環境

* node

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

* 微信開發者工具：下載地址

操作順序

首先下載vue-cli

npm install -g vue-cli

使用vue-cli創建一個mpvue項目

vue init mpvue/mpvue-quickstart my-project

創建的過程中會有一些設置，包括項目名稱，作者等等內容，一路回車到底就行。

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

cd my-project npm install

最后，運行走起~

npm run dev

這時候項目就跑起來了，當前項目的目錄結構如下所示：

有vue開發經驗的朋友對這個目錄肯定不會陌生了，這里就不多說了。

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

在微信開發者工具中新建項目

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

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

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

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

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

寫在最后

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。