Minyoung 的博客

初始化项目创建一个文件夹，名称就是你的项目名称即可，在文件夹中使用以下命令初始化项目npm init vite-app安装依赖npm install 或yarn安装插件添加typescript，这里直接使用vue add typescript会报错，需要先添加一个依赖npm install @vue/cli-service --save-dev或yarn add @vue/cli-service -D使用vue添加插件，如果没有安装@vue/cli的先全局安装npm ins

基于vue-cli 4.x配置，觉得有必要的小伙伴可以当做模板直接使用。const path = require('path')const UglifyJsPlugin = require('uglifyjs-webpack-plugin')const CompressionWebpackPlugin = require('compression-webpack-plugin')const { HashedModuleIdsPlugin } = require('webpack')const is

vue渲染机制和如何解决数据修改页面不刷新问题的多种方法本文不讲原理，只讲干货易懂易学，(感觉能学到知识，麻烦给小编来个赞！)首先 第一点，vue底层是 将data对象传人，使用Object.definePropety,转换为getter和setter，所以，vue不支持IE8.简单介绍一下Object.definePropety,Object.defineProperty(obj, prop, descriptor)//参数obj要在其上定义属性的对象。prop要定义或修改的属性的名

使用koa处理vue项目的history模式在vue项目的路由中默认是hash模式，又叫前端路由，根据浏览器url地址栏中的变化，使用onhashchange事件监听做出相应的操作，不会向服务器发送请求。但是若采用了history模式，就大大不同了，history不怕前进不怕后退就怕刷新，history模式是由浏览器提供的history api来处理。而且将vue项目（非ssr）打包后的静态资源...

我们常常看到很多vue生态下的ui框架的消息提示框，在页面切换的时候依然停留在页面，我们知道vue这种单页面渐进式框架，所有的操作和元素都是挂载在一个节点上的，当路由变化是整个节点下的dom元素也在重新渲染，若要实现ui框架中的类似的消息提示框的话，理论上就该把这样的组件挂载到其他的节点上，这样就互不影响了。vue已经为我们考虑好了，在vue上提供了一个vue.extend()函数，可以创建一个...

我为什么要转载这篇文章呢？原因其实很简单，也是让人失望。事情的经过是这样的，我在别人的代码里看vuex-router-sync，我当时就在想为什么要用这个东西，这个东西可以解决什么问题，可以带来什么好处，在什么样的场景下需要用它，用它是不是会比其他方案更加方便。然后我首先还是选用了百度进行搜索，翻了3页，都没有找到一篇像样的问题，真正去说这个东西的作用，都是人云亦云，搜索了半天，终于看到了上面的链...

axios 主动取消请求已经发送的请求，在没有收到后台返回之前主动取消。这样的场景很常用。例如：一个支付组件，正在支付的时候用户立即又关闭了组件，这时应该立即取消支付请求。又或者tabs切换的时候，都是经常用到的。这里我是用Typescript来封装的一个简单的axios请求做演示。api.jsimport axios, { CancelTokenStatic } from 'axio...

防抖函数在规定时间内重复执行同一个函数，但是只生效一次函数的行为。比如由于网络延迟，用户在一定时间内会重复点击某一个按钮，然而不断的执行按钮上的事件。若该事件是网络请求，则会给服务器不断造成压力，这是我们不愿看到的。节流函数在规定时间内重复执行同一个函数，但是按照一定的时间段生效函数的行为。和防抖函数非常相似。例如在支付回调后我们要确认支付的状态，可以手动检查+自动检查的情况下，我们使用节流...

vue-cli3全局使用CSS预处理语言变量这里面包含Less、stylus、sass、scss我们主要使用一个插件style-resources-loader来实现。使用vue add style-resources-loader 添加插件的方式，这时控制台会让你选择语言，选择好回车后vue-cli3会在vue.config.js这个文件中自动给你配置一部分。module.ex...

在Vue项目中我们往往会用到功用组件，使用在不同层次、不同地方的的组件，以至于我们每次都会去import组件并且使用components注册，如果是两个三个还能接受，但是比如element-ui框架中el-button这样的组件使用频率是非常的高，那就非常繁琐。Vue官方文档中给我们提供了在main.js中使用Vue.component()的方式注册全局组件，这样是很好的，但是在我看来不算...

