一，創(chuàng)建項目
使用 **npm** 安裝 **vue-cli 3 **和**typescript**
npm i -g @vue/cli typescript
使用**vue create**命令快速搭建新項目的腳手架
vue create typescript-vue
typescript-vue 是我的項目名稱，執(zhí)行上面的命令后，出現(xiàn)如下選項
這里有兩個選項可以選擇，鍵盤上下鍵可以切換選項，按enter進(jìn)入下一步。這兩個分別表示：
-
default是默認(rèn)選項，只會引用 `babel, eslint`` - ``manully select features`是手動選擇
這里要用到vue + typescript，所以選擇 manully select features 。
這里是多項選擇，按上/下鍵切換選項，空格鍵選擇該選項，enter鍵進(jìn)入下一步。你可以根據(jù)項目的實(shí)際情況，選擇相應(yīng)的選項。
這里我準(zhǔn)備做一個vue-ts學(xué)習(xí)筆記，后面還會繼續(xù)學(xué)習(xí)如何在TypeScript中使用 vuex 和router，所以選擇 Babel, Typescript, Router, Vuex, CSS Pre-processors, Linter/ Formatter 這幾項就可以了。
按enter，進(jìn)入下一步：
這里是詢問是否使用 class風(fēng)格的組件語法，為了更方便地使用 TypeScript，我們選擇 Y。
當(dāng)我們不知道選擇那個選項時，可以直接按enter，使用默認(rèn)選項。
按enter，進(jìn)入下一步：
這里是詢問是否使用 router 的 history模式，如果選擇是，在生產(chǎn)環(huán)境中，服務(wù)端需要為索引回退做適當(dāng)?shù)呐渲?。這個對我們的demo沒有影響，同樣按enter使用默認(rèn)選項。
按enter，進(jìn)入下一步：
這里是選擇CSS預(yù)處理器，可以自行選擇一種。
按enter，進(jìn)入下一步：
這里是選擇代碼檢查工具，我個人喜歡使用 ESLint + Prettier。因?yàn)?Prettier 不僅可以格式化js代碼，還可以格式化 css 和 vue模板文件中 template 部分的代碼。
按enter，進(jìn)入下一步：
這里是選擇什么時候進(jìn)行代碼格式化，選擇 Lint on save。
按enter，進(jìn)入下一步：
這里是詢問在什么地方配置 Babel，PostCSS, ESLint 等
-
In dedicated config files在專門的配置文件中 -
In package.json配置在package.json文件中
我們選擇 In dedicated config files ，
按enter，進(jìn)入下一步
這里是詢問：是否保存本次所選的配置，方便下次搭建項目時復(fù)用。
我們直接跳過，按enter，等待項目初始化完成就可以了。
