用 vue 寫小程式,基於 mpvue 框架重寫 weui

KuangPF發表於2019-03-03

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。總之很好用,為美團點贊。

重寫效果

用 vue 寫小程式,基於 mpvue 框架重寫 weui
用 vue 寫小程式,基於 mpvue 框架重寫 weui
用 vue 寫小程式,基於 mpvue 框架重寫 weui
用 vue 寫小程式,基於 mpvue 框架重寫 weui

踩坑文件

mpvue-weui 踩坑文件

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

相關申明

  1. 本專案mpvue-weui主要使用了 weui-wxss 中的相關檔案,主要目的在於交流學習,如果冒犯了相關的開源協議,實屬抱歉。
  2. 這篇文件是自己在重寫了 WeUI 以後記錄的,如果有說的不對的地方還希望各位大佬指出,一起學習。

相關文章