- 41.2vuecli框架：快速选取，Babel，vuex,router，css-process，eslint,pretter搭建。
- 42.3editor.config.js:配置vs的编写规范，+拓展安装
- 42.4pretter：pretter配置风格化规范，+命令行添加指令，+拓展安装
- 42.5eslint兼容：认识兼容插件，兼容插件配置插件。+手动配置
- 42.6~7GitHub本地提交commit规范msg
- 42.8vue.config.js配置三种配置方式+配置别名
- 42.9~10配置router和vuex
typescript类和接口
- 38.3~4类的定义和继承：类是一个包含了构造函数在内的超级构造器，更简单易懂，注意构造器内的所有属性均要赋值，定义类时直接赋值，通过构造函数在构造对象时传入赋值，继承：一个类可以继承另外一个类的所有属性，super可以使用本类的构造函数获取传入的值给父类的属性赋值。
- 38.5多态：多个子类均继承同一个类，把这个父类作为输入要求的变量类型，就不需要写多个子类作为联合变量类型。
- 38.6三种属性修饰:public子类可以通过父类进行访问，protect，只能通过子类暴露的接口进行访问，private，只能通过父类暴露接口进行访问。
- 38.7readonly修饰属性：只能在初始化时写入，不可改写，但是可以改写其内部的属性
- 38.8访问器：对于private属性，不用单独写对应的访问函数，用访问器 set name 或者get name 就可以在对象中直接访问了，无需调用函数，static静态属性访问器，通过对属性添加static修饰，直接通过类对属性进行访问，无需通过对象实例进行访问
- 38.9抽象类：当一个函数要根据不同传入值进行不同调用时，会变得很复杂需要大量判断语句，为此我们可以把每一种情况抽象成一个单独的类，并在各类里面写出自身的实现函数，然后原先的主函数就作为一个集合他们的功能接口，返回他们各自的实现函数，这里再用多态，规定主函数的输入变量类型，就可以避免不符合规定的传入，但是还是无法避免传入一个新的用多态中的父级类构造的对象，而类不能没有函数（否则报错），但有函数就可以new一个不报错的对象（函数内部没有实现，所以不会报错但也没有结果）（我们不想这样，对于非法输入要能检测到报错），就用抽象函数代替abstract，也把父级类写为抽象类，来避免这种情况（抽象类不能new实例对象）
- 38.10类做对象类型：用类构造对象，对象的类型就该类，反之把类型设置为某个类，就需要满足类构造对象时的要求
- 38.11对象类型，和声明变量类型一样，可以对对象内部的各个属性进行类型声明这就是对象类型声明，有两种办法类型别名或者interface {}里面的属性和对象一致，但是跟的是变量类型，string等，类似类，这种声明叫做接口
- 对于函数类型：函数类型使用类型别名type写法而非interface写法。
- 38.13：对于多个接口，接口可以通过继承的办法来合并，也可以通过运算符&&来合并，
- 39.1接口实现：针对类而言，要想只限制实现某一方法的类传入，就可以通过接口实现，对传入对象的需求是一个类，然后把一个新的不满足实现的类和标准类相实现，添加入该标准类的实现，就可以了，这样就不必继承保证类的所以参数，只满足特定的实现，但也可以传入。只调用swimming的函数，传入对象不一定是鱼类，或者鱼类的子类，只要会游就可以了，人向鱼学习（实现一下，添加swimming函数）游泳，一样可以传入。
- 39.2type和interface对比：除非是联合类型或者函数，推荐使用interface，interface可以在原有类型别名的基础上再写入，不会导致报错。
- 39.3擦除，使用类作为对象类型时，若手动新建的对象（非类构造）所含属性多余类，报错，但是该对象再付给用同样类做对象类型的新对象时，不报错，因为对该新对象而言检测方式是，只能多，不能少。抹去多余的在检测，检测完毕加回来
- 39.4枚举类型，字面量类型之前可以通过类型别名写在一起，但是在函数内部却需要判断来调用，枚举类型，可以通过链式调用来使用，
- 39.5泛型：之前我们是要求传入的类型，现在我们是要求传入传入变量的类型，若未写明，也会自动推导，当然也可以传入不同的变量类型，提前用不同字母占位即可
- 39.6接口在泛型的运用：接口中可以不写明类型而写占位符，然后根据传入数据自动推导，当然也可以输入时写明
- 39.7泛型现在：虽然泛型有很多好处，比如泛型可以获取更精确的变量类型，但是泛型缺乏约束，不去之前写好要求的情况，要求主动传入类型，可能导致传入一些不符合的变量，T本质上也是一个类型别名，可以让其继承某一变量别名从而进行限制。
- 39.8模块化和命名空间：模块化和命名空间都是为了避免命名冲突的问题，事实上模块化可能使用得更多一些。命名空间是2014typescript推出的而es5在2015年引入了模块化
- 39.9typescript声明规则，规则就是都要声明，来源于内部typescript安装自带声明，外部包安装自带声明，和自己写的声明
- 39.10声明其他类型:在typescript中，万物皆需声明，所以.d.ts文件中可以对对象，空间，类，函数，等一系列未声明的数据进行声明，然后就可以使用了。
typescript函数详解
断言与非空断言与可选链
[collapse title="断言"]主动声明变量位某一类型，可用于强制转化数据类型[/collapse]
[collapse title="非空断言"]主动声明某一变量为非空，防止编辑报错，但无法解决实际逻辑问题
此处声明ID为非空变量避免传入unknown导致的bao'c[block]
printID(ID?:string){
console.log(ID!.longth)
}
printID()
[/block][/collapse]
[collapse title="可选链式调用"]顾名思义在链式调用时通过？标注可能存在的属性，最底层可以忽略可选类型的存在与否，而直接调用，比如此处的type[block]
type person = {
name:
friend?:{
name:
hobby:{
type?：
}
}
}
const printmsg(human:person){
console.log(human.frind?.hobby.type)
}
[/block][/collapse]
[collapse title="？？和！！"]！！用于转化非Boolean类型为Boolean，？？用于设置默认值[block]
[/block]
[/collapse]
[collapse title="字面变量"]不给变量标志类型，时赋的值就是变量的类型，且必须和所赋值相同（意味着如果是字面量赋值，你是不可以随意更改的）字面量类型是多个组合起来，形成特地的可选输入功能，所以输入时，输入的变量要和要求的字面量一致，（如果不一致操他妈，汉字屌用没有太不精确了！）但是默认推断不会是字面量，所以要么精确设置变量类型要么就缩写变量类型。
[/collapse]
[collapse title="函数类型"]函数也是变量也有类型，无参的函数基本类型是()=>{}（括号中形参不可省略，否则会认为是any类型）[/collapse]
[collapse title="可选参数，默认参数，剩余参数"]可选参数，必须放在最后，且必须输入undefine,默认参数最好放最后，必须输入unknown，剩余参数前面加...老表示可以传入任意多个数，必须放最后[/collapse]
- 38.1函数重载：对于联合类型 ID：string | number 在对此类变量进行加减操作的函数，需要类型缩小和类型判断过于麻烦，所以函数重载，先多次定义函数的输入的具体变量类型，string和string，number和number，然后再二次定义函数，不过此时放宽对变量类型的要求，就实现了和联合类型一样的效果，并且函数内部会自动根据输入进行运算，避免无法提前推断变量具体类型导致的错误。
typescript起步
ke去哪里学习typescript？
最好去官网网站看文档，避免版本和翻译错误
typescript的使用环境？
使用tsc编译为js文件，或安装node包直接在node环境运行（一切依赖于js和v8引擎）
typescript基础类型
包含number，string，布尔，object。
- 数组：一个数组只包含一类元素；元组对应可以包含指定的任意一种元素，如果可以之前知道输入的元素类型推荐使用元组tuple而非any数组
typescript进阶类型
[collapse title="1.any"]any类型为主动不确定是什么类型，即保存原本js的特性[/collapse]
[collapse title="2.unkno"]unknown和any一致，最大不同在于unknown只能赋值给同类型或any类型变量，目的是防止自己无法控制的unknown变量被滥用赋值导致报错[/collapse]
[collapse title="3.void"]老朋友，表示函数没有输入或返回值（一般写在输入括号后默认不写）[/collapse]
[collapse title="4.never"]和void表示无返回值用法一样，更多用来暴露目前不存在的问题，比如变量接收到绝不可能的赋值（never变量不可能被赋值）[/collapse]
[collapse title="5.tuple"]对比数组，可以包含多种类，但每个元素都需要在定义时说明所属类[/collapse]
typescript函数补充
[collapse title="返回值"]写不写都可以，因为typescript可以自动推断出类型[/collapse]
[collapse title="内部类型"]可以通过函数上下内容推断得出类型的可以选择不写[/collapse]
[collapse title="联合类型"]联合联系就是包含多种类型的一个变量，类似于any的缩水版[block]
const prinwtID = (id:string|number){
if( typeof id === 'string')
console.log(获取此id长度)
}
[/block][/collapse]
[collapse title="类型别名"]联合类型写太多不好看抽出来作为一个别名[block]
typename: string | number
typename = {
x : string
y : number
}
[/block]
[/collapse]
[collapse title="可选类型与unknown"]可选类型实质就是某类型和unknown类型的联合类型
不同的是第二种情况下必须至少输入unknown，第一种不输入是可以的[block]
printFoodName(water:?string){
const waterFirst = water
console.log(waterFirst)
}
printFoodName(water:string | unknown){
const waterFirst = water
console.log(waterFirst)
}
printFoodName(unknown)
[/block][/collapse]
学东西，重要的是使用
学习新知识的时候，尽管知道，但还是碍于舒适区，不敢尽快上手实际项目和制作，其实这时一个很大的错误，有三大危害。第一，一直系统地光看不学习，不实践，会给人一种直接掌握得很好的错觉。第二，比起自我感觉良好，更糟糕的是会有一种莫可名状的希望，觉得在自己看完xx系列书籍，xx教程后，事情就会有阶段性的进展，甚至成功。然而这些视频和书籍动辄两三百集数百小时起步，7，800页入门。而且往往是越好的书籍越是厚，视频越是长，这是因为他们包含了全部细枝末节的知识，同时也是他们被称之为好书而广为传道的原因。但是对于达到入门上手的新人来讲并不是件好事。
对于入门的定义我认为就是一个学习者学习该知识的目的，目的达到了，也就入门了。大多数知识最终是要落到实际操作中的，28原则，谁8谁2使用之前无法明了的。要是非要认为看完xx系列书籍视频，事情才会有所进展的话，恐怕会在一下从来不用的知识上浪费大量时间，事实上哪怕是对高频知识的使用也是在实际过程中反复忘记查阅习得的，而不是一开始就知道什么重要。
我在之前学习影视特效知识的时候就犯过不少纸上谈兵的错误，教程看得多，练的也多，软件也熟练使用，但是一直不和行业内的使用做接轨，就导致自己的技能一直无法达到入门，不仅仅是缺乏知识，因为我已经学过很多了，更多的是缺乏行业内的一些做法和套路，这些是在知识类视频中无法习得，只能靠大量实际项目练习获得的，当然除非有人真的肯传授同时及时给你纠正和反馈。
Git Hub的初步使用体验
背景：今天准备把一个本地的项目框架上传到GitHub仓库，但是遇到了一系列问题（挂代理情况）。
1.ssl验证问题
提示：SSL certificate problem（显示ssl认证证书问题）
网上的解决办法：直接删除ssl认证
[block]
set GIT_SSL_NO_VERIFY = true
[/block]
2.ssl连接问题
提示：OpenSSL SSL_read: Connection was reset, errno 10054 （网络连接问题）
网上的解决办法：先按1问题操作，然后去修改了提交时缓存空间的大小
[block]
git config --global http.postBuffer 524288000
[/block]
3.GitHub连接问题
提示：Failed to connect to github.com port 443:connection timed out （无法连接到GitHub）
分析：上一步修改缓存空间后，并没有解决问题，还是错误代码为10054的网络问题，于是我把网络代理设置为了全局，于是出现了这个问题。
网上的解决办法：取消代理https://gist.github.com/laispace/666dd7b27e9116faece6
[block]
| git config --global --unset http.proxy | |
| git config --global --unset https.proxy |
[/block]
结果：无法解决。
4.通过配置ssh解决
提示：我发现挂代理和不挂，都会出现同样的问题，都是3的问题，所以我认为是因为一开始就没有通过ssh密钥连接上GitHub导致。于是通过ssh连接
https://segmentfault.com/a/1190000007466317
https://blog.csdn.net/u012037852/article/details/80756081
[highlight lanaguage="语言"]
[/highlight][block]
PS D:\vue3.0project\vue3.00-ts-cms> git remote add origin git@github.com:zingcz/test.git
error: remote origin already exists.
PS D:\vue3.0project\vue3.00-ts-cms> git remote add origin git@github.com:zingcz/test.git
error: remote origin already exists.
PS D:\vue3.0project\vue3.00-ts-cms> git status
On branch master
nothing to commit, working tree clean
PS D:\vue3.0project\vue3.00-ts-cms> git add
Nothing specified, nothing added.
hint: Maybe you wanted to say 'git add .'?
hint: Turn this message off by running
hint: "git config advice.addEmptyPathspec false"
PS D:\vue3.0project\vue3.00-ts-cms> git push origin master
warning: ----------------- SECURITY WARNING ----------------
warning: | TLS certificate verification has been disabled! |
warning: ---------------------------------------------------
warning: HTTPS connections may not be secure. See https://aka.ms/gcmcore-tlsverify for more information.
info: please complete authentication in your browser...
warning: ----------------- SECURITY WARNING ----------------
warning: ---------------------------------------------------
warning: HTTPS connections may not be secure. See https://aka.ms/gcmcore-tlsverify for more information.
Enumerating objects: 30, done.
Counting objects: 100% (30/30), done.
Delta compression using up to 8 threads
Compressing objects: 100% (26/26), done.
Writing objects: 100% (30/30), 107.69 KiB | 6.33 MiB/s, done.
remote: Resolving deltas: 100% (3/3), done.
* [new branch] master -> master
PS D:\vue3.0project\vue3.00-ts-cms> git clone https://github.com/zingcz/vue3.00-ts-cms.git
Cloning into 'vue3.00-ts-cms'...
remote: Enumerating objects: 30, done.
remote: Counting objects: 100% (30/30), done.
remote: Compressing objects: 100% (23/23), done.
remote: Total 30 (delta 3), reused 30 (delta 3), pack-reusedRec
Receiving objects: 100% (30/30), 107.69 KiB | 97.00 KiB/s, done.
Resolving deltas: 100% (3/3), done.
[/block]
互联网技术学习的必备题tips
能看得懂官方文档
对比文档，视频更好理解，甚至入门更快，但是视频有三个致命的问题。
- 过期性，视频时间久远，技术更新频繁，很多时候视频里面的东西和现在的不一样了。而且还不容易发觉，以为是自己操作错误。耽误时间
- 滞后性，视频是别人分析后得到的，然后喂给你，这一点对于最求新技术的互联网公司是无法忍受的。
- 非线性，视频查找起来十分蛮烦，不如纸质或者文档方便，忘了某个知识点，往往得把视频重新看一遍。
看英语问答
编程中出现的问题，在百度你可以看到广告，在CSDN可以看到人类的本质。在Google 才有可能找到回答。夹杂代码而机翻的英语惨不忍睹。所以看懂英语文档是进一步基础。
慢点看
看视频中原本1小时视频加上操作最多2小时，但现实是花了3小时还无法实现，脑袋一团乱麻。问题就在过于急于求成。
- 二倍速，快进跳跃，问题不是速度而是，明明自己听不懂，却硬听，看完了连个思路都没有，只要重新看，很多次要看三遍，操作时还要到回来找。浪费大量时间。
- 看视频太快，有时候集中精力抓住了思路，但是却丢掉了全部细节，写的时候又不得不倒回来，找写代码的时候，看一下又去写，就和糊涂窗口一样，时间都花在找视频片段上，自己却没怎么写，效果和老师写一点，自己写一点一样，要重复一遍就啥也不知道了。没形成大的操作思路。
- 写代码太快，加上基础不牢，本来就是看一下写一下，还没弄清楚写哪，就快速打代码。英语又差，打错了一个字母花个半天修改。浪费时间。
针对以上三点，提出三个建议。
- 看视频，不急于求成。如何确保看完后有大体思路+具体细节是关键。
- 对于细节，如果一次性想不起全部，就一次性找到视频重新看整理一下整个操作过程。不要一看一操作。
- 写代码慢点写，多思考检查，除bug浪费的时间远超写的时候多思考检查的时间。
抓住主题，理清框架
[successbox title="标题内容"][/successbox]
学习计算机技术栈时，我明确地意识到，光看一边是远远不够的，大多数内容在你看完单个视频时，就已经完全忘记了，脑海里没有一点头绪。
更不要提具体的细节了，真正要用到时，连是什么都不知道，更别提成功使用。
所以最基本的，至少得及时写一下，因为写晚了就忘光了又要重新看，感受一下一些细节，就知道其实自己没记住，就算写了也难记住。要想更好地记住还需写思维导图，最好还要记一下细节，可是这样就太慢了，而且就算这样时间一长也难逃遗忘的命运。
事实是，我们根本没有必要记住所有的细枝末节，学习过程中知识多，时间长，想记住所有知识是不现实的，即便能记住所耗费的时间代价也太大了，直接反应就是学得慢，效率低，在存储器如此发达的今天，我们没必要把自己变成存储器，事实上，一节视频下来，需要记忆的知识也没有那么多，只有百分之20的知识是高要求的，即随时可以运用自如的，对于剩下的百分之80，我们要做的是建立知识的框架，我们不必记住所有细节但是，我们要用的时候得知到大概有这么个东西，叫什么，去什么地方找。说这么多，其实就是知识架构，一定要有，没必要把各个细枝末节都做笔记，太慢了，记住重点，其他的记住大概，知道去哪查得到，能够随时查询就好。
前端路由是个啥
[danger][/danger]
阅读本文需要计算机网络基础
什么是前端路由
我们都知道，当客户端请求网页的时候，首先得知道url，然后就是dns解析，服务器收到url，反向传输给客户端那一系列事情。
这样没错，但问题在于每次要新页面的时候都需要单独向服务器请求一次并发送url。即便现在的tcp协议有keep-alive和管线化，滑动窗口等机制。但无论如何总比不是直接从本地拉起快，从客户端缓存机制也可以看出这一点。所以现在，SPA技术单页面富应用的解决措施是，一次性把所有当前请求的和未请求的html，javascrip代码一起发送给客户端，然后客户端自己根据用户操作造成的url变化，自己去发送的代码里找相应的，然后自己刷新。这个功能就是前端路由器。
形象一点说，你有很多本书，太多了，所以你请了个人专门帮你保管，然后你学习的时候，需要查阅资料就直接去找他拿。频率太快了这个人觉得烦，干脆把全部书都拿给你，自己要那本自己找。这个自己拿的过程就是前端路由。