最近學(xué)了一點(diǎn)vue.js媒鼓，并且根據(jù)教程做了一個(gè)類似餓了么的APP商家頁(yè)面。vue.js作為現(xiàn)在很火的一個(gè)前端框架错妖，確實(shí)有它的很多優(yōu)點(diǎn)绿鸣，廢話不多說(shuō)，來(lái)總結(jié)總結(jié)暂氯。

一潮模、用到的技術(shù)棧：

vue2.5.2+ vue-router2+ vue-cli2+ vue-resource + stylus + flex布局 + es6+ eslint + webpack2

二、實(shí)現(xiàn)的功能

Goods痴施、Ratings擎厢、Seller組件視圖均可上下滾動(dòng)

商品頁(yè) 點(diǎn)擊左側(cè)menu究流，右側(cè)list對(duì)應(yīng)跳轉(zhuǎn)到相應(yīng)位置

點(diǎn)擊list查看商品詳情頁(yè)，父子組件的通信

評(píng)論內(nèi)容夠可以篩選查看

購(gòu)物車組件动遭，包括添加刪除商品及動(dòng)效梯嗽，購(gòu)物控件與購(gòu)物車組件之間非父子組件通信，點(diǎn)擊購(gòu)物車圖標(biāo)沽损，展示選擇的商品列表

商家實(shí)景圖片可以左右滑動(dòng)

loaclStorage緩存商家信息（id灯节、name）

三、項(xiàng)目結(jié)構(gòu)

common/---- 文件夾存放的是通用的css和fonts

components/----文件夾用來(lái)存放我們的 Vue 組件

router/----文件夾存放的是vue-router相關(guān)配置（linkActiveClass,routes注冊(cè)組件路由）

build/----文件是 webpack 的打包編譯配置文件

config/----文件夾存放的是一些配置項(xiàng)绵估，比如我們服務(wù)器訪問(wèn)的端口配置等

dist/----該文件夾一開始是不存在炎疆，在我們的項(xiàng)目經(jīng)過(guò) build 之后才會(huì)產(chǎn)出

prod.server.js----該文件是測(cè)試是模擬的服務(wù)器配置，用來(lái)運(yùn)行dist里面的文件国裳，在config/index.js中,build對(duì)象中添加一條端口設(shè)置port：9000形入，

App.vue----根組件，所有的子組件都將在這里被引用缝左，eventHub空實(shí)例是用來(lái)組件間通信的中央數(shù)據(jù)總線作用亿遂，主要連接購(gòu)買控件和購(gòu)物車組件之間的數(shù)據(jù)通信

index.html----整個(gè)項(xiàng)目的入口文件，將會(huì)引用我們的根組件 App.vue

main.js----入口文件的 js 邏輯渺杉，在 webpack 打包之后將被注入到 index.html 中

四蛇数、開發(fā)中遇到的問(wèn)題：

1.Vue 提供一個(gè)官方命令行工具，可用于快速搭建大型單頁(yè)應(yīng)用是越。該工具為現(xiàn)代化的前端開發(fā)工作流提供了開箱即用的構(gòu)建配置耳舅。只需幾分鐘即可創(chuàng)建并啟動(dòng)一個(gè)帶熱重載、保存時(shí)靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項(xiàng)目：

（1）全局安裝 vue-cli：npm install --global vue-cli

（2）創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目：vue init webpack my-project

（3）安裝依賴倚评，走你

$ cd my-project

$ npm install

$ npm run dev

注意：如果npm安裝失敗浦徊，直接用命令清理就行，控制臺(tái)輸入：

npm cache clean --force天梧，然后重新安裝盔性。

2.如果出現(xiàn)?

?Error: Cannot find module 'stylus'

說(shuō)明找不到對(duì)應(yīng)的模塊，需要單獨(dú)安裝該模塊呢岗，cmd命令為

運(yùn)行 npm install （模塊名） --save-dev即可解決

3.vue-loader中的postcss插件能夠幫助我們處理css瀏覽器兼容問(wèn)題冕香，我們自己不需要自己去手寫

Postcss是根據(jù)can i use 官網(wǎng)的標(biāo)準(zhǔn)編寫的代碼

4.如果出現(xiàn)

http://eslint.org/docs/rules/no-unused-vars? 'app' is assigned a value but never used

說(shuō)明diff 這個(gè)變量聲明且賦值然而在后面沒(méi)有使用

