vue 的火熱程度毋庸置疑，vue3.0+typescript更是將vue玩出新高度。讓編碼變得更加規範化；

什麼是typeScript？
TypeScript 是 JavaScript 的一個超集，主要提供了型別系統和對 ES6 的支援 ；
這裡不多做詳解，感興趣的同學可閱讀文件：https://ts.xcatliu.com/basics；

廢話不多說，下面開始擼碼；先附上vue3.0文件https://cli.vuejs.org/zh/guide/

安裝Vue CLI腳手架

Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經全域性安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 解除安裝它。

 
npm install -g @vue/cli
 
# OR
 
yarn global add @vue/cli
 
 
 
安裝完成後可通過
 
vue -V
 
檢視版本

構建專案

vue create vue-ts

你會被提示選取一個 preset。你可以選預設的包含了基本的 Babel + ESLint 設定的 preset，也可以選“手動選擇特性”來選取需要的特性。預設是沒有ts，所以我們要選擇第二個來自定義我們所需要的；

 
? Please pick a preset:
 
default (babel, eslint) //預設配置
 
> Manually select
 
 features //手動選擇

接下來就是選擇我們所需的選項來生成專案，使用 空格鍵 選中

 
? Check the features needed for your project:
 
(*) Babel // javascript轉譯器
 
(*) TypeScript // 使用 TypeScript 書寫原始碼
 
( ) Progressive Web App (PWA) Support // 漸進式WEB應用
 
(*) Router // 使用vue-router
 
(*) Vuex // 使用vuex
 
(*) CSS Pre-processors // 使用css前處理器
 
>(*) Linter / Formatter //
 
 程式碼規範標準
 
( ) Unit Testing // 單元測試
 
( ) E2E Testing // e2e測試

是否使用Class風格裝飾器？

即原本是：home = new Vue()建立vue例項
使用裝飾器後：class home extends Vue{}

? Use class-style component syntax? (Y/n) N

使用Babel與TypeScript一起用於自動檢測的填充

 
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
 
 
 
lls, transpiling JSX)? (Y/n) Y

路由模式

 
? Use history mode for router? (Requires proper server setup for index fallback
 
 
 
in production) (Y/n) Y

我選擇Sass/SCSS (with dart-sass)

 
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
 
 
 
by default): (Use arrow keys)
 
> Sass/SCSS (with dart-sass) // 儲存後編譯
 
Sass/SCSS (with node-sass) // 實時編譯
 
Less
 
Stylus

選擇 程式碼格式化檢測 因為是用typescript 所以選擇 TSLint

 
? Pick a linter / formatter config: (Use arrow keys)
 
> TSLint // typescript格式驗證工具
 
ESLint with error prevention only // 只進行報錯提醒
 
ESLint + Airbnb config // 不嚴謹模式
 
ESLint + Standard config // 正常模式
 
ESLint + Prettier // 嚴格模式

程式碼檢查方式 儲存檢查

 
> to invert selection)
 
>(*) Lint on save
 
( ) Lint and fix on commit

檔案配置，我選擇配置在獨立的檔案中

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

儲存上述配置，儲存後下一次可直接根據上述配置生成專案，這裡我就不儲存了，有需要的同學可自行儲存

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

OK，等待專案載入各種包...

載入完畢

 
$ cd vue-ts
 
$ npm run serve

這時我們的專案就已經生成並啟動完成；預設是localhost:8080

看下專案目錄結構

跟vue2.0相似又不大一樣，有些同學會疑惑webpack配置哪去了？

vue自己封裝了對應的webpack配置，那如果想要修改配置該怎麼辦，可自己新增配置檔案，這裡亦不做詳解，

可參考文件https://cli.vuejs.org/zh/config