用 vue 寫小程序，基於 mpvue 框架重寫 weui

mpvue-weui

前言

上週美團開源了 mpvue 框架，他基於Vue.js 的小程序開發框架，從底層支持 Vue.js 語法和構建工具體系。what，小程序能夠用vue寫了？簡直有點不太敢肯定，花了5分鐘看了一下簡介，沒錯，真的能夠用vue開發小程序。真的是**限制了個人想象力，明白又該學寫了，因而就開始準備利用這個框架寫一點項目，感覺一下他的魅力(實際上是踩坑)。

重寫 WeUI

俗話說，第一個吃螃蟹的人，總要踩一些坑（俗話有這麼說過？）。WeUI是微信的官方 UI 庫，在小程序中或者移動端使用的很是多，那麼就有了一些想法:用 mpvue 重寫 WeUI。

mpvue-weui是什麼

也許 mpvue-weui 的內容不像它的名字那麼高大上，它不是一個UI庫（原諒我霸佔了這麼好的名字），其實它就是一個 WeUI的 demo 庫，就像 WeUI同樣，只不過是基於 mpvue 框架重寫了一下。

重寫目的

其實重寫的目的就是看看mpvue好很差用，裏面有哪些坑，而後將它寫成文檔的形式，從而避免基於mpvue框架開發的人再次踩坑。

重寫感覺

當重寫完了之後，發現最大的感覺就是：

• 開發體驗很棒，VSCode(IDE 自選)寫代碼，小程序開發工具開效果；
• 對小程序官方組件和 API 支持的很是完美；
• 快捷的 webpack 構建機制，開發過程當中熱更新.
• ...

此次主要是重寫 Weui，可能在自定義組件交互方面還沒涉及，好比可使用vuex進行狀態管理，或者未來要支持vue-router。總之很好用，爲美團點贊。

重寫效果

踩坑文檔

mpvue-weui 踩坑文檔

tip: 文檔會隨着mpvue新語法或者新特性的更新而繼續完善。

相關申明

1. 本項目mpvue-weui主要使用了 weui-wxss 中的相關文件，主要目的在於交流學習，若是冒犯了相關的開源協議，實屬抱歉。
2. 這篇文檔是本身在重寫了 WeUI 之後記錄的，若是有說的不對的地方還但願各位大佬指出，一塊兒學習。