- 博客(34)
- 收藏
- 关注
RSS订阅原创 前端垫片polyfill（js+css）
前端垫片polyfill（js+css）文章目录前端垫片polyfill（js+css）前言一、js垫片集成二、css垫片集成三、package.json集成browserslist前言开发时我们会使用一些新的 api，但用户的浏览器各种版本都有，可能并不支持这些 api，但我们也不能因此就不用了，这时候就可以通过 polyfill 来解决。一、js垫片集成@babel/preset-env二、css垫片集成postcss-preset-env三、package.json集成brow
2022-02-20 19:49:30
1636
原创 http协议+缓存机制
http协议+缓存机制文章目录http协议+缓存机制前言一、http1.http1.0/1.12.http2.03.一个TCP连接可以发送多少个HTTP请求4.浏览器最多可以向同一个host建立几个TCP连接二、缓存1.强缓存2.协商缓存3.etag解决了last-modified不能解决的问题前言http协议：基于TCP/IP协议，建立TCP连接，需要经过三次握手。TCP协议：相对UDP协议来说，它是面向连接，传输是可靠的。强缓存：通过expires和cache-control控制。协商
2022-02-20 17:44:04
2132
原创 前端打包工具rollup、webpack、vite的区别
前端打包工具rollup和webpack的区别文章目录前端打包工具rollup和webpack的区别一、结论二、rollup三、webpack一、结论rollup更适合打包库，webpack更适合打包项目。rollup基于esm打包，打包生成的文件更小。（识别commonJs需要插件）rollup原生支持tree-shaking，webpack2开始支持且消除效果不好。（去除未使用代码）webpack支持代码切割。（分包）webpack支持HMR。（热更新）。二、rollup三、w
2022-02-13 21:09:26
5033
原创 前端模块化发展（CommonJs、AMD、CMD、UMD、ESM）
前端工程化发展历程文章目录前端工程化发展历程一、原始时期二、立即执行函数（IIFE）三、CommonJs、AMD、CMD、UMD、ESM1.CommonJs2.AMD3.CMD4.UMD5.ESM一、原始时期没有模块化时期存在声明变量易引起污染；使用对象形势保存变量，又容易被重新命名书写等等问题。二、立即执行函数（IIFE）能够保护对象的私有属性。三、CommonJs、AMD、CMD、UMD、ESM1.CommonJs相关：npm包文件内cjs文件夹，就是基于CommonJs打包后的代码
2022-02-13 19:15:49
1115
原创 Vscode插件合集
一、汉化vscode二、代码格式化三、光标跳到{}外四、快速生成一个本地服务器五、快速生成头部注释（ctrl+alt+i）六、快速生成函数注释（ctrl+alt+d）七、自动修改标签（修改前标签名，后标签名自动更改）八、自动检测代码格式九、高亮匹配标签十、快速添加删除consolectrl + alt + l 选中变量之后，使用这个快捷键生成 console.logalt + shift + c 注释所有 console.logalt + shift +
2021-12-05 14:59:18
824
原创 Vue路由懒加载的常见的2种实现方式
Vue路由懒加载的常见的2种实现方式一、ES6 importimport Vue from 'vue'import Router from 'vue-router'const Login = () => import('@/components/LoginPage.vue')Vue.use(Router)const router = new Router({ routes:[ { path: '/login', name: 'login',
2021-09-29 10:58:44
340
原创 Vue使用compression-webpack-plugin进行代码压缩
Vue使用compression-webpack-plugin进行代码压缩一、安装插件npm install compression-webpack-plugin --save-dev二、配置vue.config.jsconst CompressionPlugin = require("compression-webpack-plugin")const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
2021-09-29 10:42:06
1162
原创 Vue项目优化之webpack
Vue项目优化之webpackbabel-plugin-transform-remove-console 生产环境去除consolecompression-webpack-plugin 代码压缩gzproductionSourceMap: false, 配置打包不生成.Map文件路由的懒加载vendor文件的拆包切换多入口模式svg-sprite-loader 使用矢量图babel-plugin-component 插件的按需引入...
2021-09-28 21:09:57
203
原创 Vue组件的几种传值方式
props和$emit(常用)attrs和attrs和attrs和listeners中央事件总线（非父子组件间通信）provide和injectparent和parent和parent和childrenvuex
2021-09-27 15:41:40
66
原创 推荐一款监听指定元素的宽高变化插件resize-observer-polyfill
上地址github: https://github.com/que-etc/resize-observer-polyfilldemo: https://que-etc.github.io/resize-observer-polyfill/
2021-09-13 21:32:05
431
原创 Vue项目关于router.addRoutes 刷新白屏解决方案
直接贴代码这是一个简单例子权限路由是Table注意最后那个{ path: '*', redirect: '/404', hidden: true }这个不能一开始就导入路由,要放到addRoutes里面.如果一开始就导入的话,刷新页面,router会找不到动态路由Table组件,因为这个时候并没有添加进来,router会直接重定向404import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../view
2021-09-13 21:11:21
1278
原创 CentOS7离线安装mysql5.7.34(配置远程登录)
下载压缩包:https://mirrors.tuna.tsinghua.edu.cn/mysql/downloads/MySQL-5.7/mysql-5.7.34-1.el7.x86_64.rpm-bundle.tar解压压缩包并依次安装解压tar -xvf mysql-5.7.34-1.el7.x86_64.rpm-bundle.tar 依次安装rpm -ivh mysql-community-common-5.7.34-1.el7.x86_64.rpmrpm -ivh mysql-c.
2021-09-05 16:32:45
636
原创 使用svg-sprite-loader构建SVG小图标
第一步安装插件svg-sprite-loadernpm install svg-sprite-loader -D第二步配置插件vue,config.js'use strict'const path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports = { configureWebpack: { resolve: { .
2021-07-03 21:07:32
320
原创 Vmware虚拟机共享主机网络
启动VMware DHCP Service打开虚拟机打开编辑网络点击更改设置4.定义一个名称的VM为 NAT模式(只能定义一个),点击确定即可5.最后选择虚拟机去设置网络为NAT模式的6.尝试是否成功对了,虚拟机里面的屏幕大小太小,如何解决呢?解决方案: 进入系统更改分辨率即可,其他操作系统一样...
2021-06-16 23:02:33
1000
原创 yarn安装 解决报错 Could not create the Java Virtual Machine
使用npm 安装 yarn查看安装成功 报错报错原因: 由于系统安装了hadoop导致 yarn.cmd冲突解决方案1: 修改hadoop/bin/yarn.cmd 但是启动hadoop报错所以我选择方案2: 修改npm下的yarn.cmd 为 yarn-js.cmd最后我们使用yarn的时候 就会变回 yarn-js init (初始化)...
2021-06-16 22:24:32
1144
1
原创 推荐一款背景插件Vue粒子特效（vue-particles插件）
插件地址: https://vue-particles.netlify.app/
2021-06-02 22:34:47
193
原创 推荐一个JS加密的插件 JSEncrypt
一. 安装 npm install jsencrypt --save二.生成密钥: http://web.chacuo.net/netrsakeypairimport JSEncrypt from 'jsencrypt/bin/jsencrypt.min'// 密钥对生成 http://web.chacuo.net/netrsakeypairconst publicKey = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDEgvX0TAfhMTj0xYLBLFS
2021-05-09 20:29:25
502
原创 快速搭建自己的git服务器
一.下载gitblit-1.9.1.zip http://gitblit.github.io/gitblit/ https://pan.baidu.com/s/18MjngYGxp91shlluP5zlrw 提取码:4xrj二.解压缩文档,进入data,用编辑器打开defaults.properties三.修改以下代码git.repositoriesFolder = ${baseFolder}/git修改成: git.repositoriesFolder = D:\Desktop\gitblit
2021-05-08 22:36:17
381
原创 Vue移动端适配 flexible&px2rem
安装插件npm install postcss postcss-px2rem lib-flexible --savemain.js 引入 lib-flexibleimport 'lib-flexible';创建postcss.config.jsmodule.exports = { plugins: [ require('autoprefixer'), //自动添加前缀 require('postcss-px2rem')( //px转re.
2021-05-07 21:01:12
228
原创 Vue换肤sass
创建_theme.scss文件/*定义两种风格主体*/$light: ( themeColor: #99bdcc, themeBgColor: #000,);$dark: ( themeColor: #fffff, themeBgColor: #f0f010,);/*统一放到$themes下 类似于对象*/$themes: ( light: $light, dark: $dark,);创建_mapThemes.scss 并引入_theme.scss.
2021-05-05 21:08:37
282
原创 autoprefixer自动添加css前缀
安装插件npm install autoprefixer配置 postcss.config.jsmodule.exports = { 'plugins': { 'autoprefixer': {} }}
2021-05-02 13:37:19
248
原创 JS获取当月有多少天
new Date(year, month, 0).getDate() new Date(2021,2,0).getDate()//28new Date(2021,3,0).getDate()//31
2021-05-01 13:21:14
353
原创 js实现对选中文本添加颜色
参考 https://developer.mozilla.org/zh-CN/docs/Web/API/Range/surroundContentswindow.getSelection() 等价于 document.getSelection返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。const selection = window.getSelection();selection.toString(); //用于获取当前选中文本的文字Range对象Ra
2021-04-26 20:20:26
1796
1
原创 Nprogress进度条在vue中的简单使用
1. 安装插件npm install --save nprogress2. 引入插件(router.js)import Nprogress from 'nprogress';import 'nprogress/nprogress.css';3. 使用插件(router.js)router.beforeEach((to, from, next) => { NProgress.start(); next();})router.afterEach(() => { NPr
2021-04-12 14:56:53
179
原创 深度选择器/deep/在火狐浏览器中失效
1.如果给父级元素加了/deep/，那么子级元素就不需要再加/deep/了.如果子级再次加了,那么在火狐浏览器中,样式就会失效,谷歌可以正常显示
2021-04-12 14:32:57
598
原创 vue去除生产环境的日志
vue去除生产环境的日志安装插件babel-plugin-transform-remove-console配置babel.config.jsconst plugins = []// 生产环境移除consoleif(process.env.NODE_ENV === 'production') { plugins.push("transform-remove-console")}module.exports = { plugins: plugins, presets: [
2021-04-01 22:11:30
329
原创 vue.config.js常用配置-cli3.0
vue.config.js常用配置-cli3.0先给个官方文档的链接:https://cli.vuejs.org/zh/config/'use strict'const path = require('path');const webpack = require('webpack');const nowRun = process.env.VUE_APP_TITLE;//当前运行const name = 'xxx后台管理系统'; //浏览器头部得标题function resolve(dir)
2021-03-31 22:21:41
136
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人