- 博客(184)
- 收藏
- 关注
RSS订阅原创 vue+vite项目报错 Module “path” has been externalized for brower compatibility and cannot be accesed ...
3，不再使用import path from 'path'，改为import path from 'path-browserify'原因是 vite 源码中设定了不允许在客户端代码中访问内置模块代码。1，安装npm install path-browserify。2，使用 path-browserify 代替 path 模块。
2023-10-17 15:46:06
684
1
原创 vue3+vite 项目中配置mockjs
使用插件开发环境是使用 Connect 中间件实现的。与生产环境不同，您可以在 Google Chrome 控制台中查看网络请求记录。
2023-10-16 14:54:20
351
原创 vue3+vite项目中使用svgIcon
如何在vue2+webpack项目中使用svgIcon？这篇文章主要介绍如何在vue3项目中优雅的使用图标1、通过插件封装SvgIcon组件2、配置3、配置如果你使用的Typescript, 可以在配置文件中添加。
2023-10-15 20:07:16
457
转载 git命令报错 warning: LF will be replaced by CRLF in
这种错误的原因是存在符号转义问题，在windows中的换行符为 CRLF， 而在linux下的换行符为LF，所以在执行git add . 或git deploy语句的时候可能就会出现这个错误使用如下命令便可解决：git config --global core.autocrlf false解析：此命令会有三个输出，“true”，“false”或者“input”为true时，Git会将你add的所有文件视为文本问价你，将结尾的CRLF转换为LF，而checkout时会再将文件的LF格式转为
2022-03-17 12:05:56
821
原创 vue.extend()
简述：使用vue.extend返回一个子类构造函数，也就是预设部分选项的vue实例构造器。也就是说var myVue= vue.extend()返回了vue的一个子类。后面可以用vue.component()、new myVue().$mount('#id')、new myVue({el:'#id'}) 进行实例化。实例：<template> <my-footer></my-footer></template><script.
2021-09-14 12:53:40
914
原创 微信小程序 - 页面传参
1、url参数拼接页面A代码：<navigator url="../index/pageB?user_id='12345678'">111</navigator>页面B代码：onLoad: function (options) { this.setData({ user_id:options.user_id })}当然也可以在js页面传值，比如使用wx.navigateTo、wx.redirectTo等,下面是<navigator>
2021-07-08 11:58:28
1812
原创 防止微信、wap浏览器缓存
静态页面防止缓存：1、引入的css 、js文件名 添加时间戳 --防止js、css缓存2、<header>添加代码： --防止页面缓存<meta http-equiv="Expires" CONTENT="0" /> <meta http-equiv="Cache-Control" CONTENT="no-cache" /> <meta http-equiv="Pragma" CONTENT="no-cache" />3...
2020-11-09 15:53:23
381
转载 这一次带你彻底了解Cookie
转自：https://www.cnblogs.com/zhuanzhuanfe/p/8010854.html前言网络早期最大的问题之一是如何管理状态。简而言之，服务器无法知道两个请求是否来自同一个浏览器。当时最简单的方法是在请求时，在页面中插入一些参数，并在下一个请求中传回参数。这需要使用包含参数的隐藏的表单，或者作为URL参数的一部分传递。这两个解决方案都手动操作，容易出错。网...
2019-06-05 14:26:50
353
转载 一分钟教你发布npm包
文章简介：1、摘要：什么是npm?2、如何发布一个自己的npm包3、发布错误集锦摘要：什么是npm?npm是javascript著名的包管理工具，是前端模块化下的一个标志性产物简单地地说，就是通过npm下载模块，复用已有的代码，提高工作效率和移动端开发中，iOS使用的Cocoapods，Android使用的maven有异曲同工之妙。如何发布一个自己的npm包1、创建一个n...
2019-05-30 11:02:20
1061
原创 js中Array.apply(null,Array(3))与Array(3)的区别
vue 的官方文档其中Array.apply(null,{length:3}) 和 new Array(3) 有区别吗？首先，Array.apply(null,{length:3}) 和 new Array(3) 都是创建了一个长度为20的数组，区别是：Array.apply(null,{length:3}) 和调用 Array({length:3}[0],{length:3}[0...
2019-05-28 16:38:57
1560
原创 vue中watch - deep
1、数组的watchdata() { return { winChips: new Array(11).fill(0) }},watch: { winChips: { handler(newValue, oldValue) { for (let i = 0; i < newValue.length; i++) { ...
2019-04-16 17:46:11
3671
原创 vue自定义组件 v-model
官方解释：v-model指令其实是下面的语法糖包装而成：<input :value="something" @:input="something = $event.target.value">因此，对于一个带有v-model的组件，它应该如下：接收一个valueprop 触发input事件，并传入新值利用 $emit 触发 input ...
2019-04-16 11:16:58
3433
转载 mpvue 页面之间传参
转自：https://blog.csdn.net/solocao/article/details/84590700在mpvue中可以使用vuex来存储数据。但是在页面跳转传参方面，我是喜欢用其他写法。小程序原生写法：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.htmlwx.na...
2019-03-13 12:00:36
1979
转载 iframe在ios宽度扩大解决方案
转自：https://www.jianshu.com/p/c71174b378ab样式<style> #iframe { margin-top: 44px; width: 100%; height: 100%; display: block; vertical-align: bott...
2019-03-07 13:32:48
1203
转载 微信小程序中使用iconfont图标
方案一：利用小程序中不支持 ttf 字体，却支持 base64 的特点，我们可以通过将 ttf 字体转码成 base64 ，再通过 iconfont 的特点，通过设置字体大小和颜色来达到目的。具体做法：1.我们可以先去阿里提供的图标库 官网找到我们需要的3个图标， 点击 下载代码 将代码下载到本地~2.解压我们刚才下载的包，会有以下这些文件，但对于我们来说，会用到的只有 iconfont....
2018-10-29 18:41:45
7518
1
转载 webpack postcss-loader autoprefixer 配置
转自：https://blog.csdn.net/xiaotuni/article/details/78014852 如果配置呢？这里用到了webpack、style-loader、css-loader、postcss-loader、sass-loader、autoprefixer安装插件npm install --save-dev webpack style-loader ...
2018-10-15 12:01:28
4614
1
原创 webpack中使用FastClick
为什么要使用FastClick移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。项目地址：https://github.com/ftlabs/fastclick 不需要使用fastclick的情况以下这几种情况是不需要使用fastclick：1、FastClic...
2018-10-12 10:54:51
896
转载 webpack中babel配置 --- runtime-transform和babel-pollfill
转自：https://segmentfault.com/a/1190000014167121 webpack - babel配置babel是一个javascript编译器，是前端开发中的一个利器。它突破了浏览器实现es标准的限制，使我们在开发中可以使用最新的javascript语法。通过构建和babel，可以使用最新js语法进行开发，最后自动编译成用于浏览器或node环境的代码。...
2018-10-12 09:59:41
4447
原创 axios中post中参数问题 --- form Data和Request payload
抛出问题：在vue项目中使用axios发post请求时候，后台返回500。发现是form Data 和 Request payload的问题。后台对两者的处理方式不同，导致我们接收不到数据。 解决问题：首先需要全局配置axios.defaults.headers.post['Content-Type'] = 'Content-Type:application/x-ww...
2018-10-10 13:18:40
18261
原创 vue - axios兼容方案
只需要一个插件：babel-polyfillnpm i -D babel-polyfill添加配置：module.exports = { entry: ["babel-polyfill", "./main/js"]};或者用另外方引用：1.require("babel-polyfill");2.import "babel-polyfill";...
2018-08-31 12:53:47
1080
转载 vue-cli中代理解决跨域
转自：https://segmentfault.com/a/1190000011007043前言我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了，通常我们的请求地址是以localhost:8080来请求接口数据的，localhost是没有办法设置cookie的。我们可以在vue-cli配置文件里面设置一个代理，跨域的方法有很多，通常需要后台来进行...
2018-08-31 12:53:11
431
转载 vscode保存代码，自动按照eslint规范格式化代码设置
转自：https://www.haorooms.com/post/vscode_eslinteslint 自动格式化先说一个前提吧，你在package.json中安装了eslint的依赖，不然配置无用。例如如下依赖："eslint": "^4.19.1","eslint-friendly-formatter": "^4.0.1","eslint-loader": "^2.0....
2018-08-31 03:26:36
127744
7
原创 vue-cli构建的项目中使用svg图标
参考：https://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/参考：https://cisy.me/webpack-svg-sprite/1、安装插件：npm i -S svg-sprite-loader2、更改build/webpack.base.conf.js配置文件 ...
2018-08-26 21:53:28
6934
1
原创 VSCode 插件
最常用快捷键：Ctrl + shift + p : 列出所有可用命令。 1、vscode-icons作用：在左侧项目目录添加不同icon，让目录和文件类型更加直观。安装完后需要配置：File > Preferences > File Icon Theme > VSCode Icons. 2 、Project Manager作用：更加高效的管理项目...
2018-08-12 15:54:55
1795
原创 apply call
apply:方法能劫持另外一个对象的方法，继承另外一个对象的属性. Function.apply(obj,args)方法能接收两个参数 obj：这个对象将代替Function类里this对象 args：这个是数组，它将作为参数传给Function（args-->arguments） apply 其实是将第二关数组参数转换为...
2018-08-01 15:29:09
1000
转载 nodejs全局安装路径的位置
转自：https://www.cnblogs.com/niuxiaoling/p/7993032.htmlnodejs安装在默认的C盘，如果不知道安装在哪里，可以打开控制面板-系统和安全-系统-高级配置中找到所谓全局安装：是指安装在node中node_module的根目录里，可以在电脑的任何位置调用这个方法。那么，如何在找到全局安装的位置呢？方法一：设置到自己想要放的位置：打开：nodejs安装目...
2018-05-22 11:05:40
35385
原创 webpack之publicPath
前言：本文解决了《 webpack之输出路径处理 》最后预留的路径问题正文：要解决《 webpack之输出路径处理 》最后预留的路径问题，只需要在webpack.config.js的output选项中添加publicPath配置。执行npm run build，在浏览器打开dist/index.html文件，所有资源均正常加载！但是，现在执行npm run dev，浏览器打开的http://loc...
2018-05-06 15:28:46
4903
原创 webpack之devServer配置
DevServer 是webpack开发服务器。首先，下载webpack-dev-server库$ npm i -D webapck-dev-server配置package.json：配置webpack.config.js当运行npm run dev的时候，devServer首先会在内存中创建类似的dist目录，在由浏览器打开进行预览。webpack-dev-server其它配置devServer...
2018-05-05 22:50:56
159464
5
原创 webpack之输出路径处理
前言：本文演示了如何通过配置webpack.config.js来优化最后build成功的dist目录。最后留了一个问题待解决正文：紧接上文《 webpack之重新认知babel-loader 》项目目录：执行 npm run build之后，查看dist下面打包结果，简直乱作一锅，我们原本src下目录结构规划的很好啊(¬_¬)！优化dist目录目标目录结构：1、安装插件clean-webpack-...
2018-05-05 22:45:27
16995
原创 webpack之重新认知babel-loader
前言：在《 webpack之loader 》中webpack.config.js对babel-loader进行了简单配置。这篇文章回到我们之前的webpack项目中，看看如何配置babel。正文：回顾之前babel-loader配置这篇文章紧接之前文章 《 webpack之使用less和scss 》。项目目录： package.json 配置。其中babel-core和babel-loader是核...
2018-05-05 19:01:43
8259
原创 webpack之babel讲解
前言：本文演示了如何安装配置babel基本命令如何安装配置babel插件如何配置.babelrc文件如何安装配置babel预设presets正文：babel 是一个强大的js编译器，功能包括不限于：es6编译成es5语法；编译jsx语法安装配置babel首先，创建项目目录,初始化npm$ mkdir babel$ cd babel$ npm init$ mkdir src$ cd src...
2018-05-05 16:45:16
2604
原创 webpack之使用less和scss
前言：本文以sass为例，演示了项目中如何配置应用sass文件。如何让sass文件同样支持模块化。其实，应用sass或者less，是指先将文件交给sass-load或者less-loader处理成css文件，然后再交给css-loader、style-loader进行处理。如果你的项目中使用了scss。安装sass-loader、node-sass$ npm i -D sass-loader no...
2018-05-04 15:28:34
7080
原创 webpack之项目中引入字体
前言：本文演示了如何在项目中应用字体图标；用到的loader: file-loader正文：在common下面新建fonts文件夹，并在其中加入我们手动下载好的字体文件（这里使用开源项目Ionicons）：编辑我们的style/main.css文件。在app.js中引入main.css文件：这里根据以往经验，我们知道这里需要一个loader来处理我们的字体图标。这里，我们需要loader帮我们做两...
2018-05-04 07:56:42
8355
原创 webpack之css模块化
前言本文演示了如何开始css模块化；如何选择性的开启部分css文件的模块化功能；如何让模块化后写入html的class更具有可读性；涉及到的loader： css-loader、style-loader开启css-loader的模块化配置当前项目目录和package.json配置：：如何使css模块化？需要在我们的webpack.config.js中对css-loader进行一些额外设置。编辑ma...
2018-05-04 07:52:50
4695
1
原创 webpack之图片引入-增强的file-loader：url-loader
前言：本文介绍了url-loader（增强的file-loader）； url-loader作用：根据需求选择性的把某些小图片编码成base64格式写进页面；从而减少服务器请求。优化性能。url-loader解决的问题:如果图片较多，会发很多http请求，会降低页面性能。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中...
2018-05-03 14:50:48
6757
原创 webpack之引入图片
前言：本文演示了webpack如何在css文件中引入图片； webpack如何在html中引入图片；需要安装配置的loader: file-loader;为何要使用file-loader：如果我们希望在页面引入图片（包括img的src和background的url）。当我们基于webpack进行开发时，引入图片会遇到一些问题。 其中一个就是引用路径的问题。拿backg...
2018-05-02 16:59:30
7875
1
原创 webpack之引入css
前言：本文演示了如何打包css文件；涉及到的loader: css-loader、style-loader;css-loader的任务：把css文件作为模块打包style-loader的任务：把打包好的css文件动态的插入到html文件的<style>标签内正文：如何利用webpack把样式打包进我们的项目文件？在webpack的世界里，一起文件都是模块。默认webpack只会打包js...
2018-04-27 20:53:51
12059
原创 webpack之loader
前言：本文演示了处理react代码需要安装配置的babel-loader。正文：loader是webpack用来预处理模块的；在每一个模块被处理之前，会预先使用loader处理模块的内容；现在我们来安装babel-loader来处理一段react代码。首先，安装react和react-dom$ npm i -S react react-dom接着，改写我们的app.js如果现在执行 npm run...
2018-04-27 19:46:05
343
原创 webpack之html-webpack-plugin简单配置
前言：本文简单配置了webpack的一个插件：html-webpack-plugin;演示了html-webpack-plugin帮我们做的工作。正文：plugin是webpack一个比较重要的概念。当前webpack.config.js配置：const path = require('path'); module.exports={ entry :{ p...
2018-04-27 17:46:46
3711
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人