mpvue開發小程序(一)基礎架構

小程序api地址:https://developers.weixin.qq.com/miniprogram/dev/api/
mpvue-weui(常用地址):https://kuangpf.com/mpvue-weui/#/README

mpvue 官方文檔: http://mpvue.com/mpvue/quickstart/#2

mpvue是新出的用vue的語法開發微信小程序的前端框架,經過實際開發還是比較好用的。最大的特點是,對於先開發vue項目,後開發該項目的小程序版本來說機具便利。

1. 初始化一個 mpvue 項目

現代前端開發框架和環境都是需要 Node.js 的,如果沒有的話,請先下載 nodejs 並安裝。

然後打開命令行工具:

# 1. 先檢查下 Node.js 是否安裝成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 由於衆所周知的原因,可以考慮切換源爲 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安裝 vue-cli
# 一般是要 sudo 權限的
$ npm install --global [email protected]

# 4. 創建一個基於 mpvue-quickstart 模板的新項目
# 一路回車選擇默認就可以了
# 注意:在是否選擇eslint的地方,打n,回車,表示不用eslint嚴格語法
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安裝依賴,走你
$ cd my-project
$ npm install
$ npm run dev

2.安裝微信開發者工具,新建項目的地址就是就是剛剛創建的項目目錄(非 dist 目錄)

3.到此,上手完畢。

注意:新增的頁面需要重新 npm run dev 來進行編譯

mpvue開發小程序(二)環境配置

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章