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了，至此项目基本配置完成