使用Vue-cli3搭建Vue+TypeScript項目

一，建立項目

使用 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保存，就能夠自動修正全部報錯了。