- 博客(41)
- 收藏
- 关注
RSS订阅
原创 【ESLint】Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南
Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码，但是随着接手的项目越来越多，需要统一每个项目的代码规范，于是在此分享vue项目的几种代码格式化风格(default,standard,airbnb,prettier)的基本区别以及修改为prettier风格。对比肉眼可见的格式化风格差异，并且以字符串单/双引号，每行结尾有无分号，object对象最后一项有无尾逗号作为判断依据VSC
2022-03-04 14:46:59
4089
1
原创 Vue 3 + TypeScript + Vite 2024年4月最新管理系统基建
使用最新 vue3.4，elementplus2.7，vite5.2，eslint9.0，unocss搭建
2024-04-23 11:45:24
1289
4
原创 electron-egg 打包win7系统桌面exe程序遇坑记录
该报错是由于dll文件位置不对引起的，文件路径是否和上面一样，否则您需要使用绝对路径。如果调用的时候还是报错，在代码中设置环境变量，process.env.PATH = ${process.env.PATH}${path.delimiter}${当前文件dll的绝对路径}${process.env.PATH}${path.delimiter}${当前文件dll的绝对路径}
2023-04-21 16:55:11
1693
原创 多个table表格使用v-if切换展示时，会导致table表格渲染内容混淆
问题：多个table表格使用v-if切换展示时，会导致table表格渲染内容出错解决方法：给table加个 key产生原因：vue在渲染组件的时候, 会先按照key判断是否是同一组件，如果没有则按照标签名，这样会导致渲染 el-table组件的时候， 多个被识别成同一个导致渲染内容混淆...
2021-09-26 10:51:55
671
原创 VScode 常用30个插件，非常全面！
VScode 常用30个插件，非常全面！1. Vetur/Volar ：vue/vue3语法高亮、智能感知、Emmet等, 包含格式化功能， Alt+Shift+F （格式化全文）2. ESLint : 校验js代码规范3. Prettier - Code formatter ： 格式化js、css代码插件4. open in browser ： 在文件右键 可以选择在浏览器预览5. Auto Rename Tag : 重命名一个HTML / XML标签时，自动重命名配对的HTML / XML标签
2021-05-27 23:00:20
17478
原创 找不到模块 “path“ 或其相对应的类型声明
找不到模块 “path“ 或其相对应的类型声明使用 npm init @vitejs/app 创建项目添加别名import path from “path”;有这个错误提示：找不到模块 ‘path’ 或其相对应的类型声明找不到名称"__dirname"解决方法：npm install @types/node --save-devimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue
2021-04-29 11:06:39
11821
3
原创 适合Vue使用者的React的详细教程，你值得拥有！
最近把使用uniapp写的小程序，通过taro使用react框架重新写了一下，于是简单总结了一下，写了这篇文章方便熟悉Vue的小伙伴们学习React。安装在html文件中直接引入测试 <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.
2020-12-26 21:49:32
943
原创 vue3.0 正式版体验
Vue3 正式版本已经更新，再次入坑。Vue3新特性首先是向下兼容，Vue3 支持大多数 Vue2 的特性。性能的提升，框架更快，更轻。新推出的Composition API。更好TypeScript支持安装 vue3# 全局安装cnpm i -g create-vite-app#create-vite-app vue3-rescd vue3-rescnpm i# 用 vscode 打开1. vue 实例的创建以及挂载变化Vue2 创建实例并挂载 DOM 上impo
2020-10-14 15:54:01
482
原创 vue源码学习（5）小结
1.vue.$mount作用：手动地挂载一个未挂载的实例到元素上返回值：实例自身示列：// 声明一个Vue的实例let MyComponet = Vue.extend({ template:`<div>Hello!<div>`})// 创建实例并挂载到 id 为#app的Html元素上new MyComponet().$mount('#app')// 或者 先渲染再挂载let componet = new MyComponet().$mount()d
2020-10-12 09:40:25
151
原创 vue源码学习（4）vm.$mount()
1. vm.$mount的使用vm.$mount的作用：手动地挂载一个未挂载的实例到元素上vm.$mount官网示例vm.$mount的源码//原函数// Vue.prototype.$mount = function (// el,// hydrating// ) {// el = el && inBrowser ? query(el) : undefined;// return mountComponent(this, el, hydrating)
2020-10-10 16:34:51
1679
原创 vue源码学习（3）Vue.nextTick()
1. Vue.nextTick的使用Vue.nextTick的使用的作用:Vue.nextTick官网示例Vue.nextTick和平时代码中使用的this.$nextTick原理一样://$nextTick 源码Vue.prototype.$nextTick = function (fn) { return nextTick(fn, this)};...//Vue.nextTick源码部分var callbacks = []var pending = falsevar use
2020-09-29 16:05:28
352
原创 vue源码学习（2）Vue.set()
1. Vue.set的使用Vue.set的作用：向响应式对象中添加一个属性，并让其也变成响应式的2. Vue.set的源码 function set (target, key, val) { if (isUndef(target) || isPrimitive(target) ) { warn(("Cannot set reactive property on undefined, null, or primitive value: " + ((target))));
2020-09-28 11:55:49
149
原创 vue源码学习（1）Vue.extend()
1. Vue.extend的使用Vue.extend的作用：创建一个子类，然后让它继承Vue身上的一些功能。Vue.extend官网示例2. Vue.extend的实现源码export function initExtend (Vue: GlobalAPI) { /** * Each instance constructor, including Vue, has a unique * cid. This enables us to create wrapped "child
2020-09-25 17:17:30
246
原创 vue 实现个简易版（4）
上一篇文章实现了v-bind， v-on指令以及methods等，这一篇来实现computed和watch;1. computed在Vue实例中通过this可以直接访问computed中的计算属性，而且它可以实现缓存，并且只有当依赖的数据变化才会更新;1.1 ComputedWatcher需要定义一个ComputedWatcher，它跟Watcher基本相同，只是再设置值的时候，需要跟新缓存的老值class ComputedWatcher { constructor(vm, expr, c
2020-09-17 11:10:41
139
原创 vue 实现个简易版（3）
上一篇文章实现了数据的双向绑定，这一篇来实现v-bind， v-on指令以及methods等。1. v-model语法糖指令拆分处理1.1 首先来修改判断是否是指令的函数isDirective(attrName){ return attrName.startsWith('v-on:')||attrName.startsWith('v-')}1.2 再修改使用指令对应工具函数的部分compileElement(node){ let attributes = node.attri
2020-09-17 11:05:58
145
原创 vue 实现个简易版（2）
上一篇文章实现了模板数据展示到视图上面，这一篇来实现数据的双向绑定。Watcher实现一个Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。这里的实现需要结合发布订阅者模式。1. Dep类的实现完成对于依赖的收集和触发class Dep{ constructor(){ this.subscribers = new Set() } addSub(sub){ this.subscribers.add(sub) } notify(){ this.subsc
2020-09-16 10:15:46
120
原创 vue 实现个简易版（1）
从零开始一步一步实现个简易版vue，包含响应式，computed，watch，methods等原理。MVVM原理Vue2.0 响应式原理最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的；关于Vue响应式机制，Object.defineProperty()之前的文章 vue 响应式机制简述 已经介绍过了而要实现Vue，需要从以下几步开始：实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。实现一个订阅者W
2020-09-16 10:15:10
140
原创 vue 响应式机制简述
先思考一个问题?如何让变量b的值是a的10倍：let a = 3let b = a * 10console.log(b) // 30但是如果当a不断变换，b并不会随着a的变换而变化，因为它是命令式的，并不存在同步关系；let a = 3let b = a * 10console.log(b) // 30a = 4b = a * 10console.log(b) // 401.数据劫持那如何让他们俩保持同步呢？这里就关系到Object.defineProperty这个方法。对
2020-09-10 16:47:18
184
原创 大厂-十道前端面试题
大厂-十道前端面试题 第 1 题：请设计一个攻击服务器的策略难度：阿里p5 ~ p7、腾讯t21 ~ t31提供几个常见的策略前段时间很火的一个例子，伪造虚假npm包 + nodejs版本的payloadnodejs的反序列化攻击第 2 题：请写一个正则，去除掉html标签字符串里的所有属性，并保留src和h...
2019-05-21 14:18:00
226
原创 vue-cli3 使用 svg-sprite-loader 的坑
vue-cli3 使用 svg-sprite-loader 的坑 chainWebpack: config => { config.module.rules.delete("svg"); //重点:删除默认配置中处理svg, //const svgRule = config.module.rule('svg')...
2019-03-29 17:43:00
725
原创 webpack4.0基本配置，超简单！
webpack4.0基本配置，超简单！ 最近复习了一下webpack，使用的是4.0版本。下图是基本目录结构，最后留有代码地址，有兴趣可以去看看。直接上代码（依赖未完全使用）：项目的所有依赖都可以安装，每个都有详细的注释。】const path = require('path');const uglify =...
2019-03-05 21:39:00
255
原创 gulp4.0基本配置，超简单！
gulp4.0基本配置，超简单！ 最近复习了一下gulp，目前是4.0版本。下图是基本目录结构，文件里面的内容可以随意添加，超详细简洁啊！直接上代码（依赖未完全使用）：项目的所有依赖都可以安装，每个都有详细的注释。const gulp = require('gulp');const sass = requir...
2019-03-03 00:14:00
869
原创 webpack4.0基本用法
webpack4.0 4.0基本用法总结了一下webpack4.0基本用法，基本上所有配置都有注释说明，超级详细啊！dist是打包目录const path = require('path');const uglify = require('uglifyjs-webpack-plugin'); //js压缩插件const htmlPlugin = require('html-webpa...
2019-03-03 00:06:06
329
原创 gulp4.0的用法
最近复习了一下gulp，目前是4.0版本下图是基本目录结构，文件里面的内容可以随意添加直接上代码（依赖未完全使用）：const gulp = require('gulp');const sass = require('gulp-sass');const browserSync = require("browser-sync").create(), //自动刷新 re...
2019-02-27 00:13:43
1963
原创 requestAnimationFrame定时器实现动画效果
window.requestAnimationFrame计时器一直是javascript动画的核心技术。大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次。而setTimeout和setInterval的问题是，它们都不精确。requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，提高系统性能，改善视觉效果requestAnimationFrame是...
2019-02-19 16:45:24
741
原创 es6 function* 函数生成器
主要介绍function* 函数生成器的作用及其使用直接复制粘贴代码即可使用：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script
2019-01-17 15:54:01
258
原创 vue2.x自定义指令
直接复制粘贴代码即可使用：点击表格显示输入框，点击其它空白处消失。<!DOCTYPE html><html> <head><meta charset="UTF-8" /><title>Hello React!</title><script src="https://c
2019-01-17 10:42:55
229
原创 vue2.0组件传值
vue是基于数据驱动，主要关注数据动态变化的过程即可。先放完整代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, in
2019-01-16 17:14:34
195
原创 hexo快速搭建博客
hexo快速搭建博客hex主页： https://hexo.io/zh-cn/1.安装创建并启动#创建一篇新文章$ hexo new “My New Post”$ hexo init blog$ cd blog$ npm install#运行静态服务器$ hexo server -s2.发布这里简介使用github发布博客#安装git插件：$ npm...
2019-01-09 11:49:20
111
原创 Rtmp协议笔记
RTMP RTSP HTTP都是在应用应用层。1.RTMP：是Real Time Message Protocol(实时信息传输协议)，和RTSP是流媒体协议，RTMP协议一般传输的是flv，f4v格式流，RTSP协议一般传输的是ts,mp4格式的流，一般做直播用。2.HTTP：即超文本传送协议(ftp即文件传输协议)，将所有的数据作为文件做处理，没有特定的流，http协议不是流媒体协议。...
2019-01-04 10:21:29
169
原创 CKEditor配置,最适合新手两种方式详解。
CKEditor配置,最适合新手两种方式详解。 CKEditor.js的配置，大概有两种方式，这里有基础版和全面的版本可以试验 https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js http://cdn.bootcss.com/ckeditor/4.8.0/ckeditor.js1.直接上代码...
2018-10-09 15:38:00
986
原创 vue2.x+elelmentUI@3.5 表格
vue2.x+elelmentUI@3.5 表格 <template> <section> <el-row> <el-col :span="16"> <!--表单--> <..
2018-05-18 01:52:00
210
原创 CSS3侧栏滑出简单实现
CSS3侧栏滑出简单实现 使用css3 的 animation 属性实现的点击滑出侧栏<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="vie
2017-12-02 23:11:00
368
原创 Vuex非常适合新手的教程，保教不会！
Vuex非常适合新手的教程，保教不会！ 本讲解基于Vue-cli(脚手架)搭建的项目。Vuex 数据状态管理工具，整个流程类似依赖注入，相当于预先定义，倒推。（个人理解）1. 安装vuex 命令行输入 npm install vuex --save2.在根目录的src下新建 store文件夹，并且在其内创建5个js文件。 inde...
2017-11-26 22:03:00
95
原创 HBuilder入门（构建h5+APP）
HBuilder入门（构建h5+APP） if(window.plus) { plusReady(); } else { //plusready事件(自带事件)调用了才可使用h5+API document.addEventListene...
2017-11-06 22:56:00
930
原创 overflow-x: scroll;横向滑动详细讲解
overflow-x: scroll;横向滑动详细讲解 overflow-x: scroll;横向滑动（移动端使用详解）css3 ， ie8以上<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> ...
2017-11-06 00:05:00
8879
原创 移动端页面input输入框被键盘遮挡问题
移动端页面input输入框被键盘遮挡问题 <body class="layout-fixed"> <!-- fixed定位的头部 --> <header> </header> <!-- 可以滚动的区域 --> <m..
2017-10-26 21:50:00
656
原创 get和post请求及函数调用模式
get和post请求及函数调用模式 1.get和post请求的应用场景？ get: 1.get请求获取（查询）数据 2.请求url长度比较短 3.可以被缓存 4.请求url可以作为浏览器书签 5.可以被保存在浏览器记录中 6.请求参数在url后可以被看见 post: 1.post请求用来修改数据（回帖，...
2017-10-25 21:46:00
244
原创 angular2.x指令
angular2.x指令 1.指令 *ngIf： 判断 isActive 为true时 <user-detail> 生效展示 <user-detail *ngIf="isActive"></user-detail> *ngFor：遍历显示 <div *ngFor="let u...
2017-08-25 01:36:00
72
原创 Vuejs-组件-<slot> 标签分发内容
Vuejs-组件-<slot> 标签分发内容 资料来自：https://cn.vuejs.org/v2/guide/components.html#具名-Slot在官方文档的基础上，更加细致的讲解代码。 <slot> 标签中的任何内容都被视为备用内容，只有在宿主元素为空，它才显示。1.单个slot 除非子组件模板包...
2017-06-16 01:51:00
101
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人