最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

一.什么是mpvue框架？

十多年的平度網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整平度建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“平度網(wǎng)站設(shè)計(jì)”,“平度網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

mpvue 是一個使用 Vue.js 開發(fā)小程序的前端框架。框架基于 Vue.js 核心（所以建議熟練掌握vue再使用mpvue框架，否則還是建議去使用原生框架去寫小程序），mpvue 修改了 Vue.js 的 runtime 和 compiler 實(shí)現(xiàn)，使其可以運(yùn)行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套 Vue.js 開發(fā)體驗(yàn)。

二.必要的開發(fā)基礎(chǔ)

① 熟練掌握vue.js（未曾使用過vue這個框架的話，建議vue的官方文檔進(jìn)行學(xué)習(xí)：https://cn.vuejs.org/v2/guide/）

② 微信開發(fā)者工具（這個工具是開發(fā)、調(diào)試和模擬運(yùn)行微信小程序的最核心的工具了，下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html）

③ Visual Studio Code（一個輕量級代碼編輯器，擁有非常多好用的輔助開發(fā)插件，下載地址：https://code.visualstudio.com）

④ node.js（前端工具鏈現(xiàn)在基本都依賴Node.js，下載地址：https://nodejs.org/en/download/）

⑤ vue-cli （vue專用的項(xiàng)目腳手架工具，打開cmd,輸入命令：npm install --global vue-cli）

三.初始化項(xiàng)目

1.打開cmd，快捷鍵win+R；

2.檢查node.js是否安裝成功,輸入命令：

node -v

出現(xiàn)版本號即為成功；

3.檢查vue-cli是否安裝成功，輸入命令：

vue -V

出現(xiàn)版本號即為成功；

4.然后我們執(zhí)行以下命令，將npm的下載源切換到國內(nèi)淘寶的鏡像，以提高下載時的速度和成功率；

npm set registry https://registry.npm.taobao.org/

5.進(jìn)入你想保存項(xiàng)目的文件夾（比如d盤,就先輸入命令d:），創(chuàng)建一個基于 mpvue-quickstart 模板的新項(xiàng)目：

vue init mpvue/mpvue-quickstart wxvueshop

接著我們選擇或填寫項(xiàng)目的配置信息，不知道的你就回車（依次是，項(xiàng)目名稱，小程序appid，項(xiàng)目介紹，作者，然后是否安裝vuex等等，你想安裝就寫yes,否則no）

這個時候你就能看見d盤有一個wxvueshop的項(xiàng)目文件了。

6.不急，我們這時候進(jìn)入這個文件夾，輸入命令：

cd wxvueshop

7.然后，我們進(jìn)行依賴庫的安裝，輸入命令：

npm install

8.安裝完成后，我們運(yùn)行一下，輸入命令：

npm run dev

隨著運(yùn)行成功的運(yùn)行之后，可以看到本地wxvueshop多了個dist目錄，這個目錄里就是生成的小程序相關(guān)代碼，這個時候我們就成功初始化項(xiàng)目了。跑起來了...

四.運(yùn)行查看項(xiàng)目

打開微信web開發(fā)者工具，選擇新增項(xiàng)目，打開我們剛剛創(chuàng)建的項(xiàng)目，如圖：

點(diǎn)擊“確定”按鈕，進(jìn)入小程序開發(fā)主界面，在左邊的小程序模擬器中就能看到wxvueshop小程序的執(zhí)行結(jié)果了：

五.編寫代碼

如上圖，我們新創(chuàng)建的項(xiàng)目有生成默認(rèn)頁面，現(xiàn)在我們把它全部去掉，具體如下：

1.刪掉src/components、src/pages、src/utils三個目錄下的所有代碼文件；

2.將src/App.vue文件中的內(nèi)容重置成：

3.將src/main.js文件中的內(nèi)容重置成：

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue(App)
app.$mount()
export default {
 config: {
  pages: [
    '^pages/login/main'
  ],
  window: {
   backgroundTextStyle: 'light',
   navigationBarBackgroundColor: '#fff',
   navigationBarTitleText: '我的小程序',
   navigationBarTextStyle: 'black'
  }
 }
}

現(xiàn)在，我們的代碼就成了一個小程序頁面都沒有的初始狀態(tài)。

4.新建頁面，以后的每一個mpvue頁面組件都會擁有如下圖片這樣的結(jié)構(gòu)。

頁面寫法如下：

login.vue:

main.js:

import Vue from 'vue'
import App from './login'
const app = new Vue(App)
app.$mount()
export default {
  config: {
   // 注意，頁面級可配置屬性相當(dāng)于只是`src/main.js`中配置里的`window`部分
   "navigationBarBackgroundColor": "#3dc1c7",
   "navigationBarTitleText": "登錄",
   "navigationBarTextStyle": "white"
  }
 }

5.我們在src里面用vue寫法創(chuàng)建頁面的時候，小程序的頁面會自動創(chuàng)建和代碼轉(zhuǎn)化，文件夾為dist,圖片如下：

就這樣我們已經(jīng)初步了解mpvue框架了，之后有時間會寫進(jìn)階版，上面內(nèi)容如果有出錯的地方，麻煩大佬們指正，謝謝！

總結(jié)

以上所述是小編給大家介紹的微信小程序的mpvue框架快速上手指南，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！