学习前端遇到的一些东东

使用require.context实现前端工程自动化
require.context()
require.context是什么
一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
require.context函数接受三个参数
1.directory {String} -读取文件的路径
2.useSubdirectories {Boolean} -是否遍历文件的子目录
3.regExp {RegExp} -匹配文件的正则
语法: require.context(directory, useSubdirectories = false, regExp = /^.//);
示例: const req = require.context('./svg',false,/\.svg$/)

$router、$route、$router.push()和、$router.replace() 不同的作用
1.this.$router
是VueRouter的一个对象，表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此方法获取到路由器对象，并调用其push(), go()等方法

2.this.$route
表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等方法

3.push和replace区别
$router.push({path:'home'});本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录
$router.replace({path:'home'});替换路由，没有历史记录，点击返回，会跳转到上上一个页面

4.push 传递参数和接收参数字符串
this.$router.push(name)
this.$router.push(path)

对象传参:name搭配params （类似post）
this.$router.push({
name:'xxx',
params:{
id:id
}
})

接收参数:
this.$route.params.id

传参: path搭配query （类似get）
this.$router.push({
path:'/xxx',
query:{
id:id
}
})

接收参数:
this.$route.query.id

Vue js转换ts
如果你的项目是由vue-cli构建的那么转换项目并不需要手动去添加各种配置文件等，因为vue-cli有内置的ts迁入命令进入项目 vue add typescript

如果使用git管理代码，请先保证工作区clear，输入完命令后，终端会自动为你安装 @vue/cli-plugin-typescript安装完成之后会有几个选项要选择
use class-style component syntax？(Y/n)

意思是是否使用class风格的vue组件，即原本组件时 app=new Vue() 变成 class app extends vue

之后会解释，一般选y即可

use babel alongside typescript(required for modern mode,auto-detected polfills,transpiling,JSX)?(Y/n)

是否选用babel来自动填充转义，一般情况下也是y

Convert all .js files to .ts？（Y/n）

是否要把所有js文件转换成ts文件，这里最好选n，因为它自动转换虽然很便捷，但是会替换掉一些你原有的内容，而且一个项目想要完全转换成ts并不是改后缀就结束了

allow .js files to be compiled?(Y/n)

是否允许.js文件的编译，这里肯定是Y，如果你的项目比较庞杂，你的项目会在很长一段时间内，处于ts，js共存状态

skip type checking of all decaration file？（Y/n）

是否跳过所有类型检查，这里看需求，都可以后面可以更改，一般选Y

经过上面的几个选项，vue-cli就开始转换ts了，视运行速度而定，时间各有差异，运行完之后，会提示
Successfully invoked generator for plugin:@vue/cli-plugin-typescript
看到这个提示你的项目已经转换好了