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