Vue CLI3

• vue-cli 3 與 2 版本
  • vue-cli 3 是基於 webpack 4 打造，vue-cli 2 還是 webapck 3
  • vue-cli 3 的設計原則是“0配置”，移除的配置文件根目錄下的，build和config等目錄
  • vue-cli 3 提供了 vue ui 命令，提供了可視化配置，更加人性化
  • 移除了static文件夾，新增了public文件夾，並且index.html移動到public中

Vue CLI3初始化項目

1. vue create my-project
   • 初始化命令，據你用的文件名創建一個文件夾，存放之后項目的內容
   • 該名稱也會作為默認的項目名稱，但是不能包含大寫字母等

? Target directory C:\Users\Desktop\Note\my-project already exists. Pick an action: (Use arrow keys)
> Overwrite 覆蓋
  Merge 合並
  Cancel 取消

• 選擇配置方式
  • Overwrite 覆蓋
  • Merge 合並
  • Cancel 取消

? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

• 請選擇預設配置
  • default (babel, eslint)默認配置
  • Manually select features手動選擇特性

4. 選擇手動配置后，空格選中或取消

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

• Babel支持es6語法轉換（常用）
• TypeScript微軟提供的js超集
• Progressive Web App (PWA) Support漸進式的網頁應用程序
• Router路由
• Vuex狀態管理模式+庫
• CSS Pre-processorsCSS預處理器
• Linter / FormatterES6Lint檢測代碼規范
• Unit Testing支持單元測試
• E2E Testinge2e測試(end to end)

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

• 對應的配置是單獨生成文件還是放在package.json

6. ? Save this as a preset for future projects? (y/N)

• 要不要幫剛才的配置保存起來

7. ? Save preset as: mypreset

• 設置保存的名稱

目錄結構詳解

• node_modules是依賴的node工具包目錄
• public文件夾相當於腳手架2的static目錄
• src文件夾是源代碼
• .browserslistrc文件時游覽器相關支持情況
• .gitignore文件是Git上傳需要忽略的文件
• babel.config.js是ES語法轉換
• package.json是項目描述文件
• README.md是項目文檔

UI方面的配置

• 啟動配置服務器vue ui
• 可以在里面管理項目