- 博客(114)
- 收藏
- 关注
RSS订阅原创 Nuxt 路由切换后 asyncData 跨域报错
asyncData 方法并不是每次都从服务端渲染，只有当页面刷新时才从服务端渲染，而在客户端点击链接跳转时并不从服务端渲染，而是和标准Vue单页面应用一样，从客户端进行渲染。
2022-07-18 15:24:51
1513
原创 从vue项目简单了解什么是SSR
vue是单页应用，创建的项目不利于SEO爬虫，因为SEO爬虫是爬网页的源代码，而vue创建的项目是通过js的解析来生成的页面。SSR就是通过在服务器端将vue生成的页面数据渲染完成后，形成完整的html页面以后再传给浏览器，此时SEO就可以爬虫其中的内容，同时也减少了浏览器向服务器发起的请求数。............
2022-07-01 11:21:08
1074
原创 webpack入门到实战（上）
web开发中我们打交道的无非是html，css，js等静态文件，为什么不直接将工程中的源文件发布到服务器，而是进行webpack打包处理呢？webpack是一个开源的JavaScript模块打包工具，其核心功能是解决模块之间的依赖，把各个模块按照特定的顺序和规则组织在一起最终将打包合并后的文件发布到服务器................................................................................................
2022-06-06 10:08:33
633
原创 vue 项目git commit 规范限制
vue 项目git commit 规范限制背景Commit Message 格式commitlint 工具Git Hooksvue-cli 创建的项目参考背景不规范的 Git Commit 提交使得现有项目的 Git Log 杂乱无章，长此以往，当我们通过 Git Log 来code review 时分不清哪些是我们的新功能，哪些是修复的 bug，哪些是项目的体验优化等等。所以我们就要为 commit 提供一个约束，使我们的提交信息更为规范，能够一目了然的知道我们这次提交的内容是什么类型的更改。Co
2022-04-25 15:36:43
2981
1
原创 Vue插槽slot的使用
Vue插槽slot的使用插槽slot匿名插槽具名插槽作用域插槽其他插槽slot插槽的设计是抽取共性，保留不同，并将不同的地方通过 slot 作为承载分发出去匿名插槽// Article.vue<template> <div> <p>具体说明是什么看你插槽的内容是什么</p> <slot></slot> </div></template>// Home.vue<tem
2022-04-18 11:16:33
684
原创 vue+eslint+prettier格式化
vue项目eslint配置背景手动格式化命令行指令vscode设置背景新建一个 Vue 项目 pro_demo并选择自定义模式vue create pro_demo现在我们来测试一下代码规范，在 Home.vue 文件中有三种方式可以自动格式化这些不符合规范的代码手动格式化命令行指令// package.json文件中"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service buil
2022-04-12 17:18:54
2117
1
原创 defineProperty和proxy区别
从defineProperty和proxy区别理解vue2和vue3原理区别劫持（监听）方式不同defineProperty 劫持对象proxy 劫持对象欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入
2022-04-12 11:43:54
5078
8
原创 koa+mongodb增删改查API接口
koa+mongodb增删改查API接口安装mongodb及可视化工具安装koa脚手架增删改查APIcreate 增删deleteOne 单个删除deleteMany 批量删除改updateOne 单个修改查find 查询所有findOne 查询单个reference安装mongodb及可视化工具MongoDB 提供了可用于 32 位和 64 位系统的预编译二进制包，你可以到MongoDB官网下载按照推荐的方式进行安装此时我们到mongodb的安装目录下找到 bin 文件夹打开cmd命令行工
2022-03-24 14:10:57
3369
原创 node创建脚手架工具
node创建脚手架NodeJS和JavaScript的区别初始化项目commanderNodeJS和JavaScript的区别我们这样理解：JavaScript是基于ECMAScript用来操作DOM和BOM（浏览器）的NodeJS是也是基于ECMAScript，但是是用来操作os（操作系统），file（文件系统），net（网络），database（数据库）的初始化项目npm init --yescommander安装commandernpm i commander初始化/
2021-12-21 15:17:04
1322
原创 exports和export模块加载机制
模块加载exportsexport解构导出通配符导出defaultexportsexports 和 require 是node环境中导入导出文件的方式// 1.jslet m2 = require('./2') // require 就是module.require 是当前模块默认的一个属性console.log(m2)// 2.jsexports.m2 = '我是2文件' // exports 就是module.exports 是当前模块默认的一个属性node会将每个文件看成是一个模块
2021-12-10 16:19:53
725
原创 es6 class及继承
es6 class及继承介绍介绍JS语言的传统方法是通过构造函数定义并生成新对象，是一种基于原型的面相对象的系统。es6 中新增加了类的概念，可以使用关键字class声明一个类，之后以这个类来实例化对象。......
2021-11-23 09:45:47
1008
原创 JS中函数的this指向
js中函数的this指向说明普通函数箭头函数应用对比说明JS中关于函数的this的指向问题根据不同的情况会指向不同的对象，这里只针对一些简单常用的场景进行说明，并对es6的箭头函数中的this指向进行对比普通函数普通函数内部的this对象指向的是在函数执行时绑定的对象，也就是说函数创建的时候是没办法确定这个this到底指向的是谁的function fn() { console.log(this) // 创建时this没有指向性}fn() // 执行时才确定this指向，因为是在window
2021-11-19 14:15:35
950
原创 es6 迭代器iterator
es6 迭代器迭代for...in... VS for...of...问题可迭代构建迭代迭代for…in… VS for…of…我们一般理解的就是for...in...用来循环遍历数组或对象的属性key值for...of...用来循环了遍历数组或对象的属性值看例子：var eles = document.querySelectorAll('*')console.log(eles)我们分别使用这两个迭代对象来遍历一遍问题是不是总是这样呢？我们新建一个对象再来试一下var obj
2021-11-19 11:16:31
921
原创 axios get和post请求传参格式
axios get和post请求传参格式简介get请求参数query参数post请求参数json参数query参数简介使用 axios 请求数据时，分 get 和 post 两种情况，常规设置为// http.jslet instance = axios.create({ baseURL: '', timeout: 3000})instance.interceptors.request.use(config => { return config})instance.in
2021-09-15 10:51:56
1628
原创 HTML5新增实用标签
HTML5新增实用标签一览表欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使
2021-09-14 10:06:50
119
原创 css实现多行省略
css实现多行省略使用伪类实现问题优化使用伪类实现<div class="wrap"> <p class="text" title="人生是围城，婚姻是围城。克莱登大学哲学博士方鸿渐留学回国了。他是个没有用的人，在欧洲四年，转了三个学校，改了几回专业，生活散漫，学无所成。未婚妻和方鸿渐从未见过面，就撒手人寰。他蒙岳父大人资助得以负笈欧洲，所以回国后，先看望了岳父岳母，这才回到家乡见爹娘。方鸿渐不喜欢这些土里土气又打扮时髦的女孩们，爱情在他心中仍一是一片空白的领域。春暖花开的时候，方
2021-09-08 14:21:20
461
原创 神奇的css之mask
神奇的css之mask动画转场线性转场角向转场两张图片融合动画转场线性转场<div class="mask-box"></div>@keyframes maskMove { 0% {-webkit-mask: -webkit-linear-gradient(45deg, #000 0%, transparent 10%);} 10% {-webkit-mask: -webkit-linear-gradient(45deg, #000 10%, transparen
2021-09-07 16:42:53
380
原创 手写简单实现axios
手写实现简单的axios什么是 axios手写实现创建本地文件demo.htmlnode 服务模拟数据axios实现axios({})axios.get()请求和响应拦截器什么是 axios关于 axios 是什么，使用 Vue 开发的同学应该不会陌生，具体的 API 也可以参考axios 中文文档Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。（这里只针对浏览器的原理进行阐述）手写实现创建本地文件demo.html<button i
2021-09-03 15:06:39
1165
2
原创 最简单的node搭建服务模拟API接口
ajax请求node服务请求数据node服务ajax请求数据expressnode服务node构建http服务// httpServer.jslet http = require('http')let server = http.createServer((req, res) => { res.setHeader('Access-Control-Allow-Origin', '*') //可设置允许跨域地址 res.setHeader('Content-Type', 'applic
2021-07-27 15:57:17
1174
原创 eleUI Tab切换echarts显示问题
eleUI Tab切换echarts显示问题问题：使用elementUI中的tab切换选项卡，其中一个tab中内容是echarts图表，出现了图片空白期
2021-07-23 11:21:50
669
原创 彻底搞懂JavaScript单线程异步执行机制
带你彻底搞懂JavaScript单线程异步执行机制关于JavaScriptajax关于JavaScriptJavaScript是一门单线程语言 一切JavaScript中说的多线程都是纸老虎 本质都是用单线程模拟出来的本文的目的就是彻底弄懂JavaScript的事件循环的执行机制。首先，不论你是面试求职，还是日常的开发工作，给定的几行代码，我们需要准确的知道代码执行输出的结果，也就是代码执行的顺序。因为JavaScript是单线程语言，所以它的语句都是顺序执行的，也就是同步任务。但是，如果加载一个包
2021-07-22 11:35:29
2520
2
原创 vue的mixin的理解和应用场景
vue的mixin的理解和应用场景介绍使用局部混入全局混入注意介绍mixin作为功能模块的使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂。官方对mixin的定义mixin（混入），提供了一种非常灵活的方式，来分发vue组件中的可复用功能。其本质就是一个js对象，可以包含我们组件想要复用的任意功能和生命周期，如：data、created、methods、computed等等。使用局部混入// 新建 mixin.jslet myMixin = { created: fun
2020-12-18 16:43:14
2680
3
原创 Vue组件间通信方式
Vue组件间通信方式介绍通信分类props数据传递$emit事件触发使用ref事件总线EventBusEventBus1EventBus2（全局EventBus）EventBus移除parent或rootattrs与listenersProvide与InjectVuex介绍在使用Vue开发项目时，每一个.vue文件都可以被视作一个组件，Vue组件间通信就是这些.vue文件之间通过某种方式进行数据传递，达到信息同步和共享的目的。通信分类常见的组件通信的场景有以下几种父子组件间通信兄弟组件间通信
2020-12-17 11:08:00
260
原创 GitHub预览HTML项目
GitHub预览HTML项目背景预览htmlVue项目预览背景通常我们在github上发布一个项目时，希望可以有链接可以可以看项目的具体内容预览html假设你的项目名是“项目一”，首先去该项目下创建一个新的分支gh-pages去“项目一”的setting下找Github Pages设置这个就是预览地址了Vue项目预览...
2020-12-14 15:12:19
258
原创 echarts5.x按需加载绘制地图geo
echarts常用图表配置背景Bar单个Bar展示数据占比updating背景echarts的配置项实在是太多了，做了这么多图表，每次重新做 一个图表还是要重新写配置，今天特意写个博客把常用的图表及其配置项来个总结，会持续更新。。。Bar单个Bar展示数据占比去查看updating...
2020-11-13 11:55:12
2615
原创 echarts监控容器ResizeObserver
echarts监控容器宽高变化背景实现方案window的resizeResizeObserverelement-resize-detector当resize遇到节流背景我们在使用echarts绘图的时候往往需要我们监控浏览器或者图表容器的宽高来实现echarts图表的resize()功能。这里总结了几种方法来实现实现方案window的resize最常见的就是监控浏览器窗口的大小window.addEventListener('resize', this.chartResize)其中this
2020-10-15 17:36:57
1695
3
原创 moment常用时间操作
moment计算不同时间此时此刻时间格式转化本月第一天凌晨本月第一天的此时此刻此时此刻时间格式转化moment().format('YYYY-MM-DD HH:mm:ss')// 2020-10-14 15:57:51moment().format('YYYY-MM-DD')// 2020-10-14moment().format('HH:mm:ss')// 15:57:51本月第一天凌晨moment().startOf('month').format('YYYY-MM-DD HH:
2020-10-14 16:16:47
1402
原创 configureWebpack、chainWebpack配置vue.config.js
configureWebpack、chainWebpack配置vue.config.js引入问题修改htmlWebpackPlugin.options.titlechainWebpack修改Loader选项添加Loader选项替换规则的LoaderconfigureWebpack引入问题我们使用vue create waf-console-vue创建一个Vue项目时，新生成的项目我们可以看到在public/index.html中有这样的内容：<title><%= htmlWebpac
2020-09-30 09:40:28
50213
3
原创 vue.config.js配置本地，测试，开发环境变量
vue.config.js中如何配置本地，测试，开发环境背景环境配置本地环境测试环境线上环境package.json配置运行开发环境测试环境线上环境注意背景当我们使用vue-cli3.0搭建项目时，相比于之前的vue-cli2.0少了build于config文件夹，所以vue-cli3.0提供了一个可选的配置文件----vue.config.js来对项目进行webpack的配置。最典型的一个配置就是接口配置，如：// vue.config.jsmodule.exports = { // 是否生成
2020-09-14 15:57:17
4321
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人