ts + vue之起步配置

1.創建文件

vue create xxxx

2.選擇配置

? 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測試

3.幾個true/false看自己判斷，我都點了true，然後幾個參考的

// 預處理器
? 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

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

// 代碼檢查方式
? Pick additional lint features: (Press <space> to select, <a>
to toggle all, <i> to invert selection)
❯◉ Lint on save             // 保存檢查
 ◯ Lint and fix on commit   // commit時fix

// 文件配置
? Where do you prefer placing config for Babel, ESLint, etc.? (
Use arrow keys)
❯ In dedicated config files // 配置在獨立的文件中
  In package.json

全部配置可以看這篇文章 ，鏈接：https://juejin.im/post/5e1bb2cb518825267f69964c

4.接下來在項目文件夾裏終端cnpm install下載包，就可以跑起來了

5.然後下個保證團隊格式統一的插件prettier，打開setting.json

"editor.tabSize": 4, //全部4縮進
"prettier.tabWidth": 4, //prettier設爲4縮進
"editor.formatOnSave": true, // 保存時格式化

6.然後有個tslint的warning手動修正麻煩的問題

• 全局下載ts和tslint

cnpm install tslint typescript -g 

• 運行前使用tslint指令一次全部修復

tslint --fix -c ./tslint.json 'src/**/*{.ts,.tsx}'

這時運行就ok了，至此項目基本配置完成