1. 用Velocity.js 實現JS動畫
2. Vue 開發環境準備以及腳手架搭建
3. Vs code 的 ESLint 配置
4. 多頁應用與單頁應用區別
5. 防止圖片沒載入完後續內容受到抖動的影響

用Velocity.js 實現JS動畫

1.用Velocity.js 實現JS動畫

Transition 元件上繫結一個事件
繫結一個函式
動畫即將顯示之前：@before-enter="handleBeforeEnter" 引數 ： el  當前元素節點
動畫顯示過程：@enter 繫結一個函式 引數：el  done done函式在動畫結束後呼叫
動畫顯示後：@after-enter 繫結一個函式  引數：el
動畫離開鉤子  @before-leave  @leave @after-leave 同理
 

2.Vue 中多個元素或元件的過渡
用transition包裹多個元件，
可以使用mode="in-out"/out-in 代表切換的元素是先進入，之前的元素後退出，還是之前的元素先退出，切換的的元素後進入。

3.transition-group 元件包裹其他列表元件 可以實現列表的過濾
4.動畫元件的封裝

Vue開發環境準備

1、nodeJS、npm
2、開發碼雲倉庫
3、繫結SSH key 公鑰

ssh-keygen -t rsa -C "[email protected]"  
cat ~/.ssh/id_rsa.pub

npm install -g vue-cli

npm init webpack 資料夾

回車輸入y/n
最後安裝的時間可能會比較長
 
cd 資料夾  
啟動  npm run dev
瀏覽器輸入 localhost:8080 
 

6、建立開發分支，建立個人分支 步驟可查閱部落格中git分支流程總結
7、.gitignore 忽視程式碼檔案 可以把我不想要傳上去的git檔案放入這個資料夾裡
static 目錄放入的一些靜態資源img或者是模擬的JSON資料
node_modules 第三方依賴的包
src 整個專案的原始碼

vscode程式碼儲存時自動格式化成ESLint風格（支援VUE）

來自 <http://www.ptbird.cn/vscode-autosave-eslint-support-vue.html>

如果你們覺得eslint的很多提示干擾你們的開發，可以關掉，config/index.js第25行，改成false

多頁應用與單頁應用

多頁應用：頁面跳轉-返回HTML
優點：首屏時間快，SEO效果好
缺點：多個頁面之間來回切換慢 因為會建立多個http請求

單頁應用：vue中使用router-link標籤跳轉 react中使用 Link 標籤跳轉
頁面跳轉-JS渲染
優點：多個頁面之間切換快
缺點：首屏時間稍慢，SEO差

專案程式碼檔案的初始化

在main.js檔案或index.html 檔案裡引入

1. 引用重置樣式表

2. 引入移動端1px邊框的相容樣式表

3. 引入移動端點選事件300毫秒延遲相容JS npm install fastclick --save --save意思儲存在開發環境和生產環境中都能使用

4. 註冊 iconfont ，建立自己專案圖示庫

5. 安裝stylus npm install stylus --save-dev npm install stylus-loader --save-dev思想與less 和sass 差不多

6. stylus: 元件裡的樣式限制，不會汙染其他元件樣式 <style lang="stylus" scoped>

7. 根 html font-size：12px 其餘不設定字型為14px 即 1.2rem

給常用的目錄設定別名 修改完要重啟

@ 等src目錄 styles 等於src下的styles目錄

注意：在css中用@import引入其他的css檔案，如果都使用了@ 或其他別名 符號，那麼在後者引用的@的前面加上 ~線

如：@import '[email protected]/assets/styles/xxx.css'
@import '~styles/assets/styles/xxx.css 等

8. 安裝 vue-awesome-swiper 第三方輪播外掛npm install [email protected] --save 並在main.js 中引入它

防止圖片沒載入完後續內容受到抖動的影響

可以在圖片外層加一個div 新增如下樣式

{
	overflow：hidden;
	width：100%;
	height：0;
	padding-bottom：圖片的 寬/高 百分比;
}

這樣在圖片沒有載入完成之前它還是佔據了一定的空間
就可以防止後續的內容發生突然抖動下滑的體驗