web前端学习/工作笔记(五)

kiki.

发布于 2022-09-29 08:36:22

2680

发布于 2022-09-29 08:36:22

文章被收录于专栏：web全栈之路

全局注册组件，在main.js // 全局注册组件方式一 Vue.component(‘MyHellpWorldE’,{ template:<div>my-componet</div> }) //全局注册组件方式二 import loading from ‘./components/’ Vue.use(loading)
e.preventDefault();//阻止事件默认行为
直接改node_modules里面的代码，不会生效？

原因：修改的是源码，而引用的是它编译打包之后的，所以没有生效

build:pos出错，报错：

‘BUILD_ENV’ 不是内部或外部命令，也不是可运行的程序或批处理文件BUILD_ENV 不是可执行的命令 ‘NODE_ENV’ 也报和上面一样的错误

    "build": "cross-env NODE_ENV=production webpack --     config build/webpack.build.conf.js",
    "build:manager": "BUILD_ENV=manager npm run build",
    "analyz:manager": "NODE_ENV=production npm_config_report=true npm run build:manager",
    "build:pos": "cross-env BUILD_ENV=pos npm run build"

解决办法：
1. 安装cross-env: npm install cross-env –save-dev
2. build:pos和build命令里添加cross-env

高性能javascript:

for循环，10万次性能开始有差异,倒序3ms，正序3ms

var arr = [];
for (var i = 0; i < 100000; i++) {
arr[i] = i;
}
var start = +new Date();
for (var j = arr.length; j > -1; j--) {
arr[j] = j;
}
console.log("倒序循环耗时：%s ms", Date.now() - start); 
var start = +new Date();
for (var j = 0; j < arr.length; j++) {
arr[j] = j;
}
console.log("正序序循环耗时：%s ms", Date.now() - start);

面试题响应式页面和自适应页面

响应式：分辨率不同显示不同布局
- @media screen and (max-width:1024px) {}
自适应：布局不变，根据不同设备的宽度内容变大变小
- rem布局

<script>
    function setRem(){
        var deviceWidth=document.documentElement.clientWidth||document.body.clientWidth
    var scale=deviceWidth/750/100;
    documet.documentElement.style.fontSize=scale+'px'
    }
    window.onresize=function(){
        setRem();
    }
</script>

水平垂直（上下左右）居中方式

1.设置定位

width:100px;
height:100px;
position:fixed;//absolute
left:50%;
top:50%;
margin:-50px,0,0,-50px;

2.auto

width:100px;
height:100px;
position:fixed;//absolute
left:0;
top:0;
right:0;
bottom:0;
margin:auto;

*{margin:0;padding:0}//去掉滚动条 
html,body{
    height:100%;
}
body{
    display:flex;
    align-items:center;
    justify-content:center;
    
}
div{
width:100px;
height:100px;

}

REST:一种架构设计风格，提供了一组设计原则和约束条件，主要用于客户端与服务端交互，如果一个架构符合REST的约束条件和原则，我们就称他为RESTful架构,基于http的应用实现了RESTful架构

统一的资源接口
受限的预定义操作
资源状态表述安全方法：get head options 不安全：post put patch delete 页面用div都可以实现，但是要讲究语义化

关于npm:

安装指定指定版本： npm i vue-server-renderer@2.5.17–save
卸载指定模块指定版本，不带–save不会删除配置文件记录，但是安装指定版本，会更新记录： npm uninstall vue-server-renderer@2.5.17 --save
–save上线后仍需要依赖
–save-dev 安装开发阶段依赖