防抖

防抖函数 func是用户传入需要防抖的函数 wait是等待时间

1
2
3
4
5
6
7
8
9
10
11
function debounce(func, wait = 50) {
    let timer = 0;
    return function (...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            timer = setTimeout(() => {
                func.apply(this, args)
            }, wait)
        })
    }
}

节流

节流函数 func是用户传入需要节流的函数 wait是等待时间

1
2
3
4
5
6
7
8
9
10
11
function throttle(func, wait = 50) {
    let lastTime = 0;
    return function (...args) {
        // 当前时间
        let now = +new Date();
        if (now - lastTime > wait) {
            lastTime = now;
            func.apply(this, args)
        }
    }
}

BFC是什么

BFC(Block formatting context)就是【块级格式化上下文】

BFC的作用

1.解决高度坍塌

案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        display: block;
      }
      .box {
        border: solid 1px purple;
      }
      .float {
        float: left;
        width: 200px;
        height: 150px;
        background: rgb(198, 221, 208);
        border: solid 1px black;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="float"></div>
    </div>
  </body>
</html>

效果:

解决方法:给box盒子加overflow:hidden的css属性,就解决了高度塌陷问题

解决后效果:

2.margin重叠

案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        background: #ccc;
      }
      .sub {
        width: 100px;
        height: 100px;
        margin: 10px;
        background: #000;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="sub"></div>
      <div class="sub"></div>
      <div class="sub"></div>
    </div>
  </body>
</html>

效果:

margin重叠,没有达到预期效果

解决方法:给每个sub盒子套一层class名为bfc盒子,加overflow:hidden的css属性,就解决了margin重叠问题

解决后效果:

3.阻止元素被浮动元素覆盖

案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        background: red;
        width: 100px;
        height: 100px;
        float: left;
      }
      .box2 {
        width: 150px;
        height: 200px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

效果:

从上图可以看出浮动盒子(box1)覆盖了未浮动盒子(box2)

解决方法:给box2盒子加overflow:hidden的css属性,就解决了被浮动盒子覆盖效果

解决后效果:

由于BFC的隔离作用，可以利用BFC包含一个元素，防止这个元素与BFC外的元素发生margin重叠

vite 配置开发环境和生产环境 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1.npm create vue@latest生成一个vue3的项目

2.在项目的根目录里创建 .env.development 和 .dev.production文件 分别写上不同的环境变量和你想要输出的任何变量
  在 .env.development 里
  VITE_BASE_URL="http://www.development.com"
  在 .env.production 里
  VITE_BASE_URL="http://www.production.com"

3.在vite里可以通过 import.meta.env获取当前环境里变量
  a.在index.html里
    i.<h1>当前的环境是%MODE%</h1>
    ii.<p>当前的baseURL是%VITE_BASE_URL%</p>
  b.axios的封装实例中
  c.axios.cerate({baseUrl: import.meta.env.MODE == 'development' ? 'http://www.development.com':'http://www.production.com'})

4.配置自定义的打包或者压缩环境
  配置一个测试环境
  新建.env.test文件 写入以下内容
  VITE_BASE_URL="http://www.test.com"

5.在package.josn里添加脚本命令
  "build:test": "vite build --mode test"
  这样的话就可以根据环境配置不同的url

官网https://cn.vitejs.dev/guide/env-and-mode.html

npm run dev 或者 npm run build:test 来启动不同的环境

环境文件的命名格式： .dev.[环境的名称] ex: .env.staging 预发环境的配置

Scp命令部署项目

一、将文件上传到服务器上

1
2
3
a.scp [文件名]  [服务器用户名]@[服务的地址]:[文件路径]
b.scp  d:/2104B/map.jpg  root@192.168.88.88:/www/2104B
会要求你输入服务器密码  密码正确则开始上传

二、将文件夹上到服务器上 可在 scp 命令之后 加 [-r ] 表示要递归上传

1
2
3
a.scp -r [文件名]  [服务器用户名]@[服务的地址]:[文件路径]
b.scp  d:/2104B/big_screen  root@192.168.88.88:/www/2104B
c.scp -r --exclude='目录名' 源文件/目录 目标主机:目标路径

三、在 linux 服务器安装 node

a.下载 node 并解压

1
2
3
wget https://nodejs.org/dist/v18.9.0/node-v18.9.0-linux-x64.tar.xz# 下载
tar xf node-v18.9.0-linux-x64.tar.xz # 解压
cd node-v18.9.0-linux-x64.tar.xz  # 进入解压目录

b.配置环境变量

1
2
3
vim /etc/profile  #编辑这个文件
在末尾添加： export PATH=$PATH:/[你下安装目录]/node/node-v18.9.0-linux-x64/bin
source /etc/profile # 刷新配置文件 让配置文件生效

c.验证

1
2
node -v
正常会出来node的版本号

d.如果出错 如下：

1
2
3
4
5
6
node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by node)
node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)

解决方式 https://www.cnblogs.com/dingshaohua/p/17103654.html

如果以上方法安装node环境不行的话试试这个https://www.cnblogs.com/hongyi66/p/17296786.html

四、在package srripts里配置打包命令 简化上传流程

1
2
3
4
5
6
"scripts":{
    "dev":"vite",
    "build":"vite build",
    "preview":"vite preview",
    "push":"vite build && scp -r ../vue3 root@192.168.88.88:/www/2104B"
}

然后npm push 上传到linux服务器上

五、nginx
安装方式：https://blog.51cto.com/u_15311571/5858248