mpvue是什么？為什么使用它？

目前小程序開發主要有三種形式：原生、wepy、mpvue，其中wepy是騰訊的開源項目；mpvue是美團開源的一個開發小程序的框架，全稱mini program vue(基于vue.js的小程序)，vue開發者使用了這個框架后，開發小程序的效率將得到很大的提升。

wepy與mpvue如何選擇？mpvue和wepy對比分析：

對比項原生小程序mpvuewepy

語法規范	小程序開發規范	vuejs語法規范	類似vuejs語法
標簽集合	小程序標簽	小程序標簽+h5標簽	小程序標簽
樣式規范	wxss	sass less stylus	sass less stylus
組件化	無組件化機制	vue組件化規范	自定義組件化規范
對端復用	不支持	支持	支持
自動構建	無	webpack	框架內置
集中數據管理	無	vuex	redux
編輯器	微信開發者工具	不限	不限
文件后綴	.wxss .wxml	.vue	.wpy
上手成本	熟悉原生小程序	熟悉vuejs	熟悉vuejs及wepy

三種形式小程序代碼對比

（1）原生小程序js部分：

（2）mpvue js部分：

（3）wepy js部分

可以看出：假如你是一個vue使用者，想最快上手小程序的話，你應該選擇mpvue，這種方式讓你保留了vue項目的大多數體檢，上手成本也相對較小。

mpvue項目初始化及目錄結構

1、項目創建及運行

（1）：打開命令行工具，運行vue init mpvue/mpvue-quickstart vue-music，即可創建一個名為vue-music的mpvue項目（2）：進入該項目目錄，npm install 安裝依賴（3）：npm run dev（4）：使用微信開發者工具打開項目目錄下生成的dist/wx文件夾，即可預覽mpvue項目初始化的結果

如圖，得到的是一個長相比較一般的初始化頁面：

2、項目初始化目錄結構分析
新創建出來的項目目錄結構及解析如下所示：

3、mpvue與vue項目不同的幾個點

①：小程序里所有的 BOM／DOM 都不能用，也就是說 v-html 指令不能用。 ②：不支持部分復雜的表達式，比如{{ message.split('').reverse().join('') }}，建議使用computed計算屬性返回計算值，這部分內容會直接編碼到wxml中，小程序官網文檔格式wxml不支持復雜的計算。 ③：不支持過濾器，因為渲染部分會轉成 wxml ，wxml 不支持過濾器，所以這部分功能不支持。

使用mpvue開發微信小程序上手項目(音樂小程序）可參考本人另一篇文章：
使用mpvue開發微信小程序——音樂小程序項目源碼分享

總結

以上是生活随笔為你收集整理的使用mpvue开发微信小程序——原生微信小程序、mpvue、wepy对比的全部內容，希望文章能夠幫你解決所遇到的問題。

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