開源項目精選:用Vue.js開發微信小程序——mpvue

簡單介紹

一個使用 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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180313G11XGA00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券