![](https://img-blog.csdnimg.cn/2019092715111047.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 52
vue
cc° 淡忘
这个作者很懒,什么都没留下…
展开
-
vue项目seo优化-预渲染prerender-spa-plugin配置
Vue是SPA单页面应用对SEO不太友好,如果你只是需要对少数页面需要做SEO处理(例如 / 首页,/关于我们 等页面),可以使用预渲染 prerender-spa-plugin (插件)原创 2022-11-09 16:52:13 · 2701 阅读 · 1 评论 -
vue项目二级目录(非根目录)部署,prerender-spa-plugin配置
Vue二级目录项目用 prerender-spa-plugin 做 SEO 优化,构建项目无法完成也不报错,一直卡在浏览器检测阶段原创 2022-11-09 16:49:53 · 1287 阅读 · 2 评论 -
Vue中的scoped实现原理和样式穿透方法及原理
scoped一、什么是scoped,为什么要用在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,通过该属性,可以使得组件之间的样式不互相污染。二、scoped的原理为组件实例生成一个唯一标识,给组件中的每个标签对应的dom元素添加一个标签属性,data-v-xxxx给<style scoped>中的每个选择器的最后一个选择器添加一个属性选择器,原选择器[data-v-xxxx],如:原原创 2022-02-23 15:22:47 · 17229 阅读 · 5 评论 -
vuex持久化插件使用
目的让在vuex中管理的状态数据同时存储在本地。可免去自己存储的环节。应用场景在开发的过程中,像用户信息(名字,头像,token)需要vuex中存储且需要本地存储。再例如,购物车如果需要未登录状态下也支持,如果管理在vuex中页需要存储在本地。步骤首先:我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化。npm i vuex-persistedstate假设 modules 下有 user.js 和 cart.js文件需要持久化转载 2022-02-21 14:14:57 · 432 阅读 · 0 评论 -
组件间传值通信(父传子、子传父、兄弟组件传值)
文章目录前言一、父传子二、子传父三、兄弟组件传值前言组件间传值通讯分为三种1、父传子2、子传父3、兄弟组件传值一、父传子父组件:<son :msg=“fatherMsg”></son>子组件:props:[‘msg’]//父组件<template> <div> <son :msg="fatherMsg"></son> </div></template><script&g原创 2022-02-14 14:39:24 · 674 阅读 · 0 评论 -
Vue+element ui el-table数据导出到excel
一、安装依赖:npm install --save xlsx file-saver二、在放置需要导出功能的组件中引入import FileSaver from 'file-saver'import XLSX from 'xlsx'三、HTML中的设置,简单来说就是给需要导出的table标签el-table上加一个id如exportTab,对应下面的exportExcel方法中的 document.querySelector(’#exportTab’)四、在methods中设置真正实现导出转换e转载 2021-05-06 10:43:07 · 1373 阅读 · 1 评论 -
vue中使用AntV G6 — 基础篇
阿里AntV-G6使用介绍 一 基础篇AntV G6 官网AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。文章目录阿里AntV-G6使用介绍 一 基础篇一、G6 是什么?二、使用步骤1.安装&引入2.基本使用三、结果图一、G6 是什么?G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明,简单。让用户获得关系数据的 Insight。二、使用步骤1.安装&原创 2021-04-20 16:36:29 · 15179 阅读 · 6 评论 -
vue拖拽排序插件vuedraggable使用方法详解
一、在vue项目中,用npm包下载下来npm install vuedraggable -S二、下载下来后,引入插件,在你的vue文件的script标签里面这样引入import draggable from 'vuedraggable'三、注册组件components: { draggable},四、在template标签里面使用<draggable v-model="colors" @update="datadragEnd" :options = "{animation:50原创 2021-04-08 11:54:03 · 872 阅读 · 0 评论 -
Unsupported URL Type “npm:“: npm:vue-loader@16.2.0
问题描述:使用npm脚手架时,报错`Unsupported URL Type "npm:": npm:vue-loader@16.2.0`原因分析:npm版本过低查看版本:`npm -v`解决方案:升级版本使用命令行:`npm install -g npm`原创 2021-04-06 10:51:38 · 5936 阅读 · 1 评论 -
vue实现调用手机软键盘右下角变更为搜索按钮并进行搜索
一、出现问题ios,input添加type=“search” 手机软键盘右下角仍为换行,如下图二、处理方法<form action="" @submit.prevent="onSearch"> <input type="search" :placeholder="请输入关键字搜索" v-model="value" /></form>.prevent 修饰符:阻止表单默认提交。submit 点击默认行为是提交表单,这里并不需要它提交,只需要原创 2021-02-20 10:48:39 · 1668 阅读 · 0 评论 -
vue路由跳转传递参数方式
一、直接在路由中写参数(刷新页面参数不会丢失)//路由配置文件//需要配置动态路由{ path: '/detail/:id', name: 'Detail', component: Detail}//跳转时页面var id = 1;this.$router.push({ path: `/detail/${id}`,})//跳转后页面 获取参数this.$route.params.id二、通过query属性传值(刷新页面参数不会丢失)//路由配置文件{ path: '原创 2021-02-18 14:18:26 · 285 阅读 · 0 评论 -
点击事件监听,点击其他区域隐藏弹窗、下拉菜单、提示框
实现效果:弹窗、下拉菜单、提示框等在没有遮罩层时可以通过监听点击事件来控制弹窗、下拉菜单等的显示隐藏。思路:监听mouseup松开左键时,判断控制pop元素显示隐藏的变量show是否为true(显示状态),再判断点击的位置是否是pop元素,如果不是则隐藏pop元素示例 mounted() { document.addEventListener("mouseup", e => { var pop = document.getElementById("pop"); .原创 2021-01-27 15:29:12 · 912 阅读 · 0 评论 -
vue组件中的.sync修饰符使用
.sync是vue中用于实现简单的“双向绑定”的语法糖,在平时的开发中是经常使用的。在vue的组件通信props中,一般情况下,数据都是单向的,子组件不会更改父组件的值,那么vue提供.sync作为双向传递的关键字,实现了父组件的变动会传递给子组件,而子组件的carts改变时,通过事件机制,修改父组件的cart。完成了子组件carts和父组件cart的双向映射。// 父级中调用子组件<son :show.sync="show"></son>//当子组件需要更新 show 的原创 2021-01-18 17:34:30 · 754 阅读 · 0 评论 -
vue文本识别 “ \n ” 的换行问题
在 vue 项目,有时请求返回的数据 res.data 中会有含有 \n 的字符串,如果直接渲染的话无法实现换行。解决方法:一、通过 css属性 实现即:设置 white-space: pre-wrap;,(代码如下):<div style="white-space: pre-wrap;">{{请求返回的含有\n的字符串}}</div>二、使用v-html实现首先,将字符串里的 \n 替换为 <br>,然后用 v-html 指令渲染字符串为 innerH.原创 2020-09-18 11:57:17 · 2923 阅读 · 0 评论 -
JS 倒计时获取验证码按钮
vue中的写法实现倒计时按钮常用于发送验证码/* css */.yzm{ width: 150px; height: 30px; background-color: #f00; border: 0; outline: 0; border-radius: 15px; color: #fff;}.dis{ background...原创 2020-04-16 16:12:05 · 211 阅读 · 0 评论 -
vue-cli3 axios跨域问题 proxy代理配置
一、安装引入axiosnpm install axios -S安装完后,在main.js中引入axios//在main.js中添加以下代码import axios from 'axios'//axios不支持Vue.use 可以添加原型使用Vue.prototype.$axios = axios//下面这条看着加吧,作用是设置url的通用部分,写了之后请求时公共的部分就不用重复写...原创 2020-04-14 17:52:08 · 976 阅读 · 0 评论 -
vue-cli3中vue.config.js配置
在使用vue-cli3创建项目后会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如设置代理,打包配置等问题呢?vue.config.js 是一个可选的配置文件,当你需要覆盖原有的配置时,可根据需要在项目的根目录下手动创建vue.config.js文件。如果项目的 (和 package.json 同级的) 根目...原创 2020-04-14 14:15:15 · 1384 阅读 · 0 评论 -
vue路由跳转拦截器
一、在路由对象中的某一个路由对象上加这样一个属性meta: { requireAuth:true }二、在main.js中添加这段代码router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (localstorage.getItem('islogin'...原创 2020-04-13 16:16:41 · 2161 阅读 · 0 评论 -
ReferenceError: primordials is not defined
问题:在gulp打包的时候碰到了ReferenceError: primordials is not defined问题原因:gulp版本与node版本不兼容当前版本:我的项目gulp版本是3.9.1, 本地node版本是13.9.0解决方法:是回退node版本或升级gulp版本,降低node版本至11.15.0即可。本文主要使用gnvm来管理多版本node一、安装gnvm1、要...原创 2020-02-27 17:22:33 · 5434 阅读 · 1 评论 -
vue-cli3.0 脚手架搭建
vue-cli3.0 脚手架搭建项目1.安装vue-cli 3.0npm install -g @vue/cli# oryarn global add @vue/cli安装成功后查看版本:vue -V(大写的V)2.命令变化vue create --help用法:create [options] 创建一个由 vue-cli-service 提供支持的新项目选项:...原创 2019-12-19 13:15:31 · 177 阅读 · 0 评论 -
nextTick使用简介
Vue中的nextTick涉及到Vue中DOM的异步更新一、示例先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。模板<div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1">Message got outside $nextTick:...原创 2019-12-06 17:43:42 · 173 阅读 · 0 评论 -
vue 回到顶部
介绍这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部。由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装element-UI(安装方式猛戳这里),安装好element-UI后,只需将该组件文件夹BackToTop导入到现有项目中即可使用。使用示例<template> <div id=...原创 2019-11-07 10:51:26 · 215 阅读 · 0 评论 -
vue动态绑定class的方式
对象方法原理:根据冒号后面的结果为true或false来决定是否添加冒号前面的class名注:这里的active加不加单引号都可以最简单的绑定:class="{ 'active': isActive }"判断是否绑定一个active:class="{'active':isActive==-1}" 或者:class="{'active':isActive==index...原创 2019-11-06 11:56:01 · 207 阅读 · 0 评论