- 博客(34)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 前端的安全问题
xss 跨站脚本攻击：（1）原理：页面渲染的数据中包含可运行的脚本（2）攻击的基本类型：反射型（url参数直接注入）和存储型（存储到DB后读取时注入）（3）注入点：HTML节点内的内容（text）；HTML中DOM元素的属性；Javascript代码；富文本//HTML节点内容注入<div><script>alert(1);</script></div>//DOM属性注入<img src='/images/1.png' onerro
2021-11-22 10:32:13
771
原创 webpack-dll
node-module会把所有的库打包成一个文件dll会把所有引入的文件拆开，打包成不同的文件。使用dll技术，对某些库（第三方库：jquery,react,vue…）进行单独打包当你运行webpack时，默认查找webpack.config.js配置文件需求：需要运行webpack.dll.js文件–>webpack --config webpack.dll.jswebpack.dll.jsconst{resolve}=require('path');const webpack=r
2021-09-13 16:38:05
418
原创 webpack-externals
作用：防止某一些(比如cdn引进的jquery库)包，打包到我们最终输出的bundles中。webpack.config.jsconst{resolve}=require('path')const HtmlWebpackPlugin=require('html-webpack-plugin'); module.exports={ entry : './src/js/index.js', output : { filename: 'js/built.js', output: {
2021-08-24 16:48:47
94
原创 webpack-多进程打包
npm i thread-loader -D`babel-loader 是为了把程序员写的es6 es7 es8打包成编译器可以识别的es5语法{test：/.js$/,exclude:/node_modules/,use:{//开启多进程打包thread-loader进程启动大概为600ms,进程通信也有开销只有工作消耗时间比较长，才需要多进程打包loader的执行顺序是从下到上thread-loader要放在要执行多进程的loader的后面（上面）// ’thread-loade
2021-08-24 16:21:02
368
原创 webpack--PWA（网站离线访问技术）
webpack.config.jsconst WorkboxWebpackPlugin=require('workbox-webpack-plugin');//终端下载npm i workbox-webpack-plugin -Dplugins:[new WorkboxWebpackPlugin.GenerateSW({//1.帮助serviceworker快速启动//2.删除旧的serviceworkerclientsClaim:true,skipWaiting:true})].
2021-08-13 16:38:58
183
原创 webpack-懒加载和预加载
test.jsfunction(){}//正常加载可以认为是并行加载（同一时间加载多个文件）index.js（懒加载）console.log('index.js文件被加载了~’)；//import{mul}from './test';document.getElementById('btn').onclick=function(){// 懒加载~：当文件需要加载时才加载~///*webpackChunkName:'test' */设置是为了定义输出文件的名字同时进行代码分割i
2021-08-13 15:05:28
153
原创 webpack-code split(代码分割-单页面应用的配置和多页面应用的配置)
code split作用：js代码不是一个巨大的js 文件，而是拆分成多个js文件，方便并行加载，使代码加载的速度更快方法1：module.exports={//单入口,有一个入口，最终输出就有一个bundle//单页面应用的配置//entry:'./src/js/index.js',entry:{//多入口：有多个入口，最终输出就有多个bundle//多页面应用的配置main:'./src/js/index.js',test:'./src/js/test.js' },output
2021-08-12 17:07:56
374
原创 webpack-tree shaking
tree shaking:去除在应用程序中没有使用的代码，可以使我们的代码体积更小。前提(tree shaking的配置)：1.必须使用es6模块化 2：开启production环境就可以使用了减少代码体积在package.json中配置:“sideEffects":false所有代码都没有副作用（都可以进行tree shaking）缺点：可能会把css/@babel/polyfill(副作用)文件删除解决：”sideEffects":[" *.css ", " *.les
2021-08-12 10:49:16
57
原创 node写一个简单的服务器
*服务器代码启动服务器指令：npm i nodemon -gnodemon server.jsnode server.js*server.jsconst express=require('express');const app=express();app.use(express.static('build',{maxAge:1000*3600}))app.listen(3000);启动：终端 node server.js访问服务地址：http://localhost
2021-08-11 16:49:46
68
原创 webpack--缓存
缓存babel 缓存：代码里面最多的就是js文件，标签结构或者样式文件较少（即使多也没办法处理）babel可以对我们写的代码进行编译处理，处理成浏览器可以识别的语法，即JS的兼容性处理。比如有100个js模块，其中有一个JS模块有变化修改，其他99个模块没有，那么不可能因为这一个JS 模块变化了，就把全部100个JS模块重新打包。这个时候开启babel缓存，先把100个JS模块缓存，第二次构建时，没有变化的JS模块就直接启用缓存。*{test:/\.js$/,exclude:/node
2021-08-11 16:40:54
523
原创 webpack-oneOf
作用：不用一个文件走一遍所有的loader，提高构建速度module:{rules:[ { test:/\.js$/, exclude:/node_modules/, loader:'eslint-loader', options:{ fix:true } }, { //以下loader只会匹配一个 //注意：不能有两个loader配置处理同一种类型文件 // one
2021-08-10 15:10:04
90
原创 优化配置介绍
webpack性能优化开发环境性能优化2.生产环境性能优化1.开发环境性能优化优化打包构建速度优化代码调试2.生产环境性能优化优化打包构建速度优化代码运行性能
2021-08-03 13:37:11
156
原创 webpack--loader执行顺序
正常来讲一个文件只能被一个loader处理，当一个文件要被多个loader处理，那么一定要指定loader的先后顺序{test:/\.js$/,exclude:/node_modules/,//以下属性是设置优先执行pre:'true',loader:'eslint-loader',options:{ fix:true }},{test:/\.js$/,exclude:/node_modules/,pre:'true',loader:'babel-loader',optio
2021-08-03 10:50:07
1018
原创 webpack--html压缩
webpack–html压缩html只有压缩,没有兼容.html标签能识别就能,不能识别就不能.webpack.config.jsplugins:[ new HtmlWebpackPlugin({template:'./src/index.html',minify:{// 移除空格 collapseWhitespace:true, // 移除注释 removeComments:true }})...
2021-07-30 17:19:56
45
原创 webpack--JS兼容性处理eslint
webpack–JS兼容性处理eslint比如const 或者箭头函数这些es6的语法，低版本ie浏览器无法识别。需要配置JS的兼容性基本js兼容性处理–》@babel/preset-env缺陷：只能转换基本语法，如promise不能转换。解决方案如下全部js兼容性处理–》@babel/polyfilla: npm i @babel/polyfill -Db: 在需要兼容的js文件中引入：improt '@babel/polyfill‘ (把js 需要兼容的库，一次性全部引
2021-07-30 13:50:15
263
原创 webpack---js语法检查
webpack—js语法检查webpack.config.jsmodule:{ rules:[ /*语法检查：eslint-loader eslint 注意：只检查自己写的源码，第三方的库不检查 设置检查规则： package.json中eslintConfig中设置 { test:/\.js$/, exclude:/node_modules/, // 第三方的库不检查,不写这句会报错 loader:'eslint-load
2021-07-29 14:10:47
170
原创 webpack之---压缩CSS
webpack之—压缩CSS下载插件`npm i optimize-css-assets-webpack-plugin -D引入 webpack.config.jsconst OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')plugins :[new OptimizeCssAssetsWebpackPlugin()]去终端中 输入webpack 运行 ...
2021-07-29 10:37:10
36
原创 form-create使用案例
代码~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<template> <div class="app-container"> <h1>以下是form-create</h1> <form-create v-model="form" :rule="rule" @on-submi...
2020-04-28 13:17:09
2223
1
原创 el-transfer 用法
<el-transfer filterable v-model="value" :data="transferData" :titles="['成员库', '产品现有成员']" ></el-transfer>data(){return{ //源列表的数据 （source) transfer...
2020-04-02 10:09:46
9823
原创 el table 里面怎么使用el select
<el-table-column prop="value" label="产品类别" width="180"> <template slot-scope="scope"> <!-- <el-select v-model="options.value" placeholder="请输入值"> --> ...
2020-03-23 09:46:59
2541
原创 element ui 中el-table中单选按钮radio标签 lable标签后面的序列号的 删除问题
如果你按照网上的方法，做出了单选效果里面死活都有个序号去不掉的时候。请把 改成{{ }}！<el-table-column label="选择" width="55" > <template slot-scope="scope" > <el-radio ...
2020-03-03 14:53:12
873
2
原创 vuedraggable案例（实现列表相互拖拽增删的功能）
<template> <div class="row"> <div class="col-4"> <h3>表头1</h3> <draggable id="first" data-source="juju" :list="list" ...
2020-02-26 12:44:18
2894
1
原创 报错： [Vue warn]: Invalid prop: type check failed for prop currentName". Expected String
以上代码造成报错,后来知道是因为变量名重复改成这样就行了.
2020-02-11 17:34:23
11139
原创 Later version of Node.js is already installed. Setup will now exit
C:\ProgramData\Microsoft\Windows\Start Menu这个路径下面有个uninstall node.js点击运行在安装就行了，正常卸载才能重装
2020-02-02 14:29:57
6388
8
原创 Vue 中父级给子级传参加冒号和不加冒号的区别
子组件对父组件内的参数校验可以是一个数组,表示父组件传过来的可以是一个Number,或者是Stringprops:{content:[Number,String]}
2020-01-21 19:42:03
859
原创 H5的规范里面table里面有tbody .tbody里面要有tr. 所以可以用标签的 is属性解决这个问题.
H5的规范里面table里面有tbody .tbody里面要有tr. 所以可以用标签的 is属性解决这个问题.ul li 同理
2020-01-20 16:03:45
666
原创 QNE系列 列表渲染
v-for 中key 尽量不要用index,影响VUE复用,降低性能.用后端返回的一些唯一的标识即可改变数组内容让页面变化的方式1:数组修改值,不能通过修改下标的方式.要用7个数组遍历方法:pop push shift unshit splice sort reverse2:改变数据的引用地址template模板占位符,v-for 使用.不会出现标签.(用div...
2020-01-20 15:45:57
140
原创 vue 中的条件渲染
1:3-7 v-if v-else要连在一起用,中间不能间隔其他标签2:v-if ="show==='a'" v-if ="show==='a'" 绑定一个JS表达式包括一个变量data:{ show:'a'}3.条件渲染的时候,如果不加 key. VUE会默认这是已经加载过的input,会从内存里拿缓存数据.不会重新加载渲染....
2020-01-20 10:15:13
140
原创 VUE插件 dev tools 的安装
@VUE插件 dev tools 的安装VUE插件 dev tools 的安装我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计 ，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；增加了 图片拖拽 功能，你...
2019-11-20 16:35:32
217
原创 分页算法原理 if (!pages[page]) pages[page] = []
pges(){const pages=[ ] //申明一个空数组,作为传递所有item后总共的页数this.iconList.forEach((item,index) => { //遍历当前所有传进去的数据 获得单项数据并且index单独提出来此时遍历后也作为拿到手的数据.const page =Math.floor(index/8) //这里在箭头函数内部,page有作用域限制...
2019-06-14 16:28:14
1180
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人