簡單介紹
一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 實現,使其可以運行在小程序環境中,從而為小程序開發引入了整套 Vue.js 開發體驗。該框架有以下優點:
1.徹底的組件化開發能力:提高代碼復用性
2.完整的 Vue.js 開發體驗
3.方便的 Vuex 數據管理方案:方便構建複雜應用
4.快捷的 webpack 構建機制:自定義構建策略、開發階段 hotReload
5.支持使用 npm 外部依賴
6.使用 Vue.js 命令行工具 vue-cli 快速初始化項目
7.H5 代碼轉換編譯成小程序目標代碼的能力
安裝
首先,你需要已經安裝微信開發者工具,鏈接:
其次,你需要安裝node.js:
https://nodejs.org/
然後你應該能愉快的開始玩耍了
1.切換源
2. 全局安裝vue-cli(vue 官方的一個命令行工具)
3.創建新項目
4.進入文件夾,安裝依賴
成功的話,在test目錄下應該能看見一個dist文件夾
當然,以上是快速搭建的方法,想要自行配置的同學請自行參考:
http://mpvue.com/build/#_2
使用
打開你的
然後進入
目錄請選擇之前提到的那個dist文件夾
AppID影響能否真機調試
確定後,便能進入如下界面:
然後輕鬆愉快的用自己的方式打開src下的代碼進行更改就ok了
mpvue是一個不錯的框架,不論你是想玩一玩(例如我)還是進行開發都是不錯的選擇,vue的學習也不難,預測該項目下周還會在周榜上(笑)
你可能會用到的工具:
mpvue-loader 提供 webpack 版本的載入器:http://mpvue.com/build/mpvue-loader
mpvue-webpack-target webpack 構建目標:http://mpvue.com/build/mpvue-webpack-target
postcss-mpvue-wxss 樣式代碼轉換預處理工具:http://mpvue.com/build/postcss-mpvue-wxss
px2rpx-loader 樣式轉化插件:http://mpvue.com/build/px2rpx-loader
mpvue-quickstart mpvue-quickstart:http://mpvue.com/mpvue/quickstart
mpvue-simple 輔助 mpvue 快速開發 Page / Component 級小程序頁面的工具http://mpvue.com/mpvue/simple
關於webpack
該項目還十分貼心的配了一張圖:
和webpack的文檔鏈接:https://doc.webpack-china.org/
畢竟我也不了解,只能做到這了(笑)
作者背景簡介
美團點評,隸屬於一家大型(國內頂尖)的外賣——美團外賣。
本文由 Superscalar@開源工場 以 CC-BY-SA 4.0 協議創作發布,轉載請註明開源工場作品及來源網址。
歡迎各位看官通過一下方式加入我們的組織哦
電報群:t.me/openingsource
微信群:
Facebook: https://facebook.com/openingsource
Twitter: https://twitter.com/openingsource
Google + :https://google.com/+OpeningSource
微博:https://weibo.com/openingsource
领取专属 10元无门槛券
私享最新 技术干货