Jenkins如何自动化部署前端项目(安装Jenkins)
Jenkins 如何自动化部署前端项目1、安装 JDK 11 这里我们通过 yum 系统 Centos 8.4.64
首先,确保你的系统已经更新到最新的软件包列表。可以运行以下命令来更新软件包列表:
sudo yum update
安装 JDK 11sudo yum install java-11-openjdk-devel
安装过程中,系统会提示你确认是否继续安装。输入Y并按下 Enter 键,然后等待安装完成。
安装完成后,可以使用以下命令来验证 JDK 11 的安装:
验证 Java 是否安装成功java -version
输出应该显示类似以下内容:
openjdk version "11.x.x" 2021-XX-XXOpenJDK Runtime Environment (build 11.x.x+XX-XXXX)OpenJDK 64-Bit Server VM (build 11.x.x+XX-XXXX, mixed mode, sharing)
卸载 Jdk# 查看CentOS自带JDK是否已安装:yum list installed | ...
监听网页页面元素是否在窗口可视
就是理由新增的 api IntersectionObserver可以引入下方链接适配兼容
https://cdn.jsdelivr.net/npm/intersection-observer-polyfill@0.1.0/dist/IntersectionObserver.min.js
用法// elementArray:是需要监听的页面dom元素组,建议使用一个div包裹住需要监听的dom元素// callback: 是回调函数const monitorVisualArea = (elementArray, callback) => { try { // 创建JS交叉观察函数 const observer = new IntersectionObserver((mutaions) => { const interArr = mutaions.filter((item) => item.isIntersecting); // 创建IntersectionObserver对象 if (interA ...
如何在静态页面构建并使用tailwindcss
安装 Tailwind CSSnpm install -D tailwindcss
npx tailwindcss init
配置模板文件的路径执行完上述操作会在根目录生成一个配置文件
/** @type {import('tailwindcss').Config} */module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [],};
将加载 Tailwind 的指令添加到你的 CSS 文件中./src/input.css
@tailwind base;@tailwind components;@tailwind utilities;
开启 Tailwind CLI 构建流程运行命令行(CLI)工具扫描模板文件中的所有出现的 CSS 类(class)并编译 CSS 代码。
npx tailwi ...
Vue+Ts自定义封装日期组件
至于为啥不用组件库的日期组件而费劲的自己去封装一个勒?说多了都是泪,由于公司 UI 和常用的组件库的样式和一些操作交互有些差别,试了一通发现都不能实现业务需求,干脆手撸一个吧!
先来看看实现效果吧
话不多说直接上代码!
<template> <div class="date-picker relative" ref="date_picker"> <div class="input-date w-36 h-8 rounded overflow-hidden relative" :style="{ backgroundColor: '#2B2D3A' }" > <input type="text" class="border-none outline-none w-full h-full px-3" ...
如何查看npm的镜像信息
要查看 npm 的镜像信息,你可以使用npm config get registry命令。这个命令会返回当前配置的 npm 镜像地址。
如果你想要切换 npm 的镜像源,有以下几种选择:
npm config set registry <registry-url>:将 npm 的镜像源设置为指定的<registry-url>。
npm config delete registry:删除已设置的 npm 镜像源,恢复默认的官方源。
常见的 npm 镜像源包括:
官方源(https://registry.npmjs.org/)
淘宝 NPM 镜像源(https://registry.npm.taobao.org/)
cnpmjs 镜像源(https://r.cnpmjs.org/)
使用合适的 npm 镜像源可以加快依赖包的下载速度,提高开发效率。
Windows操作系统生成SSH密钥
在 Windows 上生成 SSH 密钥可以通过以下简单步骤:
创建公钥(如果在 cmd 窗口不可执行,请下载 gitbash 执行)
ssh-keygen -t rsa -C "youremail@example.com"
输入完毕后按回车,到底即可,此时 c 盘——用户——用户名——.ssh 文件夹 里面生成好了“idrsa”和“id_rsa.pub”文件(不一定是一样的位置,会有提示请以自己的目录为准_)。
将公钥添加到需要访问的服务器上的 authorized_keys 文件中。
使用私钥进行 SSH 连接。
vue/cli创建项目<template>报错
启动项目就报这种错误
一、首先在 vuter 插件中 扩展设置中吧 template 勾选去掉(默认是勾选的)如下(示例)
然后重启 vscode 如果还是不行的话 下一步
"vueCompilerOptions": { "experimentalDisableTemplateSupport": true }
然后重启 vscode 就好了
Vue的依赖收集
让数据变得可观测我们都知道 Vue2 中是通过Object.defineProperty来实现的数据劫持,也就是让数据变得可观测 例如:
let car = {};let val = 3000;Object.defineProperty(car, "price", { enumerable: true, configurable: true, get() { console.log("price属性被读取了"); return val; }, set(newVal) { console.log("price属性被修改了"); val = newVal; },});
依赖收集让 object 数据变的可观测。变的可观测以后,我们就能知道数据什么时候发生了变化,那么当数据发生变化时,我们去通知视图更新就好了。那么问题又来了,视图那么大,我们到底该通知谁去变化?总不能一个数据变化了,把整个视图全部更新一遍吧,这样显然 ...
关于微信前端支付在微信环境如何支付
关于微信前端支付在微信环境如何支付我们都知道在微信环境中是无法直接使用 H5 支付的,需要调取微信浏览器一些相关 API 去唤醒支付,相关链接如下:
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
注意:WeixinJSBridge 内置对象在其他浏览器中无效。
function onBridgeReady() { WeixinJSBridge.invoke( "getBrandWCPayRequest", { appId: "wx2421b1c4370ec43b", //公众号ID,由商户传入 timeStamp: "1395712654", //时间戳,自1970年以来的秒数 nonceStr: "e61463f8efa94090b1f366cccfbbb444", //随机串 package: "prepay_i ...
Jenkins如何自动化部署前端项目(2)
Jenkins 如何自动化部署前端项目前置步骤我们都操作完了,这篇开始介绍 jenkins 的使用。话不多说,看操作(没安装的请看我主页有详细的安装教程)
1、登录进入 jenkins 后会让你选择安装插件,选择第一个默认的就行。
2、配置 JDK 和 Git 都需要执行路径,所以需要先把执行路径找到,先进入服务器的终端界面执行
JDK 的路径
echo $JAVA_HOME
如果是空记得先去设置 java 的环境变量 which java 查看 java 的安装路径
Git 的路径
which git
3、先配置 JDK 和 Git。点击:Manage Jenkins>>Global Tool Configuration
选择 JDK,别名随便填,JAVA_HOME 填写查询到 jdk 的路径
选择 Git,Name 随便填 e 填写 2.2 查询到 git 的路径,配置完成后点击应用,在点击保存。
安装插件安装插件,点击 Manage Jenkins>>Manage Plugins,点击可选插件
安装 Gitee 插件,找到可选插 ...