解決方法：在這段代碼上面寫 /* eslint-disable no-unused-vars */

5.如果出現(xiàn)

安裝vue-resource是用來(lái)處理一些前后端交互數(shù)據(jù)的一個(gè)插件。

npm install vue-resource --save

訪問(wèn)https://github.com/pagekit/vue-resource查看其api文檔

6.在vue里面不能直接使用src引用圖像地址敷燎，應(yīng)該使用:src暂筝，

直接使用src在編譯的時(shí)候會(huì)被解析報(bào)錯(cuò)

7.在網(wǎng)頁(yè)設(shè)計(jì)中箩言，Sticky footers設(shè)計(jì)是最古老和最常見(jiàn)的效果之一硬贯，大多數(shù)人都曾經(jīng)經(jīng)歷過(guò)。它可以概括如下：如果頁(yè)面內(nèi)容不夠長(zhǎng)的時(shí)候陨收，頁(yè)腳塊粘貼在視窗底部饭豹；如果內(nèi)容足夠長(zhǎng)時(shí)鸵赖，頁(yè)腳塊會(huì)被內(nèi)容向下推送。一種兼容性比較好的解決方案：

外部有兩層：內(nèi)容包裝器wrapper(里面有一層是真正用來(lái)擴(kuò)展內(nèi)容)+容器底部close

具體的結(jié)構(gòu)

8.

<li class="support-item" v-for="item in seller.support"></li>

在 v-for 塊中拄衰，我們擁有對(duì)父作用域?qū)傩缘耐耆L問(wèn)權(quán)限它褪。v-for 還支持一個(gè)可選的第二個(gè)參數(shù)為當(dāng)前項(xiàng)的索引。

<li class="support-item" v-for="(item,index)" in seller.supports></li>

9.利用vue進(jìn)行css過(guò)渡效果

結(jié)構(gòu)

10.當(dāng)vue編譯運(yùn)行正常而頁(yè)面不能正常顯示時(shí)翘悉，這時(shí)要多關(guān)注一下瀏覽器的輸出console茫打，有可能是js問(wèn)題，如變量沒(méi)有定義

11.vue2.0索引不能用$index

循環(huán) v-for="(item, index) in items"

使用 :class="{'current':currentIndex === index}"

v-el 和 v-ref 都棄用妖混，改為使用ref屬性為元素或組件添加標(biāo)記老赤，通過(guò)$refs獲取

12.在顯示配送費(fèi)和起送費(fèi)時(shí)，第一步：需要在app.vue中引進(jìn)seller中的數(shù)據(jù)制市，第二步：然后在goods.vue組件中引入這兩個(gè)屬性 第三步：在shopcart中使用props接收抬旺，最后進(jìn)行引用

13.購(gòu)物車組件狀態(tài)隨著selectFoods的屬性而改變，selectFoods是通過(guò)父組件傳過(guò)來(lái)的祥楣，所有的狀態(tài)都通過(guò)selectFoods計(jì)算而來(lái)开财，所以綁定了totalPrice()、totalCount()误褪、payDesc()责鳍、payClass()等計(jì)算屬性。也就是說(shuō)我們通過(guò)改變selectFoods就可以改變狀態(tài)兽间。

這正是vue的好處之一薇搁，如果是非MVVM框架如jQuery等去寫的話，我們要通過(guò)大量的if判斷語(yǔ)句操作DOM渡八。

14.padding-top:100% 保證上下padding保持一致

15.formatDate.js是一個(gè)自定義的js組件,不是vue組件,目錄位于:src/common/js,這種寫法是為了練習(xí)js的模塊化編程

將單獨(dú)的一個(gè)函數(shù)寫成一個(gè)模塊

通過(guò)export導(dǎo)出函數(shù)

通過(guò)import導(dǎo)入函數(shù)

16.BScroll結(jié)構(gòu) 一定是外層有一個(gè)容器啃洋，內(nèi)層是一個(gè)wrapper，有一個(gè)固定的適口高度屎鳍，當(dāng)內(nèi)層容器的高度超過(guò)適口高度的話就可以滾動(dòng)

結(jié)構(gòu)

17.切記：當(dāng)傳入一個(gè)props一定要通過(guò) : ,這是一個(gè)規(guī)整化指令的縮寫

18.這里解釋一下border-1px

border-1px

19.左側(cè)寬度固定宏娄，右側(cè)寬度自適應(yīng)

20.背景模糊效果

