vue.js2.5cube-ui重構(gòu)餓了么app外賣課程

1、Vue.js 外賣 APP 課程 Q&A背景，隨著學(xué)生人數(shù)的增發(fā)現(xiàn)很多學(xué)生遇到都大同小異，我打算整理一些常見問題的 Q&A，來節(jié)約大家的時(shí)間，提示學(xué)習(xí)效率。不過我也發(fā)現(xiàn)一些問題：很多同學(xué)不看，上來就寫代碼，然后拋出的很多問題在里都有現(xiàn)成的解決方案，所以建議務(wù)必認(rèn)真的學(xué)習(xí)。還有一些同學(xué)遇到，都是 Vue.js 官網(wǎng)可以查到的。這里我強(qiáng)調(diào)一下文檔的重要性，它是解決問題的和指南，遇到問題首先看文檔，看不明白再提問比較好，這也是一個(gè)思考以及自我解決問題能力的一個(gè)途徑。下面是我整理的一些常見問題，需要我會(huì)補(bǔ)充的常見問題。1.課程源代碼在哪？當(dāng)?shù)膶W(xué)習(xí)進(jìn)度超過 40%的時(shí)候，可以在課程主頁(yè)的“同學(xué) tab”

2、完整的代碼。（記住一定要超過 40%的進(jìn)度喔）2.老師的課程是 Vue.js 1.0 開發(fā)的，我用 Vue-cli 默認(rèn)安裝是Vue.js 2.0 版本，我如何安裝 Vue.js 1.0 版本的項(xiàng)目？由于 Vue.js 現(xiàn)在主推的是 2.0，所以 Vue-cli 腳手架也升級(jí)為默認(rèn)安裝 2.0 版本的Vue.js 項(xiàng)目。但是可以指定版本安裝，在控制臺(tái)執(zhí)行如下：vue init wck#1.0 projectname其中，projectname 是項(xiàng)目名稱，可以是任意合法的字符串。3.我可以直接用 Vue.js 2.0 開發(fā)本課程嗎？當(dāng)然可以，但前提是你已經(jīng)對(duì) Vue.js 的基礎(chǔ)有所掌握，并且

3、熟知 1.0-2.0 的變化，這些在官網(wǎng)上都可以查到的資料。我也很鼓勵(lì)這種做法，畢竟課程教授的學(xué)習(xí)的方法和思路。但是，對(duì)于一些新手同學(xué)，我還是建議安裝 1.0 版本的 Vue.js，跟著一步步先敲代碼，避免一開始就掉坑里。用 1.0 實(shí)現(xiàn)一遍后，再嘗試用Vue.js 2.0 開發(fā)本課程。另外，需要強(qiáng)調(diào)一下，如果使用 Vue.js 2.0 那么 Vue-router 也需要用 2.0 的，具體使用方法參考文檔。4.我通過 npm run dev 運(yùn)行項(xiàng)目的時(shí)候，出現(xiàn)了如下報(bào)錯(cuò)，提示找不到 stylus 模塊。通常出現(xiàn)這個(gè)問題的原因是 npm 版本過低，安裝的 stylus-loader 的時(shí)候未

4、能正常安裝它的依賴 stylus。解決辦法首先升級(jí)一下 npm 版本，在當(dāng)前項(xiàng)目目錄下執(zhí)行如下命令：npm install g npm安裝新版本 npm 后，再執(zhí)行 npm install 重新安裝依賴。如果還不能成功，手動(dòng)單獨(dú)安裝 stylus 模塊，在當(dāng)前項(xiàng)目目錄下執(zhí)行如下命令：npm install stylus save-dev5.為何webstorm 已經(jīng)安裝了 stylus-loader 和 stylus，在.vue 文件里寫 stylus 還是會(huì)報(bào)語(yǔ)法錯(cuò)誤呢？解決方案：1. 安裝 webstorm 的 vue 插件：vue-for-idea。2. 升級(jí) webstorm 到(20

5、16)版本。6.為什么在 main.js 全局加載了 index.styl（包含 mixin.styl），在一些 Vue 組件里面還要 import mixin.styl 呢？確實(shí)需要在每個(gè)組件引入依賴的 mixin.styl 文件，因?yàn)閏k 是單文件編譯w的。在 wck 的編譯過程中，由 vue-loader 處理 vue 文件，vue 文件在處理stylus 編譯的時(shí)候，遇到了使用 mixin 的地方，但這個(gè)時(shí)候它并不會(huì)知道“全局”依賴了 mixin.styl，它需要能給根據(jù)依賴的文件去查找是否定義了這個(gè) mixin，然后把對(duì)應(yīng)的代碼替換到當(dāng)前 stylus 文件里。7.為何better-

6、scroll 不能滾動(dòng)？better-scroll 的滾動(dòng)原理，dom 結(jié)構(gòu)至少需要 2 層。外層容器需要有固定的大小（寬度或高度），作為視口；內(nèi)層容器的大小是由內(nèi)容撐開的，當(dāng)內(nèi)層高度或?qū)挾瘸^外層視，才會(huì)產(chǎn)生滾動(dòng)。所以首先需要檢查內(nèi)外層的尺寸，其次是在 Vue.js 里，改變數(shù)據(jù)，dom 并不會(huì)立刻改變，通常會(huì)在下一個(gè) Event Loop，通常說的 nextTick 去更新。而我們的 better-scroll 是依賴 dom 的。所以，當(dāng)數(shù)據(jù)變化的 dom 和 better-scroll相關(guān)的時(shí)候通常需要在 vm.$nextTick 的回調(diào)函數(shù)里初始化或者刷新 better-scroll

7、。8.項(xiàng)目打包編譯后如何發(fā)布呢，后端必須是 node.js 嗎？項(xiàng)目打包編譯后會(huì)生成一個(gè) dist 目錄，dist 目錄包含上線所需的靜態(tài)資源文件。上線其實(shí)就是發(fā)布這個(gè)靜態(tài)資源目錄， 可以發(fā)布到 cdn 源站（ 需要配置publicPath靜態(tài)資源的 cdn路徑前綴），也可以發(fā)布到普通的后端服務(wù)器。后端可以是任何語(yǔ)言，課程之所以用 node.js 是方便本地調(diào)試。本課程是前后端分離的，前端與后端的交互僅僅是通過 ajax 請(qǐng)求去拿商家和商品的一些數(shù)據(jù)，這個(gè) ajax 后端的實(shí)現(xiàn)任何語(yǔ)言都可以。9.css 編譯不正確 只有-ms 廠商的前綴，如 display:flex 編譯后只有 display:-ms-flexbox這個(gè)問題其實(shí)是使用 Vue.js 2.0 開發(fā)，用 2.0 開發(fā)會(huì)有很多和不一樣的地方，大部分問題都可以通過查閱文檔解決，這個(gè)問題比較偏。解決方案如下：在 wvue: ck.base.conf.js 加上如下配置：loaders: utils.cssLoaders(),tcss: require(autoprefixer)(browsers: last 2 vers, Android = 4.0)10.我希望用2.0 實(shí)現(xiàn)本課程，但全部自己實(shí)現(xiàn)還是有些，希望老師能指導(dǎo)一下，另外也希望介紹 Vuex 相