在很多情况下我们都会使用到自定义组件的双向绑定，今天我这里使用vue的model属性来实现双向绑定，其实原理还是一样的，只是我觉得这样做会不那么繁琐。父组件<template> <child v-model="message" /></template>export default { data() { return { ...

我相信大家在使用element-ui框架的时候都避免不了使用它的表单组件，其中表单验证的使用频率颇高。由于自己工作的原因会使用到很多表单，而且都需要验证，而本人人又特别懒不想写那些重复代码，就连c、v键都不想使用。于是我对element-ui的表单验证进行了一定的封装。首先来看一下目录结构reg-exp-maven.js 存放正则表达式validate.js 写通用的校验方法val...

eslint 配置参数,0是关闭，1是打开,[]里面配置详细格式"no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止使用数组构造器"no-bitwise": 0,//禁止使用按位运算符"no-caller": 1,//禁止使用arguments.caller或arguments.callee"no...

这里使用jszip进行文件打包，可以创建文件夹，创建文件。然后使用FileSaver进行下载，这里使用FileSaver下载是因为这个工具可以下载大文件，而且效率非常高。一下代码示例，简单模块化了一下，为了能够上传下载文件。'use strict';import JsZip from 'jszip'import { saveAs } from 'file-saver'export cl...

vue不断填坑中，首先要在需要拦截的路由添加meta: {requireAuth: true},然后使用路由钩子函数beforeEach拦截处理。import Router from 'vue-router'const routes = [ { path: '/controlPanel', name: 'ControlPanel', ...

axios的使用模板axios({ url : './source', method : 'GET', data : {id : '123'}, responseType : 'json', timeout : 1000 }).then((res)=>{ console.log(res); }).catch((err)=&g...

转载于：Vue.js最佳实践（五招让你成为Vue.js大师）感觉很实用大概内容有几点，使用频率很高，在这里分享一下啦！第一招：化繁为简的Watchers 第二招：一劳永逸的组件注册 第三招：釜底抽薪的router key 第四招: 无所不能的render函数 第五招：无招胜有招的高阶组件 随时都是学习的过程啊，看一看文章写一写代码，我的青春啊！...

在做开发的时候避免不了测试、调试、接口对接……等等流程，内网穿透是一种好的解决方案。什么是内网穿透？我就简单的解释一下：将本地地址映射到一个公共地址，让其他用户也能访问。

vue + wangEditor 小试牛刀在新的后台管理项目中由于需要对文章、商品进行一些相关编辑，于是加入了富文本编辑器，最先是用了vue-quill-editor，发现界面有点难看，后来换ckeditor，试了好几个npm包，后来没有实现:( 全是泪，后来想起之前一个网友推荐的wangeditor这个编辑器，在官网看了一下，介绍的很详细，下面就来看看再下是如何实现的，由于刚刚开始用，目前功能...

vue2.x+element-ui打包后会出现字体找不到，在链接字体的时候会出现static/css/static/font这种路径解决办法：1.在build目录下webpack.base.conf.js确认配置module: { rules: [ ... { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/...

在buildwebpack.prod.conf.js找到如下配置，找到removeAttributeQuotes: true,将true改为false，重新打包即可 new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true,...

在检索数据的时候需要当输入完内容之后就开始自动请求接口查询结果，但却不是onchange这种观察的方式，性能上是不行的。截流函数使用的是监听键盘事件，停止敲击键盘后一定时间便自动请求接口。如下： //截流函数 const delay = (function() { let timer = 0; return function(callback, ms) { ...

一般我们在处理请求服务的时候不免会遇到服务器连接不上的情况，而现在开发网站应用一般读书采用路由的方式，也非html静态文件开发，列入使用vue脚手架开发网站应用的时候，我们会将对请求服务器的操作进行封装到一个单独的文件，会用一个总的post或者get等方法。当我们请求服务端的时候如果返回的是服务器连接失败的情况想用路由跳转的指定的提示页面却发现就会出现两个Vue事例，这样跳转就没有意义的，完全无效...

Vue获取上一个路由或者说返回到上一个路由可以用三种方法实现1.使用钩子函数beforeRouteEnterbeforeRouteEnter(to, from, next) {}以及其他两个钩子函数请看：https://www.cnblogs.com/lhl66/p/9195901.html关于路由守卫，每个路由是又独立守卫的：https://www.jianshu.com/p/...