filter：blur(10px),注意，所有在內(nèi)的子元素也會(huì)模糊逮壁，包括文字孵坚，所以采用定位布局，背景單獨(dú)占用一個(gè)層窥淆，ios有一個(gè)設(shè)置backdrop-filter:blur(10px)卖宠，只會(huì)模糊背景,但不支持android

21.seller組件：

（1）seller頁(yè)面中商品商家實(shí)景圖片橫向滾動(dòng)

解決方案：每個(gè)li要display：inline-block，因?yàn)閣idth不會(huì)自動(dòng)撐開父級(jí)ul忧饭，所以需要計(jì)算ul的width扛伍，（每一張圖片的width+margin）*圖片數(shù)量-一個(gè)margin，因?yàn)樽詈笠粡垐D片沒(méi)有margin

同時(shí)new BScroll里面要設(shè)置scrollX: true,eventPassthrough: 'vertical',// 滾動(dòng)方向橫向

（2）打開seller頁(yè)面词裤，無(wú)法滾動(dòng)

問(wèn)題分析：出現(xiàn)這種現(xiàn)象是因?yàn)閎etter-scroll插件是嚴(yán)格基于DOM的刺洒，數(shù)據(jù)是采用異步傳輸?shù)谋畋觯?yè)面剛打開，DOM并沒(méi)有被渲染逆航，所以鼎文，要確保DOM渲染了，才能使用better-scroll因俐，

解決方案：用到mounted鉤子函數(shù)拇惋，同時(shí)搭配this.$nextTick()

（3）在seller頁(yè)面，刷新后抹剩，無(wú)法滾動(dòng)

問(wèn)題分析：出現(xiàn)這種情況是因?yàn)閙ounted函數(shù)在整個(gè)生命周期中只會(huì)只行一次

解決方案：使用watch方法監(jiān)控?cái)?shù)據(jù)變化蚤假，并執(zhí)行滾動(dòng)函數(shù)?this._initScroll();this._initPicScroll();

22.eslint?是一個(gè)js代碼風(fēng)格檢查器，配合vue-cli腳手架中的熱更新吧兔，可以很方便的定位和提示錯(cuò)誤磷仰。在公司多人協(xié)作開發(fā)時(shí)可以確保代碼風(fēng)格保持一致，可以很方便的閱讀他人的代碼境蔼。

剛使用時(shí)灶平，會(huì)不太習(xí)慣，但是堅(jiān)持下來(lái)箍土，自己寫的代碼越來(lái)越整齊規(guī)范逢享，越來(lái)越漂亮，自己會(huì)有很大的滿足感吴藻。對(duì)自己瞒爬，對(duì)他人都是一件非常有益的事！

23.最后沟堡，進(jìn)行項(xiàng)目打包

（1）運(yùn)行npm run build進(jìn)行打包,生成dist文件

（2）在項(xiàng)目根目錄新建一個(gè)prod.server.js文件侧但，新建一個(gè)httpServer

（3）在config->index.js文件bulid添加一個(gè)監(jiān)聽端口：port:9000

將productionSourceMap修改為false

（4）最后運(yùn)行node prod.server.js

注意：每次修改config->index.js文件bulid都要重新運(yùn)行npm run build

24.手機(jī)測(cè)試機(jī)巧

將localhost換成自己的ip，Windows在命令行執(zhí)行ipconfig查看航罗，mac執(zhí)行ifconfig查看禀横。

然后復(fù)制地址欄地址，進(jìn)入草料二維碼粥血，然后生成二維碼柏锄，然后用手機(jī)掃一掃就可以查看了，前提是复亏，你手機(jī)和電腦必須在同一個(gè)局域網(wǎng)趾娃。

25.參考資料：

Vue.js官網(wǎng)

Vue.cli(https://github.com/vuejs/vue-cli)

Vue-resource(https://github.com/vuejs/vue-resource)

Vue-router(https://github.com/vuejs/vue-router)

better-scroll(https://github.com/ustbhuangyi/better-scroll)

Webpack官網(wǎng)(http://webpack.github.io/)

Stylus中文文檔(http://www.zhangxinxu.com/jq/stylus/)

cs6入門學(xué)習(xí)(http://es6.ruanyifeng.com/)

eslint規(guī)則(http://eslint.org/docs/rules/)

設(shè)備像素比(http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/)

Flex布局(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool)

貝塞爾曲線測(cè)試(http://cubic-bezier.com/)