- 博客(67)
- 收藏
- 关注
RSS订阅
原创 使用 happypack 和 terser-webpack-plugin 优化 Webpack 项目构建速度
HappyPackHappyPack的工作原理：在Webpack和Loader之间多加了一层，改成了Webpack并不是直接去和某个Loader进行工作，而是Webpack test到了需要编译的某个类型的资源模块后，将该资源的处理任务交给了HappyPack，由HappyPack在内部线程池中进行任务调度，分配一个线程调用处理该类型资源的Loader来处理这个资源，完成后上报处理结果，最后HappyPack把处理结果返回给Webpack，最后由Webpack输出到目的路径。通过这一系列操作，将原本都在一
2022-03-30 10:44:22
1614
原创 webpack打包定义版本号、引入cdn
1、引入html-webpack-pluginnpm i html-webpack-plugin -D2、在webpack.prod.conf.js的plugin中新增配置const date = new Date();const timestamp = date.getTime(); // 时间戳new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true,
2022-03-30 10:15:30
1794
原创 如何在引用javascript、css文件时添加时间戳，解决浏览器缓存问题
浏览器会缓存之前的javascript，css的版本，更新了javascript，css文件后，浏览器不会更新。所以在引入相关javascript、css文件时添加一个时间戳，能够让浏览器加载我们的最新版本。<link rel="stylesheet" href="/css/element.css?_t=<%=new Date().indexOf()%>"><script type="text/javascript" href="/js/element.js?_t=&.
2022-03-18 13:18:00
8562
3
原创 解决vue-router出现message: "Navigating to current location ("/admin/index") is not allowed"的问题
其原因在于Vue-router在3.1之后把$router.push()方法改为了Promise。所以假如没有回调函数，错误信息就会交给全局的路由错误处理，因此就会报上述的错误。vue-router先报了一个Uncaught (in promise)的错误(因为push没加回调)，然后再点击路由的时候才会触发NavigationDuplicated的错误(路由出现的错误，全局错误处理打印了出...
2020-01-06 18:31:42
2169
原创 js 生成唯一标识符 UUID
UUIDUUID 是 通用唯一识别码（Universally Unique Identifier）的缩写，是一种软件建构的标准，亦为开放软件基金会组织在分布式计算环境领域的一部分。其目的，是让分布式系统中的所有元素，都能有唯一的辨识信息，而不需要通过中央控制端来做辨识信息的指定。如此一来，每个人都可以创建不与其它人冲突的UUID。在这样的情况下，就不需考虑数据库创建时的名称重复问题。目前最广泛...
2019-08-09 11:21:55
908
原创 vue 项目中监听 localStorage 或 sessionStorage 的变化
一、首先在 main.js 中给 Vue.protorype 注册一个全局方法，然后创建一个 StorageEvent 方法，当我在执行sessionStorage.setItem(k, val) 的时候，初始化事件并派发事件。/** * @description * @author (Set the text for this tag by adding docthis.authorNam...
2019-05-29 13:26:25
11562
2
原创 vue-cli 在IE下兼容设置
首先看 vue 官网上给出的 vue-cli 在浏览器中的兼容性，图中表示是兼容 IE 9的，但是在IE9中打开项目会发现一片空白。解决办法如下：第一步、安装 babel-polyfillnpm install --save babel-polyfill第二步、在 main.js 中的最前面引入 babel-polyfillimport 'babel-polyfill';第四步、...
2019-04-18 22:02:40
933
原创 vue 版本更新使用webpack优化打包，解决用户浏览器缓存问题
1、修改 webpack .prod.conf.js 文件const version = new Date().getTime();output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash:8].' + version + '.js'), chunkFilename:...
2019-04-18 21:42:27
20678
11
原创 vue单页面应用刷新网页后vuex的state数据丢失
一、问题用 vue 写的项目，用 vuex 来做全局的状态管理， 发现当刷新网页后，保存在 vuex 实例 store 里的数据会丢失。因为 store 里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载 vue 实例，store 里面的数据就会被重新赋值。二、解决思路将 state 里的数据保存一份到本地存储localStorage、sessionStorage、cookie中。...
2019-04-03 09:43:02
537
1
原创 git 版本回退
1、本地仓库分支版本回退第一步、用下面命令找到要回退的版本的 commit id：git reflog 或 git log --oneline注：git reflog 查看命令历史 git log --oneline 查看历史版本简洁信息第二步、回退版本：git reset --hard 2e6ab1d2、远程仓库分支版本回退的方法第一步、首先要回退本地分支：git refl...
2019-04-02 23:26:54
350
原创 vue 组件之间的传值方式
vue 组件之间的传值方式有：1、父组件传给子组件2、子组件传给父组件3、非父子组件之间传值父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：1、父组件向子组件传值：父组件：<template> <div> <input type="text" v-...
2019-02-23 15:28:31
305
原创 vue 路由跳转方式及路由传参
一、vue 路由跳转方式1、声明式跳转（标签跳转）:router-link api:// 1.to { string | Location } 表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。<!-- 字符串 --><router-link to="orderDetail"&g...
2019-02-23 14:58:44
2623
原创 Vue 项目打包以后 vendor.js 体积太大，影响首次加载速度
在 Vue 项目中，引入到工程中的所有 js、css 文件，编译时都会被打包进 vendor.js，若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。解决方案：将引用的外部 js、css 文件剥离出来，不编译到 vendor.js 中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将 vendor.js、外部的 js 等加载下来，达到首次打开加速的目的。推荐外...
2019-02-20 10:09:40
11413
3
原创 vue 项目首次打开时加载速度很慢的优化方案
1、使用 vue-router 懒加载解决首次加载时资源过多导致的速度缓慢问题当你的 SPA（单页应用程序）变得很复杂时，打包构建后的 js 包会变得非常大，以至于严重影响页面的加载时间。vue-router 支持 webpack 内置的异步模块加载系统。所以，那些使用较少的路由组件不必打包进 bundles 里，只要在路由被访问时按需加载。懒加载路由写法：{ path: "/base/u...
2019-02-20 09:36:21
11231
原创 vue 打包之后生成一个配置文件修改接口域名
第一步：安装 generate-asset-webpack-plugin 插件：npm install --save-dev generate-asset-webpack-plugin第二步：配置 webpack.prod.conf.js 文件：// 让打包的时候输出可配置的文件let GenerateAssetPlugin = require('generate-asset-webp...
2019-01-19 10:27:00
3577
原创 使用 vue 项目打包后，尝试使用打开 dist 目录下的 index.html，页面空白
问题描述：使用 vue-cli 打包项目后，尝试使用打开 dist 目录下的 index.html，页面空白。解决办法：打开 config 文件夹里的 index.js，修改 build 里 assetsPublicPath: ‘/’，为 assetsPublicPath: ‘./’，再次执行 npm run build 能够正确显示。代码如下：build: { index: path.r...
2019-01-03 00:27:53
3351
1
原创 vue 项目使用 webpack 构建自动获取电脑ip地址
问题描述：开发移动端项目时可能需要在手机上调试或者查看页面解决方案：windows电脑打开终端输入 ipconfig 可以查看电脑的IP地址；mac电脑打开终端输入 ifconfig 可以查看电脑ip；但是每天 ip 发生变化这样就很麻烦，每天都需要重新获取，所以提供以下解决方案来获取 电脑 ip，借助 node 里的 os 模块；在 config 文件里的 index.js 里面加上...
2019-01-02 15:29:09
3432
原创 HTML代码中＜%%＞、＜%=%＞、＜%:%＞
<%%>之间可以写代码语句，例如：<% if (process.env.NODE_ENV === 'production') { %><script> var text = `PROD：${ GLOBAL.HOSPITAL_NAME }\n Company：${ moment().format("YYYY") } 公司\n Host：${ GLOBAL.BASE_HOST }\n Date：${ moment().format("YYYY-MM-DD H
2022-03-18 13:27:05
4761
原创 JavaScript中的小技巧
空值合并操作符只有当左侧为null和undefined时，才会返回右侧的数.空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。// const foo = null ?? '123';console.log(foo); // 123// const baz = 0 ?? 42;console.log(baz); // 0// var a = obj ?? {};// 相当于var a;if(obj =
2021-12-08 15:45:33
241
原创 Git配置多个远程仓库
方法一: 使用 git remote add 命令1.1# 如下命令查看远程仓库的情况，可以看到只有一个叫 github 的远程仓库。git remotegithubgit remote -vgithub https://github.com/zxbetter/test.git (fetch)github https://github.com/zxbetter/test.git (push)1.2# 使用如下命令再添加一个远程仓库（这里以码云为例）git remote add osc
2020-08-27 11:50:53
788
原创 Vue中使用provide和inject
成对出现：provide和inject是成对出现的。作用：用于父组件向子孙组件传递数据。使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据。类型：provide：Object | () => Objectinject：Array<string>
2020-07-06 11:53:59
356
原创 处理图片的利器sips
使用终端命令行批量转换图片文件格式，使用的命令是sips，sips可以转换一个或多个图片文件的文件格式。下面这条命令就是sips命令的基本构成。使用下面命令时，需要将终端定位到图片文件所在文件夹。sips单个图片格式转换(jpg转png)#sips -s format [格式名称] [文件名] --out [输出文件的名称]sips -s format png image.jpg --out image.png;多个图片格式转换#for i in [文件名];#do #sips -s
2020-07-06 11:23:50
740
原创 vue-cli中全局引用scss
如果直接在main.js中引入会出现以下错误：解决办法：第一步：cnpm install sass-resources-loader --save-dev第二步：修改build中的utils.js修改为：scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { ...
2020-02-23 20:40:21
307
原创 解决 cnpm : 无法加载文件 cnpm.ps1
安装 cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org在使用 power shell 运行 cnpm 时报以下错误：cnpm : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https...
2019-12-09 21:24:41
2400
原创 JavaScript处理移动端拍摄图片旋转问题
引入exif-js<script src="https://cdn.jsdelivr.net/npm/exif-js@2.3.0/exif.min.js"></script>/** * 处理图片文件（处理移动端拍摄图片旋转问题） * fileObj.file 图片文件独享 * fileObj.resolution 在指定图片格式为 image/jpeg 或 im...
2019-11-14 15:05:06
640
原创 DataURL、Blob、File、Image
DataURL、Blob、File、Image之间的关系与转换var utils = { /** * @description canvas 转 dataURL * @param { Object } canvas 对象 * @param { Object } format 文件格式（默认为 image/jpeg） * @param { Obje...
2019-11-14 14:58:37
462
原创 vue 计算属性如何传参
vue 计算属性如何传参html 代码// html 中v-for="(row, i) in calculateList(scope.row.navDish, item)" :key="i"js 代码// 计算属性computed: { calculateList() { return (params1, params2) => { return params1.f...
2019-10-08 20:16:39
467
原创 git 修改仓库地址
方法一：使用命令修改第一步：先删除你的远程仓库git remote rm origin第二步：再添加远程仓库git remote add origin 仓库地址注意：如果有其他分支修改后需要重新拉去一下远程分支git fetch方法二：直接修改你本地的.git文件进入.git文件夹，编辑.git文件中的config文件修改config文件中的url路径为你的新远程仓库地址路...
2019-10-08 14:43:28
7269
原创 如何修改element-ui主题色
1、在项目目录下安装主题工具，执行：npm install element-theme --dev2、在项目目录下安装 chalk 主题： npm install element-theme-chalk -D3、初始化变量文件，通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss，当然你可以传参...
2019-08-20 14:55:34
530
原创 js 数据分组(单个分组依据或多个分组依据)
方法一：/** * @description 数据分组 * @author CaoZM20132014 * @date 2019-07-19 * @export * @param { array } array 需要进行分组的数据 * @param { string } key 进行分组时依据的键名 * @param { string } resKey 分组后数据的键名，默认为 l...
2019-08-07 11:59:53
3115
1
原创 JavaScript 作用域与作用域链
作用域变量或函数可以发生作用的区域即是作用域。作用域的最大用途就是隔离变量或函数，并控制变量或函数的生命周期，超过该区域的变量或函数就不能被访问。全局作用域在整个程序生命周期内都是有效的，在任意的函数内部都能访问的变量或函数拥有全局作用域。以下几种情形拥有全局作用域：1、在最外层定义的变量和函数拥有全局作用域。例子：var out = "hello";function o...
2019-07-16 15:12:47
246
原创 JavaScript 粘贴事件 paste
兼容性：给页面中的元素绑定paste事件的方法，当用户鼠标在该元素上或者该元素处于focus状态，绑定到paste事件的方法即可，绑定的元素不一定是input，普通的div也是可以绑定的，如果是给document绑定了，就相当于全局了，任何时候的粘贴操作都会触发。document.addEventListener("paste", function (e){ var cbd = e.cli...
2019-05-30 17:14:19
4530
原创 vue router.push()，router.replace()，router.go()，router.back()，router. forward()
1、router.push()：导航到不同的 url，向 history 栈添加一个新的记录。（=== window.history.pushState）声明式编程式<router-link :to="">router.push()// 字符串router.push('home')// 对象router.push({ path: 'home' })...
2019-05-30 15:40:46
8243
2
原创 v-for 循环时直接使用 v-model 绑定报错
报错信息：You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable.// 错误...
2019-05-29 11:19:34
4643
原创 JavaScript 生成随机数方法总结
生成随机数包含以下四种情况：1：min ≤ r ≤ max2：min ≤ r < max3：min < r ≤ max4：min < r < max/** * @description 生成随机数 * @author (Set the text for this tag by adding docthis.authorName to your settin...
2019-05-20 15:14:39
956
原创 vue-router 在新窗口打开页面
一、router-link 标签实现新窗口打开：<router-link> 不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用<a>标签<router-link tag="a" target="_blank" :to="{name:'chatOnline',params:{id:1}}">在线沟通</router-link...
2019-05-15 10:36:44
3411
原创 js 判断当前操作系统
js判断客户端是否是微信浏览器function is_weixin() { var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { return true; } else { return false; }}js判断手机...
2019-04-03 14:55:18
2369
原创 验证数字正则表达式
非负数：/^\d+$/正整数：/^[1-9]|[1-9][0-9]*$/非正整数：/^((-\d+)|0)$/负整数：/^-([1-9]|[1-9][0-9])*$/整数：/^-?\d+$/非负浮点数：/^\d+(\.\d+)?$/非负浮点数,可保留一位，二位：/^\d+(\.\d{1,3})?$/正浮点数：/^([1-9]+(\.\d+)?|0\.\d+)$/非正浮点数：/^-[...
2019-04-02 11:06:37
2087
原创 移动端 button 点击有黑色背景
去除黑色背景：* { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none;}
2019-03-02 14:40:39
775
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人