專案開發中一些注意與問題小記

希望有興趣的一起加入一起更新。問題無大小，是問題就小記一下。希望大家一起分享問題，共同進步。

1. 在config檔案下的index.js中有webpack的一些配置
   如: useEslint: false 預設為true，設定可以先去除檢測開發，最後完成進可用npm run lint 自動整理 不能完全整理有的需要手動去處理。
   

2. 做移動端的頁面首先要準備一些配置：
   

1. 新增meta標籤並新增屬性name=‘viewport’ 一般腳手架會預設有，
   我們再完善補充一下：
   (在initial-scale=1.0 ，後加上 minimum-scale=1.0 , maximum-scale=1.0 , user-scalable=no )
   這樣配置是要求客戶手指放大縮小螢幕是無效的，讓頁面的比例始終是1：1 .
   
2. 一般情況下，如果沒有經過特殊處理，移動端瀏覽器在派發點選事件的時候，通常會出現300ms左右的延遲
   先命令列執行 npm install fastclick --save 再引入這個fastClick就可以解決這類問題
   再去繫結到document.body上: fastClick.attach(document.body) 這樣就正確的使用了click事件
   說明: --save：不管我們在開發環境或者是打包生成的線上程式碼都需要使用這個依賴
   
3. 重置統一化樣式(因為不同手機的瀏覽器中會有不一樣的樣式區別)

 - 可以藉助第三方的工具庫 包管理下載( npm install --save reset-css || npm install --save normalize.css ) 再全域性引入 <br>

4. 處理移動端1畫素邊框的問題意思是說有的手機螢幕分辯高可能是二倍或三倍屏, 這樣在頁面上寫border 1px 這樣寫的1px,實際上指的是css畫素但是到了二倍屏上去看實際上對應的就是不是一個物理畫素大小了，而是二個或三個物理畫素的大小了

- 專案中有個border.css這個檔案是一個整理好的檔案(用了transform-origin)專門處理這個問題

3. 建立一個專案的開始，可以先去碼雲賬號建立一個專案開始管理項透過公私鑰打通線上線下的介面，
   （碼雲賬號找到如何生成SSH公鑰 ）進入連結 檢視指令: window系統的操作如下:
   右鍵 git bash （相當進入linux 終端一樣,前提是已經安裝了git ）
   然後執行命令: ssh-keygen -t rsa -C "
   再回車+回車+回車 ： 再執行 ：cat ~/.ssh/id_rsa.pub 檢視到公鑰複製回碼雲賬號上去對接就可以了，
   再回到準備發的專案項中去克隆地址(:tanxuedong/PetShop.git)
   再回電腦上在準備開始的檔案目錄下 git bash 執行命令: git clone +剛複製的地址(:tanxuedong/PetShop.git)
   注意一下，這兒說的是ssh金鑰的方式拉取git專案管理，還有一種是直接克隆http:的地址，
   執行完後會在檔案目錄下多出碼雲賬號上剛建立好的專案檔案，
   可以連線好後就可以去下載Vue的腳手架建立專案工程了。
   確認好cli的依賴是否安裝好( 沒有的話執行：npm install --global vue-cli )
   在去準備專案檔案目錄下建立基於webpack打包的專案
   目錄下執行: vue init webpack my-project
   注意:my-project的意思是專案在放在的位置也是就準備好的專案資料夾名字
   然後就建立一個名字專案名字不可包含大寫字母,再選擇好配置如:(vue-router/Eslint/npm…)等等這樣就開始下載依賴了
   

4. git 分支的建立

• 先碼雲賬號專案中，新建分支名(見名之意命名如index-swiper 可做首頁輪播圖的分支)
• 也可以用命令 git branch 分支名 再git checkout 新分支名 ( git checkout -b 分支名 這是前二命令的合併)
• 這只是線上上建立了分支本地還沒有，所以再去本地專案的目錄下執行cmd。
  輸入git pull 會把線上的新建立分支拉到本地 ，
  再輸入git checkout 新分支名(index-swiper) 這樣本地所在的分支就是新建的分支上了，
  然後git status 可以檢視一下確定好就可以在這個分支上開發程式碼的了，
  

