基於mpvue+vant開發微信小程序

1.小程序注冊

進入微信公眾平台 https://mp.weixin.qq.com/

找一個郵箱注冊一個小程序，流程參考。一個郵箱只能注冊一個小程序

參考：https://jingyan.baidu.com/article/8275fc865a14c346a03cf6e2.html

2.開發工具下載&安裝

node下載安裝

vsocode下載安裝 https://code.visualstudio.com/

微信小程序工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3.什么是MPVue

mpvue （github 地址）是一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其可以運行在小程序環境中，從而為小程序開發引入了整套 Vue.js 開發體驗。

地址：http://mpvue.com/

使用 mpvue 開發小程序的優勢：

• 開發Vue.js 體驗
• 使用 Vuex 數據管理方案
• 快捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload
• 支持使用 npm 外部依賴
• 使用 Vue.js 命令行工具 vue-cli 快速初始化項目

4.vant Weapp

Vant Weapp 是移動端 Vue 組件庫 Vant 的小程序版本

https://github.com/youzan/vant-weapp

https://youzan.github.io/vant-weapp/#/intro

5.創建一個項目

 1.全局安裝 vue-cli

npm install --global vue-cli 

2.創建一個基於 mpvue-quickstart 模板的新項目(my-new-project)

創建項目
vue init mpvue/mpvue-quickstart my-project

安裝依賴
cd my-project
npm install
啟動項目
npm run dev

3.打開小程序開發工具，導入項目

 4.小程序預覽 

 

5.下載vant-weapp

git clone [e-mail]:youzan/vant-weapp.git

6.復制vant-weapp的dist文件夾到static文件夾，並且改名為vant

7.首頁看不到東西，控制控制台報錯，打開微信開發者工具的“詳情”右側欄，有一個ES6轉ES5選項，選中即可

8.在page/index添加一個main.json

{ "navigationBarTitleText": "首頁", "usingComponents": { "van-button": "../../static/vant/button/index", "van-search": "../../static/vant/search/index", "van-tabbar": "../../static/vant/tabbar/index", "van-tabbar-item": "../../static/vant/tabbar-item/index" } }

9.在index.vue添加

<van-button type="default">默認按鈕</van-button>

<van-button type="primary">主要按鈕</van-button>

<van-button type="info">信息按鈕</van-button>

<van-button type="warning">警告按鈕</van-button>

<van-button type="danger">危險按鈕</van-button>

   

<van-search placeholder="請輸入搜索關鍵詞" use-action-slot bind:search="onSearch">

<view slot="action" bind:tap="onSearch">搜索</view>

 
          </van-search>
 
         

10.界面顯示

 

6.代碼

https://github.com/alvn1213/mpvue-demo  

7.參考

使用mpvue開發小程序教程

https://www.jianshu.com/p/6f8d74be3ff8