![](https://img-blog.csdnimg.cn/2020072913555827.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
Vue
高先生的猫
求知若渴,虚心若愚。
展开
-
vscode 新版解决冲突界面 改回老版
vscode 新版解决冲突 改回老版原创 2022-08-22 17:25:27 · 1830 阅读 · 0 评论 -
vue 有滚动条 点击拖拽滑动自定义指令
vue 有滚动条 点击拖拽滑动自定义指令原创 2022-06-23 18:01:57 · 861 阅读 · 1 评论 -
vue-cli3的title标签中出现的htmlWebpackPlugin.options.title值进行修改
发现vue-cli创建的HTML里面的title已经换成变量<%= htmlwebpackPlugin.options.title%>,这是在webpack中使用HtmlWebpackPlugin的用法,如下:<title><%= htmlWebpackPlugin.options.title %></title>默认情况下,项目显示的标题为项目路径对应的名称,下面介绍修改htmlWebpackPlugin.options.title对应...原创 2022-05-19 17:44:57 · 11408 阅读 · 0 评论 -
如何以更好的方式使用 Vue Mixins
Mixin 组件在项目中经常被用来重用一些业务逻辑,但它们有一些不确定的细微差别,这在项目开发中越来越明显。我偶尔也会遇到这种情况,它们会代码的重构或新功能的开发带来困难。在介绍我的方法之前,我想先介绍一下使用mixins的优点和缺点。优点扩展了代码重用的DRY原则。我们可以在不同的组件中重复使用相同的业务逻辑。 我们可以把 mixin 作为一个全局性的 mixin,与所有的组件共享上下文。缺点使用mixins的组件的逻辑不透明。 可重写的上下文,我们必须注意不要因为相同的名称覆盖一些原创 2022-04-28 16:07:56 · 407 阅读 · 0 评论 -
vite 配置环境变量
在做项目环境变量配置前,可以先到官网回忆一下环境变量的基本使用,环境变量和模式 | Vite 官方中文文档一、环境模式首先环境变量是可以分模式的,常用模式如下:.env # 所有情况下都会加载.env.local # 所有情况下都会加载,但会被 git 忽略.env.[mode] # 只在指定模式下加载.env.[mode].local # 只在指定模式下加载,但会被 git 忽略默认dev环境下使用.env....原创 2022-04-21 14:01:07 · 4257 阅读 · 2 评论 -
VUE中的filters过滤器2种用法
Vue允许我们自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示。<!-- 在双花括号中 --> <div>{{ message | capitalize }}</div> <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | forma原创 2022-03-30 09:05:56 · 2809 阅读 · 0 评论 -
7个常用的Vue模式
1. 处理加载状态在大型项目中,我们可能需要将组件分成小块,只有在需要时才从服务器上加载。为了更容易做到这一点,vue允许我们将组件定义为一个工厂函数,异步地解析组件定义。vue只会在组件需要渲染的时候触发工厂函数,并把结果缓存起来以备后面的重新渲染。2.3版的新内容是,异步组件工厂还可以返回以下格式的对象。const AsyncComponent = () => ({ // 需要加载的组件 (应该是一个 `Promise` 对象) component: import('./MyCo原创 2021-09-16 11:40:10 · 1050 阅读 · 0 评论 -
vue3 element plus按需引入最优雅的用法
全局导入下载安装element plus后,在入口文件配置一下并挂载,就能畅通无阻的使用了。但问题是这样有很多用不上的组件都被打包进来了,导致包的体积非常大。按需导入采用按需导入的方法,其实是用解构的方式,从element的包中解构出来,再挂载到app上面。这样开发中用到什么组件就打包什么确实很好,减少了包的体积。但是又有一个新的问题,就是每次想要使用新的组件的时候,都要去解构一下,并且挂载。操作起来非常繁琐。有什么办法能够像使用全局引入那样只配置一次,后面要用到什么组件,都会自己按需加原创 2021-08-13 10:20:05 · 14745 阅读 · 11 评论 -
“NODE_ENV”相关的几个技术点
一. 概念 - node下的全局环境process.envnode中有全局变量process表示当前node进程,process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。其实NODE_ENV只是一个用户自定义的变量,但是这个NODE_ENV变量语义非常恰当,并且在前端工程化配置中作为判断生产环境/开发环境的依据是非常自然而方便的事情,因而在前端工程化中逐渐成为一个事实规范。当我们在服务启动时配置NODE_ENV,或在代码中给process.env.N原创 2021-08-13 10:19:13 · 137 阅读 · 0 评论 -
vue多环境配置方案
一般服务器分为本地环境,测试环境,正式环境,如果每次都要修改配置就很麻烦,总结一下我使用的方法vue-demo/ |-build/ |-config/ |-dist/ |-src/ |-config/ |-index.js |-dev.conf.js |-sit.conf.js |-prod.conf.js |-package.json |-index.html修改执行命令修改pack原创 2021-08-13 10:15:19 · 1414 阅读 · 1 评论 -
vue的路由权限控制,如何从后台获取数据
路由权限控制常用于后台管理系统中,对不同业务人员能够访问的页面进行一个权限的限制, 对于无权限的页面可以跳转404页面或者提示无权限。方式一:路由元信息(meta)把所有页面都放在路由表中,只需要在访问的时候判断一下角色权限即可。vue-router 在构建路由时提供了元信息 meta 配置接口,我们可以在元信息中添加路由对应的权限,然后在路由守卫中检查相关权限,控制其路由跳转。在 meta 属性里,将能访问该路由的角色添加到 roles 里。用户每次登陆后,将用户的角色返回。然后在访问页面时.原创 2021-08-13 10:06:14 · 1564 阅读 · 0 评论 -
vue 启动 vueNo parser and no filepath given, using ‘babel‘ the parser now but this will throw 报错
vue 报错vueNo parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred升级vue-loader版本13稳定版npm install -S vue-loader@13.7.214稳定版(如升级了1...原创 2021-06-30 16:41:11 · 1216 阅读 · 0 评论 -
vue项目启动 start value has mixed support, consider using flex-start instead 报错
这里的错误主要是编译过程中 错误的使用flex布局解决方案:在vue css 代码中看看是否使用了align-items: start;将其改为align-items: flex-start; 就行了原创 2021-06-30 16:38:41 · 358 阅读 · 0 评论 -
令人眼前一亮的 Vue 实战技巧
minxin 让组件复用灵活化vue提供了 minxin 这种在组件内插入组件属性的方法,个人建议这货能少用就少用,但是有个场景则非常建议使用 minxin:当某段代码重复出现在多个组件中,并且这个重复的代码块很大的时候,将其作为一个 minxin 常常能给后期的维护带来很大的方便。这是项目中封装一个列表功能,有下拉刷新,加载自动请求数据,上拉加载下一页数据等等,它是这样的看不懂没关系我只是开发中举了一个例子export default { data() { return {.原创 2021-06-22 14:21:06 · 351 阅读 · 0 评论 -
element el-input 输入数字转化为千分位
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.原创 2021-06-22 14:06:18 · 2988 阅读 · 0 评论 -
4 个Vue 路由过渡动效
vue路由过渡是对 Vue 程序一种快速简便的增加个性化效果的的方法。可以让你在程序的不同页面之间增加平滑的动画和过渡。如果使用得当,可以使你的程序显得更加专业,从而增强用户体验。本文中会先介绍使用 Vue 路由过渡的基础知识,然后在举几个例子,为你一些灵感。下面是其中的一个案例:在 Vue 程序中添加路由一般 Vue 路由设置如下所示:<template> <router-view /></template>在旧版本的 Vue...原创 2021-06-03 10:18:16 · 1851 阅读 · 0 评论 -
解读vue-server-renderer源码并在react中的实现
在SSR开发环境中,服务端的代码是是直接通过webpack打包成文件(因为里面包含同构的代码,就是服务端与客户端共享前端的组件代码),写到磁盘里,然后在启动打包好的入口文件来启动服务。但是我不想在开发环境把文件打包到磁盘中,想直接打包在内存中,这样不仅能优化速度,还不会因开发环境产生多余文件。还有就是webpack对require的处理,会导致路径映射的问题,包括对require变量的问题。所以我就想只有组件相关的代码进行webpack编译,别的无关的服务端代码不进行webpack编译处理。但是这中间有原创 2021-06-03 10:14:28 · 535 阅读 · 0 评论 -
keep-alive组件的作用和原理
keep-alive 作用keep-live组件是vue的内部组件,主要用于缓存内部组件实例。这样做的目的在于keep-alive内部组件切换时,不需要重新创建组件实例,比如说使用v-if来决定在满足什么条件下使用哪个组件,还有就是路由切换,有个<router-view></router-view>,它会根据路由的配置,将选择其中一个组件渲染到这个位置,当路由切换后,当前组件销毁,它又会渲染另一个组件。如果将keep-alive嵌套在最外层,就像这样:<keepA原创 2021-06-02 16:44:06 · 942 阅读 · 0 评论 -
vue2 和 vue3 v-if 与 v-for 的优先级对比
# 介绍Vue.js 中使用最多的两个指令就是v-if和v-for,因此开发者们可能会想要同时使用它们。虽然不建议这样做,但有时确实是必须的,于是我们想提供有关其工作方式的指南。# 2.x 语法2.x 版本中在一个元素上同时使用v-if和v-for时,v-for会优先作用。# 3.x 语法3.x 版本中v-if总是优先于v-for生效。...原创 2021-05-28 10:35:40 · 1104 阅读 · 0 评论 -
Vue $attrs与$listeners的用法
名词解释inheritAttrs:默认值true,继承所有的父组件属性(除props的特定绑定)作为普通的HTML特性应用在子组件的根元素上,如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承(简单的说,inheritAttrs:true 继承除props之外的所有属性;inheritAttrs:false 只继承class属性)attrs--继承所有的父组件属性(除了prop传递的属性、class 和 style ),一般用在子组件的子元素上,..原创 2021-05-27 13:58:06 · 339 阅读 · 2 评论 -
element-ui el-form 动态数据循环表单验证的方法
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.原创 2021-04-30 15:02:23 · 1966 阅读 · 2 评论 -
element checkbox 怎么取 id 而不是label
// el-checkbox 绑定的checkList返回的是label的值 只需要lable写成id 中间写成label显示即可<el-checkbox-group v-model="checkList"> <el-checkbox :label="item.id">{{item.label}}</el-checkbox></el-checkbox-group>...原创 2021-04-27 17:17:58 · 1948 阅读 · 0 评论 -
element upload组件 before-upload 自定义传参
// 返回一个函数即可:before-upload=" (file) => { return handleBefore(file, '你的参数')}"handleBefore(file, params) {}原创 2021-04-26 17:31:19 · 2075 阅读 · 0 评论 -
vscode Prettier的格式化配置参数说明
{ // 使能每一种语言默认格式化规则 "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter": "esbenp.prettie.原创 2021-04-15 16:29:41 · 4679 阅读 · 0 评论 -
vue 关闭eslint校验的方法
// vue 旧版本// 在vue项目中关闭ESLint方法:找到 webpack.dev.conf.js 这些代码注释掉, { test: /.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: requ.原创 2021-04-13 16:34:27 · 512 阅读 · 0 评论 -
vue项目添加favicon的几种方式
一、 在public下放置favicon.ico文件浏览器会自动爬去根目录的favicon.ico文件,然后自动呈现二、在index.html入口文件添加<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>当然也可以添加其他类型的网址图标,如:png图标<link rel="shortcut icon" type="image/png" href="favicon.png"/>..原创 2021-04-08 13:40:13 · 2893 阅读 · 0 评论 -
vue v-longpress长按指令
思路:创建一个计时器, 2 秒后执行函数 当用户按下按钮时触发 mousedown 事件,启动计时器;用户松开按钮时调用 mouseout 事件。 如果 mouseup 事件 2 秒内被触发,就清除计时器,当作一个普通的点击事件 如果计时器没有在 2 秒内清除,则判定为一次长按,可以执行关联的函数。 在移动端要考虑 touchstart,touchend 事件directives/longpress.jsconst longpress = { bind: function (el,原创 2021-04-08 13:38:30 · 2704 阅读 · 0 评论 -
element 在表头添加el-tooltip
<el-table-column prop="tfStatus" label="转化状态" align="center" width="150"> <template slot="header" slot-scope="scope"> <el-tooltip class="item" effect="dark" content="状态为“已激活”。" placement="top"> <i...原创 2021-04-07 09:04:50 · 1548 阅读 · 1 评论 -
vue 登录后 返回又回到了登录页解决办法
// 从home => login => home // login.vue 正确操作this.$router.replace('/home')this.$router.go(-1)// login.vue 错误操作 会有历史记录 this.$router.push('/home')原创 2021-04-02 14:11:58 · 3235 阅读 · 4 评论 -
vue 里面 vant ImagePreview 具体用法
<img @click="HandleclickImg" src="https://xxxx" />import { ImagePreview } from 'vant'methods: { HandleclickImg() { ImagePreview({ images: ['https://img01.yzcdn.cn/vant/cat.jpeg', 'https://img.yzcdn.cn/2.jpg'], startPosi.原创 2021-03-30 17:55:32 · 2104 阅读 · 0 评论 -
vue img标签 怎么使用assets下的图
<img src="~@/assets/img/top.png" /><img :src="require('@/assets/img/top.png')" />原创 2021-03-30 17:39:46 · 6496 阅读 · 2 评论 -
vue图片点击放大预览v-viewer
图片放大预览功能参考网站:https://github.com/mirari/v-viewer1、安装依赖npm install v-viewer --save2、全局引入import Vue from 'vue';import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)Viewer.setDefaults({ Options: { 'inline': true, 'butto转载 2021-03-25 10:58:50 · 212 阅读 · 0 评论 -
watch如何同时监听多个变量
如何同时监听多个变量,主要的思想就是将这些变量绑定到一起,那就是使用计算属性computed: { changeData() { const { username, password} = this return { username, password } }}, 接下来,监听这个计算属性的变量即可以做到同时监听多个变量了watch: { changeData() { //写入你需要监听的事件},...原创 2021-02-25 16:22:07 · 3366 阅读 · 0 评论 -
vue 根据生产环境还是开发环境自动变更baseUrl
const devBaseUrl = 'https://www.baidu.com/';const proBaseUrl = 'https://www.qq.com';let url;process.env.NODE_ENV === 'development' ? url = devBaseUrl : url = proBaseUrl ;axios.defaults.baseURL = url;上面的开发环境和生产环境的地址只是随便放的,你可以根据自己的实际进行修改...原创 2021-02-25 16:21:10 · 806 阅读 · 0 评论 -
vue-touch实现移动端的左划右划实现
安装插件vue-touchnpm install vue-touch@next --save在main.js中进行引入import VueTouch from 'vue-touch'Vue.use(VueTouch, {name: 'v-touch'})将你要实现左划右划的div块包裹起来<v-touch @swipeleft="swiperleft" @swiperight="swiperright" class="wrapper"> <div原创 2021-02-25 16:20:31 · 716 阅读 · 0 评论 -
vue根据不同环境打包不同的请求接口
前言:一般有三种开发模式,开发模式,测试模式,生产模式(即正式模式),然后,不同的环境有不同的接口地址图中的中文请根据你的实际使用环境进行替换,这种的好处是(自适应,比打包方便,例如npm run build --dev以及npm run build --prod)ps:如果你不清楚自己的域名,可以console.log(window.location.hostname);控制台输出查看自己的域名import axios from 'axios'let url;if(window.lo原创 2021-02-25 16:19:46 · 659 阅读 · 0 评论 -
vue 滚动条样式插件vuescroll
安装插件npm install vuescroll在main.js中进行引入import vuescroll from 'vuescroll';import 'vuescroll/dist/vuescroll.css';Vue.use(vuescroll);使用方法,请注意设置vue-scroll的宽和高<template> <div class='your-container'> <!-- bind you原创 2021-02-25 16:17:53 · 2315 阅读 · 1 评论 -
Vue根据内容生成二维码
1.首先安装插件vue-qriouslynpm install vue-qriously --save2.在main.js中进行引入//main.jsimport Vue from 'vue'import VueQriously from 'vue-qriously'Vue.use(VueQriously)3.在HTML中进行使用<template> <div> <qriously :value="qrcode" :size="2原创 2021-02-25 16:17:02 · 679 阅读 · 0 评论 -
vue图片查看器插件 vue-photo-preview
可以全屏预览,如果图片是个数组,还能左右滑动查看上一张和下一张,图片的标题在最下方1.首先安装插件npm install vue-photo-preview --save2.在main.js中进行引入import preview from 'vue-photo-preview'import 'vue-photo-preview/dist/skin.css'Vue.use(preview)3.模板引擎中使用,preview是预览的图片地址,preview-text是添加描.原创 2021-02-25 16:15:45 · 889 阅读 · 1 评论 -
vue-cli4 移动端以及PC端的自适应适配
首先安装插件npm install amfe-flexible postcss-px2rem -S在 main.ts 中进行引入import "amfe-flexible";在项目根目录创建vue.config.js文件,并完成以下配置: remUnit 请根据实际项目中的设计稿宽度进行设置module.exports = { css: { loaderOptions: { postcss: { plug原创 2021-02-25 16:11:02 · 1668 阅读 · 5 评论