1.多頁應(yīng)用:
頁面跳轉(zhuǎn)的時候服務(wù)器都會返回HTML文件舞骆,只經(jīng)歷一個http請求
優(yōu)點:首屏?xí)r間快惜颇,SEO效果好
缺點:頁面切換慢
2.單頁應(yīng)用:
頁面跳轉(zhuǎn)通過js渲染竟块,不會刷新(不經(jīng)過http請求)
優(yōu)點:頁面切換快
缺點:首屏?xí)r間慢缸逃,seo差
3.reset.css解決不同手機(jī)樣式顯示不一樣問題
4.border.css解決移動端像素問題
5.npm install fastclick -s 解決移動端click事件300ms延遲:
在main.js中import fastclick from 'fastclick'
fastclick.attach(document.body)
6.iconfont圖標(biāo)庫针饥,把需要的圖標(biāo)添加到購物車,之后添加到iconfont里的項目中需频,通過壓縮包下載到本地項目丁眼。壓縮包里包含很多文件,只需要后綴名為eog,svg,ttf,woff,css這幾個文件
通過復(fù)制圖標(biāo)代碼的方式將圖標(biāo)放到頁面上昭殉,注意類名改成iconfont苞七,在iconfont.css修改路徑
如果添加了新的圖標(biāo),需要重新替換這五個文件挪丢?
7.修改了webpack配置項一定要重啟服務(wù)器 不然vue會報錯
8.build的webpack.base.config.js文件的alias可以為指定目錄自己定義名字蹂风,如@代表src
9.在碼云創(chuàng)建新分支
本地命令行:git pull 拉取新分支到本地
git checkout 新分支名 切換到新分支
git status? 能查看分支狀態(tài)
注意:開發(fā)的時候不要在主分支開發(fā)!G睢;葑摹!
git pull <遠(yuǎn)程庫名> <遠(yuǎn)程分支名>:<本地分支名> 表示從遠(yuǎn)程庫中獲取某個分支的更新,再與本地指定的分支進(jìn)行自動merge撵渡。
在自己的分支寫好后合并到主分支:
先git add .
git commit -m '解釋內(nèi)容'
git push? 這一步是把自己本地的分支提交到線上自己的分支但沒合并到主分支
git checkout master? 切換到主分支
git fetch --all 先拉取到本地
git merge origin/自己分支名? get merge表示合并指定分支(自己的)到當(dāng)前分支(master)
git push 將主分支推到線上
10.使用輪播圖也有第三方庫:vue-awesome-swiper 去github里找
11.scoped表示樣式模塊化融柬,在里面定義的樣式只對當(dāng)前組件有效趋距。如果當(dāng)前組件運用到了全局的樣式粒氧,需要用>>>來表示樣式穿透?节腐?外盯?
12.設(shè)置元素的寬高比:將元素高度設(shè)為0,通過padding-bottom的百分比(針對父元素的寬度)設(shè)置高度铜跑,比如每個元素的 width 是 25%门怪,現(xiàn)在想讓元素的高度始終保持為其寬度的兩倍,則 padding-bottom 的值應(yīng)該設(shè)置為 50%锅纺。
13.pages=[[],[],[]],利用二維數(shù)組掷空,根據(jù)數(shù)據(jù)自動地構(gòu)建輪播圖頁碼,可以實現(xiàn)多頁切換輪播圖的效果
14.
text-overflow:ellipse
overflow:hidden
white-space:nowrap
這三行樣式實現(xiàn)溢出文本顯示省略號效果囤锉,如果出現(xiàn)不了省略號可以考慮加個min-width:0
15.在.gitignore定義的文件不會被提交到本地和線上的倉庫
16.使用proxy封裝請求api坦弟,請求到本地static目錄下的mock文件夾:在config的index.js中,找到proxyTable這個配置項
(請求后端服務(wù)器接口也在這里改)
proxyTable: {
'/api':{
? target:'http://localhost:8080',
? pathRewrite:{
? '^/api':'/static/mock'
? ? }
? }
? }
17.第三方庫better-scroll:github有
用法:
npm i better-scroll -s
import Bscroll from 'better-scroll'
調(diào)用mounted聲明周期函數(shù)官地,頁面加載完成之后可以使頁面手動滑動
mounted(){
? ? ? this.scroll = new Bscroll(this.$refs.wrapper) //要取到最外層(包裹層)的dom元素
? ? }
18.函數(shù)節(jié)流:
由于滾動事件非常頻繁酿傍,稍微滾動一下就會觸發(fā)許多次,如果頻繁觸發(fā)的滾動驱入,每一次都去檢查是否到頁面底部了再次造成了浪費赤炒。
于是設(shè)置一個開關(guān),一次只能有一個觸發(fā)執(zhí)行亏较,并對執(zhí)行設(shè)置計時一段時間再執(zhí)行莺褒,執(zhí)行完畢之后再解鎖。這就是函數(shù)節(jié)流雪情。(設(shè)置timer遵岩,clearTimeout(timer),setTimeout(()=>{要計算的東西},間隔時間)
19.對于不同組件之間的通信,如果是兄弟組件巡通,有共同的父組件尘执,可以通過傳給父組件再傳給子組件的方式通信。但如果是沒有共同父組件的組件之間的通信宴凉,就需要用到vuex誊锭。總線模式也可以但比較麻煩
20.vue全局事件的解綁:在某個組件使用了window.addEventListener,所有組件都會監(jiān)聽到弥锄,這就需要在這個組件解綁全局事件:window.removeEventListener(在生命周期鉤子中炉旷,如deactivated)
21.組件name的用法:
1.遞歸組件時自己組件的名字用的就是name
2.頁面取消緩存如keep-alive include/exclude=“name”
3.vue devtools中的組件名字也是name
22.動畫過渡失效签孔?在detail-animation分支
23.更改webpack,使本地ip地址能訪問網(wǎng)站:在package.json中dev增加一句:--host 0.0.0.0
手機(jī)和電腦在同一個局域網(wǎng)手機(jī)就可以訪問(真機(jī)調(diào)試)
24.解決手機(jī)兼容性問題:
安裝第三方包:npm i babel-polyfill -s
在main.js引入 import 'babel-polyfill'
25.項目打包上線:
npm run build
生成的dist文件夾就是要上線的內(nèi)容窘行,給后端放到服務(wù)器上(后端的根目錄)
如果要修改后端運行的目錄饥追,要找到config文件夾下的index.js文件,找到build罐盔,修改assetsPublicPath即可(默認(rèn)是后端根路徑)
修改過的文件記得重新打包