5. 提交程式碼的git操作:

• 
  git add . ：把本地的修改提交到本地的快取區
  再git commit -m 'project init ’ 意思就是說把本地快取區的內容提交到本地的倉庫中，-m的意思是這是一個project init的操作
  再git push 推送線上倉庫完成
  

6. 可以將瀏覽器切換成3G網速來除錯效果, 當網速變慢到3G頁面中的圖片等會被延遲載入使得頁面出現抖動效果:
   這樣就需要先將這個區域撐起來：給區域一個父元素，在給父元素一些如下樣式 :
   overflow hidden
   width 100%
   height 0
   padding-bottom 31.25% // 這兒的百分比是指圖片的寬高比
   background #eeeeee // 這兒是指圖片還沒出現時所顯示的背景顏色
   注意:一定在確認圖片統一一致的比例，不然導航的小圓點就會被擠出去
   

7. Vue中name的意思:
   1,當我們做遞迴元件的時候會用到
   2，當我們在頁面上想對某個頁面取消快取的時候( … )
   3,給元件一個name名可以在除錯工具中很容易理解
   

8. 對Vuex的總結: Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式. 採用 集中式 儲存管理應用 的所有元件的狀態，
   並以相應的規則保證狀態以一種 可預測的方式發生變化 把元件的共享狀態抽取出來，以一個全域性單例模式管理呢？
   在這種模式下，我們的元件樹構成了一個巨大的“檢視”，不管在樹的哪個位置，任何元件都能獲取狀態或者觸發行為！
   另外，透過定義和隔離狀態管理中的各種概念並強制遵守一定的規則，我們的程式碼將會變得更結構化且易維護。
   Vuex 是專門為 Vue.js 設計的狀態管理庫，以利用 Vue.js 的細粒度資料響應機制來進行高效的狀態更新。
   開始：每一個 Vuex 應用的核心就是 store（倉庫）。“store”基本上就是一個容器，它包含著你的應用中大部分的狀態 (state)。
   Vuex 和單純的全域性物件有以下兩點不同：
   1，Vuex 的狀態儲存是響應式的。當 Vue 元件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的元件也會相應地得到高效更新。
   2，你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。
   這樣使得我們可以方便地跟蹤每一個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地瞭解我們的應用。
   

9. 首頁輪播圖：藉助第三方輪播外掛( vue-awesome-swiper)
   

• 其中安裝注意 npm install vue-awesome-swiper@2.6.7 --save
  加入@2.6.7 這樣就是說指定安裝2.6.7版本 這樣做是因為老的版本會穩定一些
  

10. 圖示字型引入 iconfont的定義和使用 先去iconfont官網上註冊併發起一個專案。

• 官方圖示庫 -->選擇所需要的圖示加入購物車 --> 下載至本地 --> 在下載資料夾中
  選擇字型檔案( .woff/ .ttf / .svg / .eot ) 放入styles/iconfont資料夾中 + iconfont.css 放入styles中
  再去iconfont.css中檢視字型檔案的url設定修改一下(./iconfont/…)，
• 或者直接放到一個iconfont的檔案中，這樣可以不需要修改路徑，修改路徑只是為了專案包的統一性
• 如果命名不習慣用也可以去掉， 這樣檔案就整理好了，就可以去使用了 ，
  使用
• 1，先main.js入口檔案引入(import ‘styles/iconfont.css’)
• 2，  說明  就十六進位制的串 這個在購物車中可以複製過來
  

11. 像目錄層級使用比較多的路徑可以去統一取一個別名用來

• 如 styles代表靜態檔案目錄 和 預設配置@代表src目錄意思一樣，，
• webpack中alias 一般意思是別名配置 不同的框架有不同配置位置
• 找到build/webpack.base.conf.js檔案中，resolve: { … alias: { 中增加一個屬性 styles : resolve( ‘src/assets/styles’ ) } }

12. 像修改了webpack的配置項時要重新啟動執行專案

13. 路由就是根據網址的不同，返回不同的內容給使用者

14. router-view: 顯示的是當前路由地址所對應的內容