1. Vue專案開發前的準備 首先下載node.js 下載git 開啟碼雲 建專案 然後拉下來 可以通過碼雲平臺幫助文件來建立ssh公匙 Vue-cli中的src檔案中是專案中所有的原始碼檔案

2. Vue的單檔案元件和路由 當一個檔案以.Vue為字尾時被稱為單檔案元件 組建的模板在template中 元件的邏輯在script中 元件的樣式在style中 路由就是根據地址不同返回內容不同

3. Vue中如果希望css樣式只對當前元件有效 需要在style標籤裡面加上scoped屬性 但是如果當前元件的子元件是外掛的話就不能更改外掛 的樣式了 這個時候可以用一個標籤加一個類名包裹著這個外掛 例如這個類名是wrapper 外掛的類名是 str 可以寫成.wrapper>>>.str{樣式} 三個箭頭代表樣式穿透 可以對當前元件的子元件更改樣式

4.                           iconfont圖示在元件中的使用
   

在元件中使用icon圖示 在icon官網 www.iconfont.cn 選圖示 下載 在資料夾中有css js iconfont.css.eot.svg.ttf.woff 是必須的 js以及其他的不是必須的 因為基本所有頁面都要用 所以在main.js中引用 在頁面中使用是在標籤中寫入class=‘iconfont’ 內容的話就開啟網站選擇剛才選擇 的圖示複製程式碼 注意在iconfont.css中修改下路徑 就是加上./自己定義的資料夾

5.                          Vue頁面中的輪播圖外掛
    
   

在Vue中上github搜尋vue-Awesome-swiper 這個外掛可以幫我們快速構建一個輪播圖 安裝的時候如果想要選擇版本就 npm install [email protected] --save

6. 設定寬高比例的寫法是 overflow:hidden width:100% height:0 padding-bottom:31.25% 這麼寫的意思就是高度永遠是寬度的31.25% 如果直接寫高度31.25%他這個相對的只是父級元素的31.25%

7.             專案初始化
   

如果用Vue寫移動端 在index.html在meta name=viewport裡面增加 minimum-scale=1.0,maximum-scale=1.0,er-scalable=no 這樣寫的目的是為了防止使用者用手指進行頁面的縮放 然後引入 reset.css 在main.js中引入 引入border.css 專門解決移動端1畫素邊框的問題

8. npm install fastclick --save 安裝fastclick這個第三方模組並引入 引入之後需要在下面寫fastClick.attach(document.body) 是為了解決移動端300毫秒點選事件延遲的問題

9.              在專案中使用stylus stylus類似sass
   

npm install stylus --save npm install stylus-loader --save 然後重新啟動專案 npm run start 如果一個樣式被頻繁引用 可以建立一個檔案 然後寫一個$變數名:樣式 例如：red 然後在需要的style樣式中引入 樣式中引如樣式需要用@import 路徑

10.              在專案中修改路徑簡寫
    

如果一個檔案被頻繁引用 想要給這個檔案起一個別名 就如同@=src 找到bulid下的webpack.base.conf.js目錄下找resolve 例如’styles’: resolve(‘src/assets/styles’) 如果報錯重新啟動npm ru

11. 在父元件中引入子元件 首先 import 名稱 from 路徑 然後註冊 最後在div模板中使用 <名稱></名稱>

12.            在組建中平鋪圖示 圖示超過一定數量可以實現輪播
    

首先把 swiper元件中的 swiper標籤 還有swiper-slide標籤包裹著圖示就可以了 但是如果直接迴圈資料 多餘的應該在第二頁的圖示會被隱藏起來的 可以用computed這個計算屬性把陣列中的資料進行拆分 例如 當前頁面只能存放八條資料 那就把陣列中的資料進行拆分成兩個 二維陣列 二維陣列的下標對應應該顯示在哪一頁 computed:{ pages (){ //首先定義一個空陣列 const pages = [] //然後迴圈遍歷iconList裡面的資料 其中item指每項資料 index指資料下標 this.iconList.forEach((item,index)=>{ //如果資料小於八條 那麼就都在第一頁 大於八的在第二頁 const page = Math.float(index/8) //假設iconList裡面有三個資料 index就是2 2/8就是0 就是第0頁 if(!pages[page]){ pages[page] = [] } pages[page].push[item] }) return pages } }

13. 每個元件都需要請求資料 不能每個子元件傳送一個 要在父元件中傳送一個 然後把資料傳給子元件 把靜態檔案放在static資料夾中才可以被訪問 可以直接在位址列中輸入路徑打印出static檔案中的內容 其他的資料夾下載入不出來 但是如果在開發環境下在ajax請求中寫上本地檔案的路徑 轉到生產環境下還需要把路徑換成/api/這樣是有風險的 所以可以通過Vue中的轉發機制 把所有對api的請求轉發給本地路徑static/mock資料夾中(這個資料夾是自定義的) 這樣在開發環境下就可以使用本地的靜態資源了 具體更改需要在 config>index.js>proxyTable:{ ‘/api’:{ target:‘http://localhost:8080’, paghRewrite:{ ‘^/api’:’/static/mock’ } } } 改動完配置項檔案需要重啟伺服器 獲取到資料後傳遞給子元件

14. 城市選擇頁面的路由配置 首先進入router檔案中配置路由路徑對應的路由 然後在想跳轉的區域外面套一個router-link to='路徑’因為這個路徑跟元件配置過了所以點選的時候都會跳到對應的 元件中 路由檔案中只要配置過的路由 在其他元件中都可以用

15. Vue中的mixins是為了複用元件 而產生的一個混合外掛

16. vue-loader 是可以將Vue檔案轉為js模組的 詳情可參考https://blog.csdn.net/weixin_38788947/article/details/76718402