vue-cli 3 VUE腳手架項目搭建（詳解）

vue-cli 3 VUE腳手架

注： vue cli3 需要node8.9或者以上版本

vue-cli版本檢查

// 命令行
vue -V  // 查看當前版本
npm uninstall -g vue-cli  //卸載之前的
npm install -g @vue/cli   //安裝最新的

開始構建項目
vue create ‘項目名’ 回車創建

配置

• default 是默認配置
• Manually select features 是自己手動選擇
  （上下箭頭切換，回車確定）
  
  手動配置：
  需要什麼自己選擇（上下箭頭切換 空格選中 ）
• babel:轉換es6語法的這個必須要
• typescript 看自己需不需要用
• router管理路由的也選上
• vuex狀態管理就看自己需不需要用
• css pre樣式預處理器這個也加上
• linter/Formatter統一代碼風格
• 最後2個分別是單元測試和端對端測試。 示例選擇了幾個常用的 然後回車確認
  
  路由使用歷史模式嗎？
  路由模式分爲Hash模式 History(歷史)模式 Abstract模式 三種
  hash模式最明顯的特點就是url上會帶有#號， History歷史模式的url就跟正常的訪問地址一樣。
  示例不使用歷史模式，所以選的n
  選擇css預處理器 我選的less
  
  選擇語法檢測工具
• ESLint with error prevention only(只檢測錯誤)
• ESLint + Standard config 自帶linter和自動代碼糾正，沒有配置，自動格式化代碼，可在編碼早起發現規範問題和低級錯誤
• ESLint + Prettier 能統團隊的代碼風格

示例選擇 ESLint + Prettier

選擇語法檢查方式

• Lint on save (保存就檢測)
• Lint and fex on commit ( 用戶提交文件到git的時候檢測 )
  示例選擇 Lint on save
  
  babel,postcss,eslint配置文件存放位置
• in dedicated config files（在專用配置文件中，就是單獨管理）
• in package.json（放在package.json裏）
  示例選擇：in dedicated config files
  
  保存爲未來項目的預配置
  
  安裝成功
  yarn run serve啓動項目