vue-cli4+ts+vue3日記（一）創建專案

安裝cli4

根據官網進行安裝 https://cli.vuejs.org/zh/guide/installation.html
vue -V 查看版本號 確認安裝成功
Vue CLI v4.5.9

創建cli專案

1. 方案一命令創建

運行創建專案命令

vue create vue3-demo

• 第一步 選擇模板，鍵盤上下移動選擇第三專案Manually select features
  如果沒有 Default (Vue 3 Preview) ([Vue 3] babel, eslint) 需要更新

 ? Please pick a preset: (Use arrow keys)
> vue-cli-config ([Vue 3] dart-sass, babel, router, vuex, eslint)
  vue3-config ([Vue 3] typescript, eslint)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features   

• 第二步：選擇默認插件支持，鍵盤上下箭頭選擇TypeScript 使用空格選中

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

• 第三步：選中版本 鍵盤上下箭頭選中3.x回車

 - ? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
  2.x
 > 3.x (Preview)                                                                                                                             

• 第四步：是否需要支持類組件 vue3 可以不用，看個人 輸入 n 回車

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? (y/N)                                                                                                                                    

• 第五步：我沒有用到jsx所以不需要，看個人 輸入 n 回車

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)                                                                                                                                   

• 第六步：ESLint的配置，選擇第一默認項， 回車

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)                                                                                                                                                                                                                                                                 

• 第七步：Lint 的特性，選擇第一默認項， 回車

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit                                                                                                                                                                                                                                                                   

• 第八步：把組態檔放置單獨的檔案中還是放在package.json中，選擇第一默認項， 回車

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

• 第九步：是否保存當前配置，為以后的專案做準備，n， 回車
• 如果是y 輸入對應檔案名稱回車即可

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

2. 方案二可視化創建

• 第一步：打開終端，，，mac 不會 - -
  Win+R 輸入cmd

• 第二步：輸入 vue ui 打開可視化頁面 選擇中間的創建
  

• 第三步：選擇需要創建的檔案目錄

• 

• 第四步：選擇并輸入基本資訊 下一步
  

• 第五步：選擇手動配置
  

• 第六步：選擇ts

• 

• 第七步：選擇版本并創建專案，選擇不預設 隨意

•