vue項目學習記錄（一）

1. 初始化項目

1.1 環境配置

項目需要使用vue來進行開發，之前也沒怎麼接觸過，只能是邊學邊做。就以此記錄下學習過程，畢竟好記性不如爛筆頭。

vue全家桶：Vue2+vue-cli3 +Vuex+Vue Router+webpack+mock
數據交互： axios+mock
UI組件庫： Ant Design Vue

1.1.1 安裝環境

1.首先需要安裝node.js，官網地址：https://nodejs.org/zh-cn/download/。

2.使用npm淘寶鏡像，避免npm下載速度過慢的問題 npm install -g cnpm --registry=https://registry.npm.taobao.org

1.1.2 創建項目

vuecli文檔

• 安裝cli3
  cnpm install -g @vue/cli
  檢查版本：vue --version 如果輸出了版本號說明安裝成功。
  新建項目
  vue create name

• 選擇配置
  初次創建可選有默認和自定義，默認安裝babel,eslint,初次安裝建議選擇自定義 Manually select features；
  
  如果選擇默認選項 default，將會構建一個最基本的 vue 項目（沒有 vue-router 也沒有 vuex）
  看到下面界面後根據自己的需求進行選擇（上下切換，空格選中）模塊：
  

TypeScript 支持使用 TypeScript 書寫源碼
Progressive Web App (PWA) Support PWA漸進式網絡應用程序支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors支持 CSS 預處理器。
Linter / Formatter 支持代碼風格檢查和格式化。
Unit Testing 支持單元測試。
E2ETesting 支持 E2E 測試。

選好後回車進行下一步配置：
首先需要選擇路由模式，Y 是 history 模式，n 是 hash 模式；

學習可以先從 hash 模式入手，不過實際項目通常採用 history 模式。

默認的 hash 模式，該模式下會將路徑格式化爲 #! 開頭；

history模式沒有 # 前綴，而且可以使用 pushState 和 replaceState 來管理記錄。

然後選擇css預處理器，都不熟悉的話隨便選一個，Sass、Less都支持原生 CSS 寫法，可以很方便的把已完成的CSS代碼轉爲預處理器識別的代碼，Sass默認使用.sass擴展名，而Less默認使用.Less擴展名。

我選擇的CSS預處理：Less （如果選擇Sass/SCSS，需要本地預先安裝python）；

接下來選擇一種ESlint校驗規則：ESLint + Prettier；

再選擇格式化時機：保存時檢測 ， 還是 提交時檢測並修復 ；

再然後是單元測試方式：Jest

選擇一種E2E(端對端)測試方案：Cypress（只在Chrome瀏覽器上測試）

將以上配置存放到哪裏？In dedicated config files （單獨文件中）

是否將剛纔的配置保存爲preset（預設項，方便以後使用,下次創建項目時就會有默認、自定義和這個預設項，不用再這樣一步一步來）

給預設項起個名：

創建項目完成，系統會自動安裝項目並生成preset（預置項）。

然後進入項目

cd name

運行項目

npm run serve