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配置，那如果想要修改配置該怎么辦，可自己添加配置文件，這里亦不做詳解，