一，創建項目
使用 npm 安裝 vue-cli 3 和typescript
npm i -g @vue/cli typescript 使用vue create命令快速搭建新項目的腳手架
vue create vue-ts vue-ts 是我們的項目名稱，執行上面的命令后，出現如下選項
這里是單項選擇，可以按上/下鍵切換選項，按enter進入下一步。這兩個選項分別表示：
default是默認選項，后面的babel,eslint表示只會引入這兩個Manully select features是手動選擇
因為我們要用到 Vue+TypeScript，所以選擇 Manully select features。
按enter，進入下一步：
這里是多項選擇，按上/下鍵切換選項，空格鍵選擇該選項，enter鍵進入下一步。你可以根據項目的實際情況，選擇相應的選項。
這里我准備做一個vue-ts學習筆記，后面還會繼續學習如何在TypeScript中使用 vuex 和router，所以選擇 Babel, Typescript, Router, Vuex, CSS Pre-processors, Linter/ Formatter 這幾項就可以了。
按enter，進入下一步：
這里是詢問是否使用 class風格的組件語法，為了更方便地使用 TypeScript，我們選擇 Y。
當我們不知道選擇那個選項時，可以直接按enter，使用默認選項。
按enter，進入下一步：
這里不太清楚是什么意思，直接跳過，按enter使用默認選項。
按enter，進入下一步：
這里是詢問是否使用 router 的 history模式，如果選擇是，在生產環境中，服務端需要為索引回退做適當的配置。這個對我們的 demo 沒有影響，同樣按enter使用默認選項。
按enter，進入下一步：
這里是選擇CSS預處理器，可以自行選擇一種。
按enter，進入下一步：
這里是選擇代碼檢查工具，我個人喜歡使用 ESLint + Prettier。因為 Prettier 不僅可以格式化js代碼，還可以格式化 css 和 vue模板文件中 template 部分的代碼。
按enter，進入下一步：
這里是選擇什么時候進行代碼格式化，選擇 Lint on save。
按enter，進入下一步：
這里是詢問在什么地方配置 Babel，PostCSS, ESLint 等
In dedicated config files在專門的配置文件中In package.json配置在package.json文件中
我們選擇 In dedicated config files ，
按enter，進入下一步
這里是詢問：是否保存本次所選的配置，方便下次搭建項目時復用。
我們直接跳過，按enter，等待項目初始化完成就可以了。
二，配置 .prettierrc
代碼檢查工具選擇ESLint + Prettier時，ESLint與Prettier相沖突的配置項會被關閉，采用的是Prettier的配置項。這個文檔，列出了ESLint與Prettier沖突的配置項。
由於個人習慣於 使用單引號字符串 和 句尾無分號，但是Prettier會將字符串格式化為雙引號，並在句尾自動添加分號，因此需要單獨配置。配置方法也很簡單：
在項目根目錄下（與 package.json 同級目錄）創建一個 .prettierrc.js文件，並加上以下配置就可以了：
修改.eslintrc.js文件，加上這行代碼就可以了：
現在我們來看一下是否配置成功了。先打開 sr/main.ts：
可以看到，雙引號字符串 和 句尾的分號 都報錯了，這時只需按ctr + s保存，就可以自動修正所有報錯了。
