webpack构建工具的学习
什么是webpack 是一个模块打包工具 webpack将前端的所有资源文件(js/json/css/img/less…)都看做模块,来进行处理 会根据模块的依赖关系进行分析,生成对应的资源 原生的webpack只可以完成js/json的打包编译,而转换什么的需要其他插件进行完成,比如说es6转es5,箭头函数转换,都需要依赖其他loader或者插件(plugins) 五个核心概念 入口(entry): 告诉webpack应该使用哪个模块,作为构建内部依赖图的开始,比如vue中我们经常在一个文件夹当中建立index.js或者main.js作为入口文件 出口(output): 在哪里输出文件,以及如何命名这些文件 比如经常可以看到有些目录有dist build等这些,里面只有js,css,img等一些文件,就是打包输出后的东西 loader: 我们需要注意,原生webpack只支持解析js和 json,其他的需要安装对应的loader,比如处理less就需要less-loader 本身是一个函数,接收源文件作为参数,返回转换结果 loader ...
使用nodejs导出md/Markdown文档当中的图片到本地并替换原始图片链接为本地图片链接
有需求才有动力~有时候经常需要将md文件当中的图片离线保存下来,指不定那一天图床挂了,图片找不到了!但是typora没有一键保存到本地图片功能!,必须要一个个右键保存才可以!!!!太坑爹!!! 下载 github下载 gitee下载 原理1234567读取指定目录下的所有文件 => 获取md文件并将路径保存到数组A => 遍历每一个md文件,使用正则判断是否有图片链接=> 当前md的文件下所有图片链接保存到数组B当中的某一项当中(使用push),重复此操作=> 弹出一个数组A的值(也就是md文件的路径) => 弹出一个数组B(也就是当前md所对应的图片链接)=> 对数组B进行遍历访问并保存图片到本地 => 替换内容 => 遍历完成后写入新内容 具体看源代码吧,我把注释写的挺详细的使用 nodejs环境 直接下载源码,记得先安装下依赖!然后 node ./index.js输入安装提示输入文件地址即可(注意要是文件夹!!!) window环境 尝试了下打包,感觉打包的文件好大,打包过程 全局安装下 npm install pk ...
小红书2020校招前端笔试题卷一
题目1-下列说法正确的是()多选12345678A: requestAnimationFrame(foo) 确保使浏览器在下一次重绘之前调用 foo 方法B: 在 addEventListener 的处理方法中使用 e.preventDefault() 可以阻止事件冒泡C: 把 <script> 标签的引入放在文档末尾可以确保脚本下载和执行均在文档解析完成后发生D: 多个 <script> 标签使用 defer 属性引入脚本时,可以确保脚本的执行是按照其被引入的顺序的 答案 A,C,D 解析 更详细的script的defer和async可以看这位博主的 A选项:window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行 BCD选项: B: 记住,阻止事件默认行为是preventDefault 停止事件冒泡是stopPropagation (记住关键字就好了,阻止和停止这二个关键字) ...
移动端适配vue小练习
移动端Vue适配小练习 为了练习,就没有使用自动转换rem的功能,想了解的可以看看这几位博主的 博主1 博主2 想看源码的可以到github或者gitee上下载(后台也打包好了) github地址 gitee地址 项目遇到的问题记录Navigation aborted from “/center“ to “/login“ via a navigation guard解决方法: vue_project\src\router\index.js 路由主入口文件当中添加如下代码 12345678910111213141516171819202122232425262728293031const originalPush = VueRouter.prototype.push//解决重复提交相同链接报错VueRouter.prototype.push = function push(location, onResolve, onReject) { if (onResolve || onReject) return originalPush ...
移动端前端的适配和rem,vm其他的一些的复习
前置总结 1个css像素对应1个设备独立像素 对应n个物理像素 设置一个div:height:100px;width:50px,那么height:100px(css像素) 对应 100个设备独立像素 在dpr为2的屏幕下: height:100px(css像素) 对应 2 * 100 = 200个物理像素 drp为3的屏幕下: width:50px(css像素) 对应 50 * 3 = 150个物理像素 物理像素及屏幕分辨率注意: 屏幕分辨率是一个固定的值,屏幕生产出来就确定了,无法修改! 我们在电脑所设置的,都是显示分辨率! 显示分辨率和屏幕分辨率是二个概念! 重要前提: 物理像素不等于屏幕分辨率,物理像素和独立像素不可改变 我们电脑屏幕,他叫物理像素(也有的叫设备像素),物理像素不可以改变,我们电脑改变的叫分辨率,而不是物理像素. 比如说一块屏幕的物理像素是1920 * 1080,那么我可以更改他的分辨率为1600 * 900,但是没办法办法改变物理像素 简单来说就是**调整分辨率改变的是像素在横轴和纵轴的排布规则,**比如原来是横向放1920的像素, ...
vue一些比较重要知识点的复习
Vue的MVVM模型知道什么是MVVM M: (Model 模型) 即后端传递过来或者自己定义的数据(对应vue组件当中的data,props,computed等) V: (View 视图) 即用户看到的界面UI (也就是我们组件当中的template部分) VM: ViewModel,负责实现View和Model之间数据状态同步的中间对象 MVVM的关系 MVVM优点 在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互,Model 和 ViewModel 之间的交互是双向的,因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到View 上。ViewModel 通过双向数据绑定把 View 和 Model 连接了起来,而 View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。 假如面试问到我说说看MVVM,我可能会这样子回答 我理解的MVVM就是 ...
vue后台的一个项目遇到的一些问题和解决办法的记录
vue使用echarts报错Error in mounted hook: “TypeError: this.dom.getContext is not a function” 解决 一开始是this.$refs.dom获取节点的,后面使用在<el-row>标签上就不可以,所以如果使用this.$refs进行echarts的初始化操作会报错,就使用原生dom获取节点后初始化即可 elementUI 日期选择器在vue-admin中设置中文显示 方法 main.js文件当中 123// import locale from 'element-ui/lib/locale/lang/en' // lang i18n 注释掉import locale from 'element-ui/lib/locale/lang/zh-CN' //添加Vue.use(ElementUI, { locale });//添加 设置前 设置后 moment日期插件输出格式错误 之前输出console.log(moment( ...
盒子模型及块元素水平垂直定位和绝对元素的定位布局和弹性盒
盒子模型组成: content(内容区) border(边框) padding(内边距) margin(外边距) 盒子大小盒子的大小值得就是盒子在容器中实际所占据的高度和宽度(默认情况下我们通过css设置的width和height只是设置了content(内容区)的高度和宽度,实际上盒子模型所占据的高度和宽度是按照下面来计算的) 实际的宽度: 实际宽度 = margin-left + border-left + padding-left + width(content-width) + padding-right + border-right + margin-right 实际的高度: 实际的高度 = margin-top + border-top + padding-top + height(content-height) + padding-bottom + border-bottom + margin-bottom 比如下面图片的实际宽度和实际高度是多少呢? 使用上述公式,就能算出示例中的高宽值 实际宽度 = 20+6+20+400+20+6 ...
我来图书馆实现用云函数cfc进行自动化抢位置
window工具自动抢位置和签到 @地址 前言 抓包的话就不多说啦 只实现四楼自动抢,其他楼自己改改就可以 先下载下代码,单击我进入跳转下载 下载代码后的操作 下载完成后,将其解压后重新在目录内压缩 具体操作步骤 进入单击我进入官网,登录注册实名就不多说了 再单击创建函数 选择空白函数后单击’下一步’ 按照如图选择 单击提交,创建完成 单击**’进入函数详情页’** 单击’函数代码’ 下载刚刚下载的代码 单击’上传代码.zip’ 选择刚刚下载的zip 选择好后单击开始上传 切换回’在线编辑’ 单击编辑进入环境变量设置 添加这二个环境变量 ,单击保存 123456runLibraryUser 自己抓包的用户代码 runLibraryUserSeatIdAndArea 座位号id&区域id 具体看github的文档比如runLibraryUser rjwiaorjawrijoawrrunLibraryUserSeatIdAndArea 561&24 单击’触发器’,增加触发 ...
vue源码分析-快速版(DMQ的MVVM为例)
感兴趣的可以下载这位老师的例子 使用的DMQ的MVVM为例 地址(单击我跳转) 前置知识知道节点 nodeName(节点名称) nodeType(节点类型) nodeValue(节点值) 文档节点 #document 9 null 元素节点 标签名 1 null 属性节点 属性名 2 属性值 文本节点 #text 3 文本内容 知道一些方法或者属性 dom元素.childNodes属性,获取dom元素下的所有节点(包括文本节点和其他(换行符也是文本节点)) 而dom元素.children是获取dom元素下的所有的元素节点 12345678910111213141516171819202122232425<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid ...