Vue-cli + ESlint + TypeScript 笔记
最近萌芽开始试着用vue-cli，vue-cli默认安装eslint刚开始是给我整懵了，一行代码三行报错，不过对于萌芽这种强迫症来讲eslint简直一直报错一直爽！萌芽一直都很注重编码规范但是只是靠编码文档感觉还不够啊，周围也没前端小伙伴指导自从开启了eslint代码瞬间被整的整整齐齐，整洁哭了，连标点符号也给我整的干干净净的。
运行后才发现报错其实还是比较难受的，想在运行之前就发现代码问题vs code的小伙伴不如考虑一下这款插件
谁用谁知道。
vue-cli安装
npm i vue-cli -g全局安装vue-cli，执行这句话的前提是你有node环境以及npm工具。
vue init初始化，他会提示你一些东西，前面的是项目名之类的，之后可以一直回车跳过就是默认配置，这里只讲一下大概使用方法。
这里是项目结构，第一个暂时不提，说一些重要的。config是项目配置，node_modules是你用到的一些框架啊在package.json里配置的所有你项目依赖的东西。学了webpack的小伙伴应该都知道，这个东西一般不需要修改，特别大，可以删掉。反正只要 npm i 一下他就会自动监测到你项目中缺少什么依赖然后去下载，下载完的东西就会在node_modules中。然后就是我们的src文件啦～
- assets：图片什么的
- components：项目模版
- router：路由
- views：页面
- 默认App.vue是我们的初始页面（你可以在外面更改这个萌芽下次再讲）
- static：是引入的静态资源
- 最后的是测试文件。
第一坑萌芽就遇到了问题【vscode 保存 “App.vue”失败: 权限不足。选择 “以超级用户身份重试” 以超级用户身份重试】不得不说每次起步总要遇到点事儿，这个就很恶心了。最后萌芽查阅了一下度娘才知道原来在Mac下是权限问题。因为萌芽经常来回切换root和普通用户所以导致权限出现问题，解决方法也不难，只要chown -r一下你的项目文件夹把root权限更改成普通用户就可以啦。
chown -R [普通用户] [文件夹] 附带一下参考：https://www.tingno.com/archives/458
==================================================================================================
ESlint是默认安装的啦，这里萌芽是脚手架2所以启动方式是 【 npm run dev 】 脚手架3.0的启动方式为 【 npm run serve 】。
2019-12-14 更新学习笔记
咳咳，这篇博客居然拖更几个月！上面的内容都是8月份的时候写的现在都12月了顿时感觉老泪纵横。此时此刻萌芽已经不再是那个路由是啥都不知道的我了【捂脸】不过该来的还是要来的，废话不多说咱们继续！
TS作为以后前端标准化的一个趋势，帮助本来就是弱类型的JavaScript更加严谨！
vue-cli2 配置TypeScript
萌芽刚刚讲了萌芽是八月份的时候默认安装的脚手架2，所以这里使用的是2的方式配置，如果是3的话要更容易一些这里不多讲百度上有很多博客，附上萌芽这里参考的 配置教程：https://segmentfault.com/a/1190000011744210
具体如何配置萌芽在这里就不讲了大家可以点进去围观，萌芽在这里贴上自己的踩坑问题。别问我为什么不直接用脚手架3 因为萌芽是个懒蛋 qwq自己挖的坑就算再深也要填上。
关于报错
（还不是因为你懒得建个高版本）This relative module was not found:
* ./src/main.ts in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.ts
解决方式：没有安装完整的依赖，按照教程执行把依赖装了安装vue的官方插件 npm i vue-class-component vue-property-decorator --save // ts-loader typescript 必须安装，其他的相信你以后也会装上的 npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-devModule build failed: Error: You may be using an old version of webpack; please check you're using at least version 4
解决方式：强制降级【 npm install ts-loader@3 】
然后一大堆的ESlint警告各种语法问题，逐一解决掉就好了。
什么字符串必须单引号，额外的分号。比较坑爹的是萌芽的格式化代码的时候单引号会自动转换为双引号，没分号的地方也会自动补全分号这点刚好跟ESlint冲突有点坑爹。
普通的安装与使用
npm i typescript -g这里萌芽很省事儿的放全局里了，关于ts的话他的文件后缀为.ts，由于浏览器无法直接解析属于需要依赖刚刚装的环境，感觉有点像我们的css预处理器less啊。
比如说我们这里新建了一个 demo.ts 的文件夹，如果我们想使用他的话就需要通过tsc来编译他。
tsc demo.ts 最终他就会在统计目录下生成一个 demo.js 的js文件，怎么样很神奇吧？所以归根结底ts还是基于我们的ECMA标准来运行的，无需担心代码兼容问题！这些TS在编译的时候都会帮我们处理。
但是每次运行都需要tsc的话就很痛苦啊，。
初始化
tsc --init
初始化创建一个TS配置文件 tsconfig.json ，我们在这里去更改他的配置outDir代表生成的位置。
监控模式
tsc -w以监控模式运行TypeScript编译器，每当内容发生变化时会根据刚刚配置的位置自动改变文件内容，这样我们就不需要手动一次一次的编译文件啦～当然还有一种方式是在编译器里定义监控，萌芽在这里就不过多讲啦感兴趣可以去百度一下哟！
本来想把使用和安装配置写在一起但是坑有点多了萌芽决定分开写啦！
TypeScript使用方法
