孤岛的千城-CSDN博客

原创 docker+jenkins构建vue项目

1、安装docker我的是腾讯云主机 CentOS 81.1 使用命令安装curl -sSL https://get.daocloud.io/docker | sh参考菜鸟教程1.2 启动docker和设置开机自启# 启动systemctl start docker#开机自启systemctl enable docker1.3 测试是否安装成功docker version2、安装Docker Compose2.1 运行这个命令下载当前稳定版本sudo curl -L

2021-04-18 21:18:00 1924 1

原创 ffmpeg合并音视频

【代码】ffmpeg合并音视频。

2023-07-09 17:09:15 296 1

原创 webpack之缓存

前言我们使用 webpack 来打包我们的项目，只要将打包生成 dist 目录中的内容部署到服务器上，浏览器就能够访问此服务器的网站及其资源。当我们需要处理的业务越来越繁重时，我们不得不面临的一个问题是前端的代码体积也变得越来越庞大。这造成用户不得不花额外的时间和带宽下载更大体积的脚本文件。这就是为什么浏览器使用一种名为缓存的技术。可以通过命中缓存，以降低网络流量，使网站加载速度更快。如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本。由于缓存的存在，当你

2022-02-28 10:42:46 1528

原创 vue 实现点击滚动效果

效果实现<template> <div class="home"> <div class="box"> <div class="left">

2022-01-07 17:14:32 2144

原创 git回退 git revert 和 git reset 用法

场景小明在分支 dev1 上开发，提交了 3 次（分别为 c1、c2、c3），发布时需要把 dev1 分支合并到 master 分支上，生成记录 m2，并发布到线上。小王在分支 dev2 上开发，提交了 1 次（c1），然后也把 dev2 分支合并到 master 分支上，生成记录m3，并发布到线上。不幸的是，小名的 dev1 分支上存在 bug，需要回滚 dev1 上的所有提交。解决使用 git reset 会将 M1 之后的提交都回退掉，所有推荐使用 git revert.git re

2021-12-13 17:37:23 746

转载 Webpack 性能优化

文章目录Webpack 性能优化一、减少 Webpack 打包时间二、减少 Webpack 打包后的文件体积Webpack 性能优化在这部分的内容中，我们会聚焦于以下两个知识点，并且每一个知识点都属于高频考点：有哪些方式可以减少 Webpack 的打包时间有哪些方式可以让 Webpack 打出来的包更小一、减少 Webpack 打包时间优化 Loader对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 A

2021-09-07 09:39:49 144

原创 require.context介绍

简介require.context 是 webpack 的 api，主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个 api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用 import 导入模块。语法官方文档可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录，以及一个匹配文件的正则表达式。Webpack 会在构建中解析代码中的 require.context() 。值得注意的是 require.c

2021-09-06 10:02:56 1329

原创 vue开发插件，使用this调用组件

需求需要一个组件可以在任何页面内能访问。如提示框、模态框等。解决方案根据需求，首先想到的就是将组件挂载到原型链 Vue.prototype 上。接下来我们创建一个简易的提示框组件步骤：在 src 目录下创建一个 pop 文件夹，在该文件下创建两个文件 Pop.vue 和 index.js// Pop.vue<template> <div class="tips animation" v-show="isShow" :class="{ shake:

2021-05-11 10:31:52 990 1

原创 js正则的test方法一会返回true一会返回false

问题在使用js正则的test方法时，一会返回true一会返回false。如图：原因参考 MDN Web Docs 文档如果正则表达式设置了全局标志，test() 的执行会改变正则表达式 lastIndex 属性。连续的执行test()方法，后续的执行将会从 lastIndex 处开始匹配字符串，(exec() 同样改变正则本身的 lastIndex 属性值).下面的实例表现了这种行为：var regex = /foo/g;// regex.lastIndex is at 0re

2021-05-10 16:26:23 2300

原创 docker安装redis

创建一个docker-compose.yml文件写入如下代码version: '3'services: redis-test: image: redis restart: always container_name: 'redis-test' ports: - 15001:6379 # 数据持久化 volumes: - /home/redistest:/data command: ['redis-server.

2021-04-18 11:26:39 83

原创 docker安装mongodb

创建一个docker-compose.yml文件写入如下代码version: '3.1'services: mongo: image: mongo restart: always environment: MONGO_INITDB_ROOT_USERNAME: root MONGO_INITDB_ROOT_PASSWORD: example ports: - 27017:27017 # 数据持久化 volu.

2021-04-18 11:13:06 111

原创 js使用Canvas将多张图片合并成一张

解决方案function mergeImgs(list) { const canvas = document.createElement('canvas') canvas.width = 500 canvas.height = 500 * list.length const context = canvas.getContext('2d') list.map((item, index) => { const img = new Image() img.src =

2021-03-30 10:22:38 6176 4

原创 Object.create和Object.assign

Object.create该方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__官方文档语法：Object.create(proto，[propertiesObject])参数：proto新创建对象的原型对象。propertiesObject可选。需要传入一个对象，该对象的属性类型参照Object.defineProperties()的第二个参数。如果该参数被指定且不为 undefined，该传入对象的自有可枚举属性(即其自身定义的属性，而不是其原型链上的枚举属性)

2021-03-12 13:46:29 476 1

原创使用html2canvas在前端生成图片

技术选型要在前端生成图片，自然会想到使用Canvas来做。自己封装Canvas API使用开源库，如 html2canvas方案一开发、维护成本较高，并且 html2canvas 已经比较成熟稳定了，所以选择方案二。html2canvas的基本介绍该脚本允许您直接在用户浏览器上拍摄网页或部分网页的"截图"。屏幕截图基于 DOM，因此可能无法 100% 准确到真实表示，因为它不会进行实际屏幕截图，而是根据页面上提供的信息构建屏幕截图。官方文档使用安装npm install html

2021-03-05 09:55:55 360 1

原创 element-ui table 用按钮控制展开行的全部打开和隐藏

解决方案element 版本 2.15.0使用 row-key 和 expand-row-keysrow-key 行数据的 Key，用来优化 Table 的渲染；expand-row-keys 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。<template> <el-button @click="closeAll">关闭按钮</el-button> <el-butt

2021-02-27 09:38:20 4019 3

原创 js将canvas生成图片并保存到本地

需求将 canvas 生成图片并保存到本地方案使用 Canvas 的 toDataURL() 方法HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。如果画布的高度或宽度是0，那么会返回字符串“data:,”。如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。Chrome支持“image

2021-02-26 14:03:57 8757 3

weixin_45337170的博客