H_xiang_xiang的博客

先验最近在看vue-router源码，先了解一下两种前端路由模式的具体实现。hash路由：监听url的hash部分变化，渲染相应组件hash路由的变化需要监听hashchange事件，事件对象里有oldURL、newURL属性表示变化前后的urlwindow.addEventListener("hashchange", function (e) { console.log(e.oldURL, e.newURL);})封装一个函数，从获得的url里面，需要提取出hash部分functi

所有 js模块 打包成一个 bundle.js 太大了，可以把某些 js模块 单独打包，等要用到的时候，webpack 自动创建 script 标签去请求这个js文件require.ensurerequire.ensure( [], // 依赖 () => {// 回调函数，在这里按需引入模块和处理逻辑 require('@/components/home') }, 'demo') // webpackChunk名，同名的打包进同个bundle}

实现结果小demo地址：https://gitee.com/huangxx678/fileuploadbar.git立个Flag：等我好好学完后端再重新写个完整的 ^ _ ^先验知识点MDN:FormDataFormData 接口可以把表单数据构造成键值对，然后通过 XMLHttpRequest.send() 发送。MDN:XMLHttpRequestprogress 事件，监测传输进度，e.lengthComputable 表示当前传输文件的长度是否可知，e.loaded 表示已经传输的字

懒加载延迟加载，等内容进入可视区域了再去加载资源如何判断元素出现在可视区域？1）获取被监视的元素到页面顶部的距离 element.offsetTop （前提：没有定位的祖先）2）获取页面垂直滚动的距离 window.pageYOffset3）获取可视区域高度 window.innerHeight4）当 element.offsetTop - window.pageYOffset < window.innerHeight 即为元素出现在可视区域获取元素到页面顶部的距离 elem

结果文字说明

答案是：先执行捕获看到一些说法称 “绑定在被点击元素的事件是按照代码顺序发生”，实际测试了一下，被点击元素的事件也是先捕获、后冒泡<div id="s1">s1</div><script> s1.addEventListener("click", function(e) { console.log("s1 冒泡"); }, false); //冒泡 s1.addEventListener("clic

#的含义#代表网页中的一个位置，#后面的内容是这个位置的标识符。页面中设置锚点就是这个原理，点击链接会跳转到#指定的区域<a href="#content">跳转到content区域</a>...<div id="content">...</div>单页面应用也使用 # 切换页面中的组件，比如 vue 利用 vue-router，点击链接在 router-view 区域显示content组件<router-link to="#/conte

vscode安装 Markdown All in One 插件光标定在md文件中需要需要生成目录的位置，Ctrl+Shift+P 快捷键，输入 markdown all in one:update table of contents，选择更新目录项，自动生成目录。

文章目录output.pathoutput.publicPathwebpack-dev-server配置项中的publicPath路径问题衍生出的引用问题记录一下自己用webpack打包过程中遇到的三个路径问题：分别是output.path、output.publicPath、webpack-dev-server配置项中的publicPathoutput.pathoutput.path指定了webpack打包的总出口，是打包出来的所有文件在硬盘中的存储位置，是一个绝对路径。通常配置如下，即 打包出来的

文章目录报错图片找不到打包路径下没有生成images文件夹或少打包图片打包之后打开页面img标签src="[object Module]"最终打包结果结构报错图片找不到原本配置：我在 development 模式下测试的时候，是把主页 index.html 和 bundle.js 都放在虚拟内存中，即通过http://localhost:port/就可以直接访问还在使用webpack-dev-server的时候设置了 –content-base src ，也就是说静态资源的根目录是 src所

在项目中使用mui框架的NumBox组件作为子组件 NumBox.vue，在页面中引入子组件并注册、使用。数据说明：这个页面是某个商品的详细信息，数据是父组件中通过ajax获得的，存放在 goodsinfo 对象里，其中 goodsinfo.stock_quantity 是库存数量。原NumBox组件中，数量框中最大数量是定死的现在希望这个数量框的上限是根据库存来的一种此处不可行的方案用父组件向子组件传值，把父组件中的 goodsinfo.stock_quantity ，通过 max 传递给

基本配置1、下载npm i vue-preview -S　2、在index.js中引入并安装import VuePreview from'vue-preview'Vue.use(VuePreview) 3、 如果是按照早几年的视频教学方法，会在页面中引入以下标签<img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index,

想用MUI的滑动组件，引入了 mui.js 报严格模式相关的错，因为组件里面有不严格模式，用而webpack打包默认使用严格模式，所以需要取消webpack的严格模式（毕竟把第三方组件改成严格模式更麻烦）报错信息解决办法下载@babel/plugin-transform-modules-commonjs 、 @babel/plugin-transform-strict-modenpm install -D @babel/plugin-transform-modules-commonjs @b

下载所需babelnpm install -D @babel/plugin-transform-runtimenpm install -D @babel/plugin-transform-regenerator.babelrc配置文件里添加这两个插件{ "presets": [ ["@babel/preset-env", { modules: false }] ], "plugins": [ "@babel/plugin-transf.

不做 chrome配置的话，自动打开Edge浏览器按如下配置指令..."scripts": { "dev": "webpack-dev-server --progress --open chrome --port 8888 --content-base src", },...–progress --open chrome：自动打开chrome–port 8888：自定义端口–content-base src：设置打开位置...

我使用的webpack版本是 “webpack”: “^5.38.1”,，webpack 4之后有很多东西用法发生了变化，在此简单记录使用中出现过的问题。用 style-loader 使用 style 标签将样式插入到页面中以下两部分一般同时用抽离css文件为了把css样式拎出来作为一个.css文件npm install -D mini-css-extract-pluginconst MiniCssExtractPlugin = require('mini-css-extract-pl

我使用的webpack版本是 “webpack”: “^5.38.1”,，webpack 4之后有很多东西用法发生了变化，在此简单记录使用中出现过的问题。npm install -D uglifyjs-webpack-plugin这篇可以和上一篇使用vendors分离第三方模块结合起来 const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { entry: { app: './s

我试用的webpack版本是 “webpack”: “^5.38.1”,，webpack 4之后有很多东西用法发生了变化，现查现用把。需要把第三方模块单独拎出来打包成一个js文件，在webpack生产环境中配置：// webpack.publish.config.jsmodule.exports = { entry: { app: './src/index.js', // 项目主入口文件 vendors: ['jquery'] // 分离第三方模块 }, output:

我试用的webpack版本是 “webpack”: “^5.38.1”,，webpack 4之后有很多东西用法发生了变化，现查现用把。下载插件：npm install -D clean-webpack-pluginwebpack生产环境配置// webpack.publish.config.js const {CleanWebpackPlugin} = require('clean-webpack-plugin') module.exports = { ... plugin

用 clean-webpack-plugin 插件，在每次发布之前先把dist老文件清空npm install -D clean-webpack-pluginpackage.json 简化打包指令“scripts”:{ "pub": "webpack --config webpack.publish.config.js"}webpack.publish.config.js 错误配置const CleanWebpackPlugin = require('clean-webpack-plug

1、装 Code Runner 插件2、顶部工具栏 终端->新终端->选择当前工作文件夹3、搞一个输出测试一下（右键->run code），ok4、咦，终端为何如此5、找到vs程序图标，右键->属性->目标这一栏末尾 一个空格之后 追加 --disable - gpu6、重启vscode，okk！...

出现这个问题请移步这里

通过一个小小小的项目来走一遍webpack最最基础的流程吧！文章目录项目目录基本配置打包热更新Error: Cannot find module 'webpack-cli/bin/config-yargs'项目目录 root |__dist | |__bundle.js |__src | |__images | |__css | |__js | |__main.js | |__index.html |__webpack.config.j

mouseout：有冒泡机制，鼠标从father进入内部子元素son区域算mouseout，离开内部子元素son区域到father也算mouseout（相对子元素的离开行为冒泡到了父元素身上），离开father也算mouseoutmouseleave：没有冒泡，一旦进入father，就可以在里面自由活动，只有离开father本身才算mouseleave...

使用bootstrap模态框插件出现弹出框和背景一起变暗的问题。看起来就像弹出框被遮在了mask下面，考虑z-index优先级关系。可以看到遮罩层.modal-backdrop的z-index: 1040;解决办法：设置.modal-dialog { z-index: 10000!important;}修改完成：...

功能自动轮播，鼠标进入轮播区后变为手动控制；鼠标进入轮播区出现左右移控制箭头；图片由左右移箭头控制切换，并且底部轮播圆圈相应变化底部轮播圆圈数量自适应图片数量；点击圆圈切换图片效果备注1、本案例完整资源参见：2、可以通过控制台观察索引变化3、没有做无缝轮播，日后有空再完善代码1、html页面框架 lunbo.html<div class="lunbo"> <!-- 滚动区域 --> <ul class="gundon

前提nodejs已经下载安装，并配置好环境变量测试：node -vnpm -v下载最新express很多经验说用npm install -g expressnpm install -g express-generator但我npm install -g express就报错了建议先npm install -g express-generator，再npm install -g express创建项目express mynode.js启动项目根据上图的三个指令启动项目

一、HTML标签简写及全称大全HTML标签英文全称中文释义aAnchor锚abbrAbbreviation缩写词acronymAcronym取首字母的缩写词addressAddress地址altalter替用(一般是图片显示不出的提示)bBold粗体（文本）bdoDirection of Text Display文本显示方向bigBig变大（文本）blockquoteBlock Quotation区块