1、Module '"../../../node_modules/vue/dist/vue"' has no exported member 'onMounted'.
突然就没报错了，奇了怪了
typescript: 4.7.4
vetur: v0.35.0
2、firefox中：WebRTC: ICE failed, add a STUN server and see about:webrtc for more details
3、设置margin-bottom导致底部出现空白部分
1、产生原因：没时间探究哦
2、解决方法
- 父元素设置overflow:hidden属性
4、总是要翻阅操作手册的vue--slot
// 子组件,slot标签
<slot></slot>
<slot name="footer"></slot>
// 父组件
<div></div>
<div slot="footer"></div>
5、记不住的渐变属性属性
// 线性渐变
background-image: linear-gradient(to right, red , yellow)
// 径向渐变
radial-gradient(ellipse,#fff,#e2ecff)
6、哪些年听课走神之&、|、>>>、<<<
7、flex横向，超过部分出现滚动条
8、padding导致宽度溢出
1、产生原因：css3 box-sizing默认是content-box, 其content只包含内容的宽度，因此添加padding会导致整体宽度不对。
2、解决方法
box-sizing: border-box;
9、不得不说的swiper组件
1） loop状态下如何获取真实的index，swiper版本为v3
10、vuex该用还是不该用？
//
11、讨厌的滚动条
1、现象：子元素超出范围，没有滚动条
2、原因：无效bug，自己不小心设置了整个页面为overflow:hidden
3、解决方法
12、egg中的rotateCsrfSecret
egg提供了ctx.rotateCsrfSecret()重置csrfToken。
1）、HSTS
// default
hsts: {
enable: false,
maxAge: 365 * 24 * 3600,
includeSubdomains: false, //可以添加子域名，保证所有子域名都使用 HTTPS 访问。
}
2）、CSRF
刷新token cookie在设置时如果没有明确expires默认时session，这个session的意思跟sessionStorage的作用时间不一致，sessionStorage只要关闭tab就不会保存数据，但cookie默认的expires值session只有关闭浏览器token才会失效重现赋值，所以在用户登录的时候就需要刷新token，egg提供了ctx.rotateCsrfSecret()重置csrfToken。
// config/config.default.js
module.exports = {
security: {
csrf: {
headerName: 'x-csrf-token', // 通过 header 传递 CSRF token 的默认字段为 x-csrf-token
queryName: '_csrf', // 通过 query 传递 CSRF token 的默认字段为 _csrf
bodyName: '_csrf', // 通过 body 传递 CSRF token 的默认字段为 _csrf
},
},
};
// egg-security csrf.js
module.exports = options => {
return function csrf(ctx, next) {
if (utils.checkIfIgnore(options, ctx)) {
return next();
}
// 在cookie中设置token值
ctx.ensureCsrfSecret();
// ignore requests: get, head, options and trace
const method = ctx.method;
if (method === 'GET' ||
method === 'HEAD' ||
method === 'OPTIONS' ||
method === 'TRACE') {
return next();
}
if (options.ignoreJSON && typeis.is(ctx.get('content-type'), 'json')) {
return next();
}
const body = ctx.request.body || {};
debug('%s %s, got %j', ctx.method, ctx.url, body);
// 判断token是否为预期
ctx.assertCsrf();
return next();
};
};
3）、CSP
// 只允许本站资源
csp: {
enable: true,
policy: {
'default-src'：'self'
},
}
4)、XST
// default
methodnoallow: {
enable: true
}
5) 钓鱼攻击
// default
exports.security = {
domainWhiteList: []
}
// default
xframe: {
enable: true,
// 'SAMEORIGIN', 'DENY' or 'ALLOW-FROM http://example.jp'
value: 'SAMEORIGIN',
}
13、''ts-node'' 不是内部或外部命令，也不是可运行的程序
1、解决方法：
1）ts-node， typescript需要全局安装
2）全局安装cross-env
cross-env NODE_ENV=development nodemon --watch 'app/**/*' -e ts --exec 'ts-node' app.ts
14、Property 'app' has no initializer and is not definitely assigned in the constructor.
1、解决方法：
// tsconfig.json中添加
{
"compilerOptions": {
"strictPropertyInitialization": false
}
}
15、sessionStorage、localStorage基本使用方法
1) 基本知识
- 简单的键值存储，并且都为字符串
- 可通过getItem, setItem获取、设置值
- removeItem('key')， clear 删除某个键值对，或者清空所有数据
| 特性 | cookie | localStorage | sessionStorage |
|---|---|---|---|
| 数据的生命周期 | 一般由服务器生成，可设置失效时间。如果是浏览器生成，默认是关闭浏览器后失效 | 除非清除，否则永远保存 | 仅在当前会话中有效，关闭页面或者浏览器会失效 |
| 存放数据大小 | 4K左右 | 5M | 5M |
| 与服务器通信 | 每次请求会携带在请求头中，若cookie保存过多会带来性能问题 | 不参与和服务器通信 | 不参与服务器通信 |
| 易用性 | 需要程序员自己封装，原生的api不好用 | 原生接口可以使用，亦可再次封装来对object和array有更好的支持 |
16、style-loader、css-loader、scss-loader等css预处理器到底是用来干嘛的？
- style-loader: 将css插入到DOM中，
- css-loader: 会有@import和url()进行处理，使webpack可以识别css模块
- sass-loader: 加载器，使webpack可以识别sass/scss文件，默认使用node-sass编译
17、webpack的mode是什么
模式，在webpack配置中，通过选择development, production或者none之中的一个，来设置mode参数，就可以启动webpack内置在相应环境下的优化。默认值为production。
18、webpack怎么配置开发、测试、生产环境？
- 1、vue-cli可通过.env.development、.env.test、.env.production来配置对应的环境变量
- 2、webpack.DefinePlugin：允许创建一个在编译时可以配置的全局变量
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
// 服务url
new webpack.DefinePlugin({
'SERVICE_URL': JSON.stringify("http://dev.example.com")
})
