uglifyjs 合并压缩 js
1、全局安装 uglify-jsnpm install -g uglify-js
也可以局部安装npm install --save-dev uglify-js
2、在终端执行合并压缩命令uglifyjs js/common.js js/example.js -o js/common.min.js
上面的命令表示把 common.js 和 example.js 合并成为 common.min.js。
这里面的路径请根据你项目的实际情况更改
一些常用的参数列表-o,--output 指定输出文件,默认情况下为命令行-b,--beautify 美化代码格式的参数-m,--mangle 改变变量名称(ex:在一些例如YUI Compressor压缩完的代码后你可以看到a,b,c,d,e,f之类的变量,加了-m参数,uglifyjs也可以做到,默认情况下,是不会改变变量名称的)-r,--reserved 保留的变量名称,不需要被-m参数改变变量名的-c,--compress OK,主角登场了,这是让uglifyjs进行代码压缩的参数。可以在-c后边添加一些 ...
clean-css 合并压缩css
1、全局安装 clean-cssnpm install -g clean-css
也可以局部安装npm install --save-dev clean-css
2、安装 clean-css-clinpm install -g clean-css-cli
3、在终端执行合并压缩命令cleancss -o css/app.all.min.css css/common.css css/index.css
css/app.all.min.css — 表示你压缩后的目标路径及 css 文件名
css/common.css css/index.css — 这些都是你需要压缩合并的 css
监听网页页面元素是否在窗口可视
就是理由新增的 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 ...