- 博客(107)
- 收藏
- 关注
RSS订阅原创 webpack打包之 copy-webpack-plugin
在离线应用中，前端所有文件都需在在本地，有些文件（比如iconFont以及一些静态img)需要转为离线文件，这些文件可以直接引用更方便些，这就需要在打包时直接复制到打包文件下。copy-webpack-plugin 打包复制文件插件。3、配置webpack。1、什么时候要使用？
2023-07-18 16:15:46
2419
原创 webpack插件compression-webpack-plugin
浏览器向服务器发出请求，并且在请求头中声明可以使用gzip的编码格式，服务器接受到请求之后，读取压缩后的文件，服务器直接返回给浏览器gzip格式的文件，浏览器进行解压缩，这样以来就节省了服务器压缩的时间。打包的时候开启gzip可以很大程度减少包的大小，页面大小可以变为原来的30%甚至更小，非常适合于上线部署。更小的体积对于用户体验来说就意味着更快的加载速度以及更好的用户体验。2、为什么gzip压缩后页面加载速度提升。(3) npm run build 打包。（2）配置webpack。（4）配置nginx。
2023-07-18 16:01:25
2827
1
原创 禁止触摸屏触控板手指缩放，需要这样处理
使用 touch-action: none作用于html元素上，可以禁止页面缩放，因为该样式属性是非继承属性，不会影响页面子元素的手势操作。请注意，滚动向上（pan-up）意味着用户正在将其手指向下拖动到屏幕表面上，同样 pan-left 表示用户将其手指向右拖动。可以与 pan-x 、pan-left 、pan-right 和／或 pinch-zoom 组合使用。可以与 pan-y 、pan-up、pan-down 和／或 pinch-zoom 组合使用。}全局作用，则会影响子元素的各种手势操作。
2023-04-27 15:04:37
1169
1
原创 触摸屏，解决iframe无法触摸缩放以及滚动的问题
3、设置-webkit-overflow-scrolling: touch;2、设置overflow:auto;这时在电脑端是可以滑动了，但是手机端还是不行的。1、设置固定的宽和高（单位：px）找到ifream的父级元素。
2023-04-27 14:59:49
897
原创 问题：vue3导入模块时报错---‘HelloWorld‘ is declared but its value is never read.Vetur(6133)
vue3不支持vetur 报错'HelloWorld' is declared but its value is never read.Vetur问题
2022-06-09 14:27:29
708
原创 pnpm安装以及使用
pnpm 官网https://pnpm.js.org/installation/切换淘宝镜像npm config set registry http://registry.npm.taobao.org 全局安装pnpmnpm install pnpm -g使用pnpm install 包 // pnpm i 包pnpm add 包 // -S 默认写入dependenciespnpm add -D // -D devDependenciespnpm add -g
2022-03-31 14:00:21
5094
原创 使用 nvm 管理不同版本的 node 与 npm
上一篇已经安装好nvm，接下来就是用nvm 管理不同版本的node和npm（1）安装需要版本的node环境：例如安装 node 14.11.0nvm install 14.11.0或者nvm install v14.11.0（2）安装模糊版本nvm install v16（3）列出已安装实例nvm list或者nvm ls(4)切换版本适用14版本nvm use 14(5)当前使用版本nvm current(6)卸载nodenvm uninstall v1
2022-03-16 20:06:48
586
原创 macOS安装 nvm node管理
之前已经介绍过安装brew，此次安装nvm通过brew安装安装命令：brew install nvm 安装完成后需要在 .bash_profile 文件添加下面该行，配置环境变量：source $(brew --prefix nvm)/nvm.sh完成后，重新加载环境变量，执行下面的命令：source ~/.bash_profile验证是否安装成功 nvm --version...
2022-03-16 19:18:22
1150
原创 macOS 安装 brew步骤
方法一：执行brew官网命令安装brew官网中复制下图中命令，在terminal中输入该命令，即：/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"输入命令回车后，我们会发现下载速度很慢，然后就超时报错。重复输入命令下载，仍然没法解决。于是尝试着第二种方法，更换镜像源。方法二：更换镜像源安装brew使用国内源/bin/zsh -c "$(curl -
2022-03-16 19:00:51
6274
4
原创 js - 继承方式
总结一下js继承的几种方式1、原型链继承核心：将父类的实例（对象）作为子类的原型父类：function Father(name) { this.name = name}Father.prototype.age = 13;Father.prototype.getEat = function (food) { console.log('吃' + food)}子类：function Son(name) { this.name = name}Son.prototyp
2022-03-08 11:25:09
115
原创 关于回流与重绘的小结
在谈回流与重绘之前先梳理一下，浏览器的渲染过程。一、浏览器渲染过程1、解析HTML，构建DOM树2、解析CSS，生成CSS规则树3、合并DOM树和CSS规则，生成render树4、布局render树（Layout/回流），根据生成的render树，进行回流(Layout)，得到节点的几何信息（位置，大小）5、绘制render树（paint/重绘），根据渲染树以及回流得到的几何信息，得到节点的绝对像素，绘制页面像素信息6、浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite
2022-02-15 09:16:49
282
原创 http协议和https协议
标准Http协议支持六种请求方法，即： 1、GET 2、POST 3、PUT 4、Delete 5、HEAD 6、Options一般情况下我们只用到get和post请求，如果详设计一个符合RESTful规范的web应用程序，但其实我们大部分情况下只用到了GET和POST。如果想设计一个符合RESTful规范的web应用程序，则这六种方法都会用到。不过即使暂时不想涉及REST，了解这六种方法的本质仍然是很有作用的。大家将会发现，原来web也是很简洁明了的。到这里，大家应该有个大概的
2022-02-09 10:51:38
901
原创 vue-cli3搭建多入口应用项目搭建以及webpack配置
vue.config.js官方配置指南现附上官网链接。通过vue-cli3脚手架初始化项目之后，发现webpack的config配置文件没有了。这是由于vue-cli3将webpack的基础配置全部内嵌了。那我们想要优化或者修改配置怎么办呢？vue-cli3它预留了一个vue.config.js的js文件供我们对webpack进行自定义配置。通过一下步骤自定义webpack配置：1、新建vue.config.js在项目根目录下，新增js文件vue.config.js。vue.config.js 是一
2022-01-18 11:05:11
2098
原创 Cannot read property ‘upgrade‘ of undefined at Server.＜anonymous＞ (/Users/mengxianwei/studywork
配置完webpack后启动报错10% building 2/2 modules 0 active ERROR TypeError: Cannot read property ‘upgrade’ of undefinedTypeError: Cannot read property ‘upgrade’ of undefinedat Server. (/Users/mengxianwei/studyworkspace/single-multi-page/single-multi-page/node_mo
2022-01-14 15:59:43
839
原创 解决vue多次打包后出现浏览器缓存的问题
每次打包更新版本上传到服务器上，会偶尔出现代码没有更新还是旧代码的逻辑，这就代表浏览器存在缓存的问题了。解决方案每次打包改变js的名称就OK了，在vue.config.js 下修改/添加出口output，通过时间戳命名使每次包的名称都不一样1、vue-cli3中const Timestamp = new Date().getTime(); //时间戳configureWebpack: { output: { filename: 'js/[name].'+Timestamp+'.js
2022-01-14 08:45:00
1364
原创 vuex持久化处理
在使用vuex时有一个弊端就是，就是一旦页面刷新，所有之前存储的状态就全部没了，这是因为js代码运行在内存中，代码运行时所有的变量和函数都是保存在内存中的，刷新的时候以前申请的内存将会被释放，并且js脚本会被重新加载，变量重新赋值。所以在我们使用vuex的时候只要一刷新数据就没了。如果我们想要持久化保存数据可以使用 localStorage 或者sessionStorage 存储在本地，保证刷新后数据不会丢失。但我们也可以使用插件实现刷新后数据不丢失在这里我推荐使用这两个插件vuex-persisted
2021-12-23 16:52:13
1102
原创 vuex优缺点小结
vuex是vue中的状态管理模式。它采用集中式存储管理应用的所有组件的状态。项目中也会经常用到，今天总结一下其优缺点。1、优点能够在vuex中,集中管理共享的数据,易于开发和后期维护；Vuex 的状态存储是响应式的，当 Vue 组件从 store中读取状态的时候，若 store 中的状态发生变化，能够触发响应式的渲染页面更新 (localStorage就不会)，那么相应的组件也会相应地得到高效更新。js 原生的数据对象写法, 比起 localStorage 不需要做转换, 使用方便限定了一种可
2021-12-23 16:43:34
6549
原创 Vue中父子组件生命周期执行顺序小结
在单一组件中，钩子的执行顺序是beforeCreate-> created -> mounted->… ->destroyed，但当父子组件嵌套时，父组件和子组件各拥有各自独立的钩子函数，这些父子组件的这些钩子是如何交融执行，且执行顺序又是怎样的呢?组件，分别在他们的钩子函数中打印日志，观察执行顺序。得到的结果如图所示，父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载。父beforeCreate-> 父create -> 子beforeCreate->
2021-12-21 16:24:15
598
原创 tabbar uni.switchTab()传参数问题
因为uni.switchTab()实现跳转无法在链接上挂参数，如果想要传参数，需要通过Storage或者设置全局变量1、发送参数页面uni.setStorageSync("serviceItemId", serviceItemId); //赋值uni.setStorageSync("currentIndex", index); //赋值uni.switchTab({ url: '/pages/playList/index'})2、接收页面 onShow(e) { let current
2021-12-21 14:48:12
3152
原创 uniapp微信小程序自定义tabbar，并且实现每次切换都刷新页面
0、page.json定义页面pages"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/indexPage/index", //首页 "style": { "navigationStyle": "custom", "navigationBarTextStyle": "white" } }, { "path":
2021-12-21 14:36:08
7160
3
原创 总结 git命令
一、新建代码库在当前目录新建一个Git代码库$ git init新建一个目录，将其初始化为Git代码库$ git init [project-name]下载一个项目和它的整个代码历史$ git clone [url]二、配置Git的设置文件为.gitconfig，它可以在用户主目录下（全局配置），也可以在项目目录下（项目配置）。显示当前的Git配置$ git config --list编辑Git配置文件$ git config -e [–global]设置提交代码时的用户信息$
2021-12-15 11:26:55
70
原创 小程序页面跳转的几种方式总结
最近在做微信小程序，碰到页面跳转的问题，总结一下页面之间跳转的方式1、navigateTo(OBJECT)这是最普遍的一种跳转方式，其官方解释为：“保留当前页面，跳转到应用内的某个页面”类似于html中的 window.location.href=" "eg：wx.navigateTo({ url: 'test?id=1'})实际效果如下：小程序中左上角有一个返回箭头，可返回上一个页面。也可以通过方法 wx.navigateBack 返回原页面2、redirectTo(OBJECT
2021-12-02 14:56:57
3553
原创 js中 object 常用方法总结
最近总用到object的一些方法和属性，做一下总结，方便理解以及之后查阅。1、Object.assign(target,source1,source2,…)该方法主要用于对象的合并，将源对象source的所有可枚举属性合并到目标对象target上,此方法只拷贝源对象的自身属性，不拷贝继承的属性。1、Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。同名属性会替换。2、 Object.assign只能进行值的复
2021-10-09 17:01:53
1449
原创 vue-cli4 配置 webpack 之用 image-webpack-loader图片压缩处理/优化
vue-cli4已经默认帮我们做了很多优化处理，包括静态资源输出、样式处理、代码分割等等。我们需要自己手动配置的事情更少了，而图片压缩处理就是其中的一件。很多人直接这样在vue.config.js里面加 image-webpack-loader 配置：chainWebpack: config => { config.module .rule("images") .use("image-webpack-loader") .loader("image-webpa
2021-09-23 14:58:29
5821
1
原创 vue ESLint报No ESLint configuration found
1.eslint简介eslint是用来管理和检测js代码风格的工具，可以和编辑器搭配使用，如vscode的eslint插件当有不符合配置文件内容的代码出现就会报错或者警告2.安装eslint(1)npm init -y(2)npm install eslint –save-dev(3)./node_modules/.bin/eslint –init 初始化配置文件(4)init初始化配置How would you like to use ESLint? (Use arrow keys)
2021-09-09 14:03:35
1756
原创 webpack打包9之多入口配置
我们之前完成的配置是单入口，只有一个入口。那么如果有多个入口我们要怎么配置呢？1、在src下新建两个js文件aa.jsconst $ = require('jquery') //引入jquery 并赋值给$,方便之后使用jquery,直接用$就好console.log($('div'))const app = document.querySelector('#app');const h1 = document.createElement('h1');h1.innerHTML = 'hello
2021-09-06 10:26:03
251
原创 webpack打包8之生产环境和开发环境
我们程序是要区分环境的，生产环境和开发环境。开发环境是在本地运行，而生产环境是要产出，运行在服务器给用户使用的代码，因此两者还是有一定区别的，比如打包后的文件在生产环境要尽可能的小，逻辑代码分离，优化静态资源（压缩图片等）但是两个环境的很多配置还是可以共用的，比如entry oupput module等，因此可以把这些公共代码抽离出来放到一个独立文件进行合并，可以依赖webpack-merge工具来合并。1、安装依赖yarn add webpack-merge -D2、开始拆分webpack.co
2021-09-06 09:49:23
457
原创 webpack打包7之webpack-dev-server开发版配置
我们不能每次写一次代码就要打包一次看一次效果，为了我们开发方便需要配置一下开发环境，让页面实时刷新，每改一次代码，页面也会跟着刷新，不需要在打包看效果。为了开发效率更快，1、安装yarn add webpack-dev-server -D2、安装完之后配置启动脚本如下 "scripts": { "start": "webpack-dev-server --config webpack.config.js", "build": "webpack --config webpack.c
2021-09-06 09:03:39
329
原创 webpack打包6之配置高版本js兼容-配置babel
webpack使用babel处理高版本的js语法1、安装包yarn add -D babel-loader @babel/core @babel/preset-env2、配置module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: {
2021-09-06 08:46:26
145
原创 webpack打包5之配置清除dist目录插件
之前的基本配置验证的时候，每次打包的都要手动清掉否则会影响页面正常显示。为了解决这个问题需要配置一个清包插件，每次执行打包会自动删除dist包需要用到clean-webpack-plugin1、安装yarn add clean-webpack-plugin -D2、引入const {CleanWebpackPlugin} = require('clean-webpack-plugin');3、配置插件 plugins: [ new CleanWebpackPlugin
2021-09-03 15:14:03
1574
原创 webpack打包4之处理img
webpack不认识图片需要配置转换图片的loader来处理。主要用到的loader有url-loader和file-loader。1、下载依赖包yarn add url-loader file-loader -D2、配置loadermodule: { rules: [ { test: /\.(png|jpg|gif)$/i, use: [ { loade
2021-09-03 14:51:02
326
原创 webpack打包3之处理css文件
因为webpack 只能理解 JavaScript 和 JSON 文件，他不会识别css。如果想要失败其他文件需要配置loader加载器处理。webpacke处理css文件需要 css-loader和style-loader。（1）css-loader让webpacke认识css文件。（2）style-loader让解析后的css文件，能够让css样作用到页面上一、基础配置1、安装两个依赖包yarn add css-loader style-loader -D2、配置module.export
2021-09-02 18:57:37
348
原创 webpack打包2之配置自动生成html ——html-webpack-plugin插件
上一篇文章中实现隔行变色，在index.html中手动引入打包后资源，是有缺点的（比如：webpack配置中输出的打包文件名称修改了，需要及时去index.html中同步修改）避免以上情况，我们可以使用html-webpack-plugin插件1、下载安装yarn add html-webpack-plugin -D -D 将依赖记录成开发依赖，只在开发阶段用，实际上线不需要的2、引入，在webpack.config.js文件中，引入这个插件const HtmlWebpackPlugin =
2021-09-02 17:12:31
195
原创 webpack打包1之基于webpack实现隔行变色练习
1、新建public文件以及index.html文件在index.html里面引入打好的bundles.js包<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=
2021-09-02 15:40:29
59
原创 webpack打包0之基本配置
0、新建项目 名称demo1、创建目录 src/main.js//随便在main.js文件中输出个东西console.log('这是main.js')2、初始化切换到demo项目下yarn init -y3、安装依赖（-D将依赖记录成开发依赖，只是在开发中需要依赖，实际线上不需要）yarn add webpack webpack-cli -D安装完成之后，项目下会多出一个node_modules文件，文件下就是各种依赖包4、到package.json中配置scripts执行脚本
2021-09-02 15:15:43
91
原创 小程序引入组件库报错VM128:1 Unhandled promise rejection TypeError: WebAssembly.instantiate(): Argument 0 must
小程序引入uniapp组件库就报错VM128:1 Unhandled promise rejection TypeError: WebAssembly.instantiate(): Argument 0 must be a buffer source or a WebAssembly.Module object解决方案修改一下调试基础库就好了
2021-07-30 10:03:14
253
原创 微信小程序项目创建步骤
1、首先去微信公众平台注册账号https://mp.weixin.qq.com/2、安装微信开发者工具 （本文安装的是stable稳定版）https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html3、安装HBuilderXhttps://www.dcloud.io/hbuilderx.html4、打开Hbulider创建uni-app项目默认模版就可以5、设置微信小程序密钥（这步很重要）小程序密钥在已经
2021-07-30 09:55:51
1043
原创 html,css,js加载顺序
<head lang="en"> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/*.css"> <script src="js/*.js></script></head>DOM文档的加载顺序是由上而下的顺序加载；1、DOM加载到link标签（css）css文件的加载是与DOM
2021-06-19 17:32:32
1788
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人