搭建一个vue-cli3+ts+element-ui的project

搭建一个vue-cli3+ts+element-ui的project

第一步：vue create mutiple-video-demo Enter进入下一步

第二步：select Manually select features Enter进入下一步

第三步：select Babel Typescript Router Vuex Css Pre-processors Linter/Formatter Enter进入下一步

关于为什么这样选择：
Babel：将ES6编译成ES5
TypeScript：JS超集，主要是类型检查
Router和Vuex，路由和状态管理
Linter/ Formatter：代码检查工具
CSS Pre-processors：css预编译

第四步：手动配置

1、TypeScript
是否使用class风格的组件语法，是
Use class-style component syntax?
2、是否使用babel做转义，是
Use Babel alongside TypeScript for auto-detected polyfills?
3、Router
路由使用历史模式，一般实际项目要使用history
Use history mode for router? (Requires proper server setup for index fallback in production)
4、CSS Pre-processors css预处理，我用的sass
Pick a CSS pre-processor (PostCSS， Autoprefixer and CSS Modules are supported by default)
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
5、Linter / Formatter 代码风格、格式校验，我用的tslint
TSLint
仅错误预防
ESLint with error prevention only
Airbnb配置
ESLint + Airbnb config
标准配置
ESLint + Standard config
Prettier配置（常用）
ESLint + Prettier
6、选择lint方式：Pick additional lint features，选择保存时检查
保存时检查
Lint on save
提交时检查
Lint and fix on commit
7、Unit Testing 单元测试，不使用
Mocha + Chai
Jest
8、选择 Babel，PostCSS， ESLint 等自定义配置的存放位置，在package.json里配置
In package.json
9、将此作为将来项目的预置吗？Yes，下次可以直接用
10、项目配置名称，设置配置名称为：admin

第五步：启动项目$ cd mutiple-video-demo $ npm run serve

第六步：安装element-ui

npm install element-ui -s
解决项目中eslint warning问题npm run lint --fix