- 博客(35)
- 收藏
- 关注
RSS订阅原创 vscode缩进设置了4个空格，有时又变成2个空格了
其实我不是很喜欢去研究编辑器配置的，但是最近感觉一直有个问题困扰我，就是打开的项目，我编辑的时候明明修改了底部空格为4，但是后面再打开有时候又变成了2个空格，而且影响原来的代码排版image也就是当我编辑文件的时候，我不喜欢2个空格的缩进，就改成了4个空格，但有时候打开编辑这个文件的时候它神奇的变回了原来的2个空格缩进，再经过一系列调整后回到4个空格了，偶尔的时候又发现变回2个空格了...
2022-09-24 11:08:15
1109
原创 webpack之babel学习系列2——babel设计 / 组成 / 简介
第一篇webpack之babel学习系列1—babel历史一、babel设计理念图片(在 AlloyTeam 找的图，AST：Abstract Syntax Tree, 抽象语法树)从图上可以看到，Babel 会将我们写的代码转换AST之后，通过遍历 AST 树，对树做一些修改，然后再将 AST 转成 code，这样我们用的 箭头函数，let，const，解构赋值才能用的舒坦二...
2021-12-11 22:06:29
113
原创 webpack之babel学习系列1——babel历史
第二篇webpack之babel学习系列2——babel设计，组成前端的蓬勃发展得益于 Google的V8引擎(2008年出现)，[Node.js]的诞生(2009年出现，npm 10年出现)； V8引擎把 Javascript 的运行速度提上来了(有兴趣的可以看下 Chrome 第一次出现的时候，大家对网页加载速度惊叹)，有了 Node.js 前端出现了打包、编译变得工程化，前端一下子从[石器...
2021-12-11 21:49:57
123
原创 Mutation不能使用异步函数
为什么必须是同步更新？因为在开发过程中，我们常常会追踪状态的变化。常用的手段就是在浏览器控制台中调试。而在 mutation 中使用异步更新状态，虽然也会使状态正常更新，但是会导致开发者工具有时无法追踪到状态的变化，调试起来就会很困难。index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const stat...
2021-12-10 18:18:29
134
原创 在命名空间的VUEX中的{ root: true }
vueX的modules中在当前文件中想调用另外一个文件里面的方法的时候就需要加上{root:true}image.png
2021-10-28 16:21:41
189
原创 vue-cli 使用 webpack-bundle-analyzer
不需要安装插件，不需要配置 package.json 文件，不需要安装webpack-bundle-analyzer、 ~~！！去看 vue-cli 的官方文档运行 npm run build -- --report在dist文件生成一个report.html文件，直接打开即可访问image.pngimage.png...
2021-10-20 17:53:28
65
原创 javascript中 throw error 与 throw new Error(error)的用法及区别
抛出错误一般都是与try catch 同时出现的先看定义：throw new Error(error); 这个是创建错误，创造一个错误类型抛出throw error 这个是抛出错误。上代码：throw new Error(error)var a = 5;try{ if(a==5){ // 抛出错误 throw new Error("loo...
2021-09-13 10:06:59
67
原创 宏任务和微任务有什么区别
微任务和宏任务皆为异步任务，它们都属于一个队列，主要区别在于他们的执行顺序，Event Loop的走向和取值。宏任务和微任务的一些分配宏任务 浏览器 NodeI/O ✅ ✅setTimeout ✅ ✅setInterval ✅ ✅setImmediate ❌...
2021-06-28 09:56:25
102
原创 深拷贝与浅拷贝的区别，实现深拷贝的几种方法
壹 ❀ 引如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。此篇文章中也会简单阐述到栈堆，基本数据类型与引用数据类型，因为这些概念能更好的让你理解深拷贝与浅拷贝。我们来举个浅拷贝例子：let a=[0,1,2,3,4], b=a;console.log(a===b...
2021-06-23 09:26:22
76
原创 js 的 forEach 循环中使用 return 不能跳出循环
我们都知道 for 循环里要跳出整个循环是使用 break，但在数组中用 forEach 循环如要退出整个循环呢？使用 break 会报错，使用 return 也不能跳出循环。那么在用 forEach() 遍历数组时要如何才能跳出循环呢？第一种：使用 for 循环代替 forEach在平时的项目中，我们大多数都是封装的函数，然后传参调用的。如下：var arr=[1,2,3,4,5];fu...
2021-05-28 18:44:00
250
原创 lib-flexible和postcss-pxtorem搭配实现移动端自适应
lib-flexible解决移动端适配的问题postcss-pxtorem将px转化成rem单位# postcss-pxtorem：npm i postcss-pxtorem -d新建postcss.config.js 配置postcss-pxtoremmodule.exports = { plugins: { 'postcss-pxtorem': { root...
2021-05-25 17:12:16
104
原创 VUE监听路由变化的几种方式
VUE页面开发中，我们经常需要根据路由的变化去实现一些操作，那么如何监听路由的变化呢？当然是利用VUE中的watch，请看代码。一、监听路由从哪儿来到哪儿去$route(to,from){ console.log(from.path);//从哪来 console.log(to.path);//到哪去 }二、监听路由变化获取新老路由信息watch:{ $rou...
2021-03-09 17:34:11
164
原创 watch '$route'(to,from)无效
watch '$route'(to,from)无效组件代码：watch:{ '$route' (to, from) { // 对路由变化作出响应... console.log(to) }},路由配置:{ path:'/user/:id', name:'User', component:() => imp...
2021-03-09 17:30:26
83
原创 前端html页面，手机查看
在写前端页面中，经常会在浏览器运行HTML页面，从本地文件夹中直接打开的一般都是file协议，当代码中存在http或https的链接时，HTML页面就无法正常打开，为了解决这种情况，需要在在本地开启一个本地的服务器。本文是利用node.js中的http-server，开启本地服务，步骤如下：1 下载node.js官网地址： https://nodejs.org下载完成后在命令行输入命令$ ...
2021-02-20 14:16:30
74
原创 element-ui按需引入修改.babelrc问题
转载：https://blog.csdn.net/qq_39083496/article/details/101349899element-ui提示需要将 .babelrc 修改为："presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "lib...
2020-12-30 10:11:46
52
原创 Mand Mobile 快速上手
Vue CLI 3(插件)(支持1.x/2.x) 创建项目：vue create my-projectcd my-project安装依赖包npm install --save-dev vue-cli-plugin-mandnpm install mand-mobile --save // 安装ui库引入一、按需加载(推荐)在babel.config.js中配置module.ex...
2020-08-28 01:39:52
139
原创 Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作
图片放大预览功能：参考网址项目需求只有一张图片，所以这里隐藏了翻页按钮且只用了一张图片的路径，如果需要多张图片翻页，则需要将多张图片的路径保存到数组中进行操作！具体请点击上方参考网址安装依赖npm install v-viewer --save在main.js中全局引入import Vue from 'vue';import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer, { de
2020-07-10 00:31:09
975
原创 qs库的使用
qs库的npm地址parse将url的参数转化为object对象例如：a=5&b=6 => { a:5,b:6 }const str = "name='hana'&age='18'" console.log(qs.parse(str)) // logs Object { name: "'hana'", age: "'18'" }stringify将对象转为url参数格式console.log(qs.stringify({ name:'hana', age:.
2020-07-10 00:29:34
363
原创 node版本管理工具nvm
目录1、nvm是什么2、下载3、安装4、安装/管理nodejs5、命令提示6、总结1、nvm是什么nvm全名node.js version management，顾名思义是一个nodejs的版本管理工具。通过它可以安装和切换不同版本的nodejs。下面列出下载、安装及使用方法。2、下载可在点此在github上下载最新版本,本次下载安装的是windows版本。打开网址我们可以看到有两个版本：nvm-noinstall.zip：绿色免安装版，但使用时需进行配置。nvm-setup.zip：安装版，
2020-07-10 00:27:57
1011
2
原创 在伪元素中如何使用字体图标
一、下载字体图标二、将下载的字体图标放到项目中三、在main.js中引入四、在css中的使用&::after { content: '\e601'; font-family: 'iconfont' !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}content中写
2020-07-10 00:23:24
1611
原创 项目中快速使用阿里的字体图标
复制链接在浏览器中打开在项目中新建一个字体图标的样式文件 把网页打开的代码复制进去在全局样式文件中引入在组件中直接使用
2020-07-10 00:09:06
304
原创 ‘无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称‘ 或 ‘vue不是内部或外部命令‘，vue-V报错
解决方案：以管理员身份运行PowerShellget-ExecutionPolicy显示Restrictedset-ExecutionPolicy RemoteSigned选择Yget-ExecutionPolicy显示RemoteSigned
2020-07-10 00:07:30
2750
1
原创 解决git上传代码时每次都要输入username & password
##了解知识git config --list：git的config配置项git config --global --unset credential.helper：删除某一配置项(credential.helper就是其中一配置项)git config --global user.name “zhb”：全局添加用户名git config --global user.email “19584434@qq.com”：全局添加邮箱###方法1: （前提是拉取 SSH连接方式的项目）######采用
2020-07-10 00:02:36
2309
原创 windows本地安装部署 Easy-Mock
目录一、背景：二、准备：三、安装：3-1、先装node.js3-2、安装MongoDB3-3、Redis安装四、部署Easy-Mock集万家之精华最详细的本地部署 Easy-Mock 没有之一了一、背景： 在前后端分离的开发方式下，后端如果暂时没数据，前端为了开发方便可以使用模拟数据来对付一下，目前提供模拟数据的平台已经有不少，大多数都是自带Api管理的，比如Yapi、sosoApi、eoLinker、Ea
2020-07-09 23:59:32
873
转载 标准盒模型和怪异盒模型的区别
css盒模型本质是一个盒子，它由边距、边框、填充和实际内容组成。盒模型能够让我们在其他元素和周边元素边框之间的空间放置元素。标准盒与怪异盒的区别在于他们的总宽度的计算公式不一样。标准模式下总宽度=width+margin（左右）+padding（左右）border（左右）；怪异模式下总宽度=width+margin（左右）（就是说width已经包含了padding和border值）。标准模式下如果定义的DOCTYPE缺失，则在ie6、ie7、ie8下汇触发怪异模式。当设置为box-sizing:co
2020-07-09 23:39:42
389
原创 解决git上传代码时每次都要输入username & password
目录了解知识方法1: （前提是拉取 SSH连接方式的项目）方法2: （前提是拉取 HTTPS连接方式的项目）了解知识git config --list：git的config配置项git config --global --unset credential.helper：删除某一配置项(credential.helper就是其中一配置项)git config --global user.name “zhb”：全局添加用户名git config --global user.email “195844
2020-07-09 23:33:39
682
原创 element-ui中Upload 上传文件的使用
功能模块上传图片删除图片预览图片(点击文件名)<template> <div> //action必选参数，上传的地址(要写完整的路径) //on-preview <el-upload action="http://127.0.0.1:8888/api/private/v1/upload":on-preview="handlePreview" :on-remove="handleRemove" :headers="handersObj" :on-suc.
2020-07-09 23:12:40
819
原创 Js 使用new关键字调用函数和直接调用函数的区别
调用经典的构造函数需要加newfunction Person(name, age, job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function () { alert(this.name); }; return o;}var friend...
2020-07-08 15:47:52
40
原创 vue 中全局filter过滤器的配置及使用
一. 在src下面新建filters/index.jsconst currency = (price) => { if (!price) return '0.00' return `人民币${price.toFixed(2)}`}export default { currency}这里的函数就相当于把红色方框里的函数抽离出来,单独放在一个文件image.pn...
2020-06-14 23:22:42
52
原创 '无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称' 或 'vue不是内部或外部命令'，vue-V报错...
解决方案：以管理员身份运行PowerShellget-ExecutionPolicy显示Restrictedset-ExecutionPolicy RemoteSigned选择Yget-ExecutionPolicy显示RemoteSignedimage.png
2020-05-24 11:01:15
32
原创 state,mapState,...mapState对象展开符详解
转载链接：https://www.jianshu.com/p/56e64f028abbstatestate是什么?定义:state(vuex) ≈ data (vue)vuex的state和vue的data有很多相似之处，都是用于存储一些数据，或者说状态值。这些值都将被挂载数据和dom的双向绑定事件，也就是当你改变值的时候可以触发dom的更新。虽然state和data有很多相似之处，但s...
2020-04-14 15:12:56
93
原创 .map() .filter() .reduce() 的用法
转载链接：https://www.jianshu.com/p/e87b195f6943.map()让我用一些简单的例子来解释它是如何工作的。 如果说你收到一组包含多个对象的数组，每个对象是一个 person。最终你只希望得到一个只包含 id 的数组。// What you havevar officers = [ { id: 20, name: 'Captain Piett' }, ...
2020-03-27 14:52:34
33
原创 Vue详细开发插件并且发布到npm上(一)
这一篇开发的插件 类似elementUI中的 Message 消息提示用this.$message()来调用 并且可以传参数image.png一. 前期准备(搭建项目)用 vue init webpack-simple myPlugin 指令去搭建项目image.png搭建出来的结构是这样的:image.png二. 编写插件这里用到两个字体图标...
2020-03-03 16:51:09
59
原创 Vue.extend()
官方例子：image.png注意点:Vue.extend()必须要new出来(实例)let Constructor = Vue.extend()let Profile = new Constructor将创建的Profile实例, 挂载到一个元素上去Profile.$mount('div')例子所用到的文件plugin.js 和 MyHeader.vue在plu...
2020-02-29 17:02:57
34
原创 Vue/Cli快速生成Vue项目基础的架构。
A.安装3.x版本的Vue脚手架： npm install -g @vue/cli vue -V 查看版本号B.基于3.x版本的脚手架创建Vue项目的三种方式： 1).使用命令创建Vue项目#命令：vue create my-project 选择Manually select features(选择特性以创建项目) 勾选特性可以用...
2020-02-29 14:29:12
36
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人