vue使用知识
Vue 是一套用于构建用户界面的渐进式框架
小love容儿0216
喜欢编程、乐于分享、有代码洁癖
展开
-
关于Vue+Element 中tab切换启用路由缓存,保留页面查询条件
项目场景:在elementui 中 顶部 tab栏 切换,不启用路由缓存会直接刷新界面,现在项目需求是当我点击tab切换或者菜单切换的时候,原本的查询状态药保持,这在项目中还是很常见的一种。原理:Vue 提供的 keep-alive API实现对路由组件的缓存,其中include 属性可以绑定一个数组,需要路由组件的 name 值,可以实现对该路由组件进行缓存。原因分析:提示:这里填写问题的分析:例如:Handler 发送消息有两种方式,分别是 Handler.obtainMes.原创 2022-09-16 14:58:36 · 3520 阅读 · 1 评论 -
vue-pdf使用+分页预览(踩坑 + 使用本地字体库)
项目场景: 最近项目要文件流做查询报表pdf预览并下载打印的需求,网上很多关于vue-pdf的使用,使用上没有太多难度;使用方法 npm install --save vue-pdf <el-dialog title="预览报表" :visible.sync="ptVisible" width="80%" :before-close="handleClose"> <pdf ref="pdf" v-for="i in numPages" :key="i...原创 2022-05-18 13:38:49 · 2308 阅读 · 3 评论 -
关于nginx配置vue项目页面刷新404
最近项目使用的 "vue":"^2.6.11",vue.config.jsmodule.exports = { publicPath: "./", outputDir: "dist", // 构建时的输出目录 assetsDir: "static", // 放置静态资源的目录 lintOnSave: false, css: { loaderOptions: { scss: { prependData: `@impor...原创 2021-05-24 10:46:27 · 468 阅读 · 0 评论 -
vue cli3.0全局引入scss文件
前端开发中我们常常会定义一些全局常量,比如主题类的:引入方式1、在App.vue文件中引入@import"./assets/css/gloable.scss";2、在vue.config.js中配置css: { loaderOptions: { scss: { prependData: `@import "~@/assets/css/gloable.scss";` } }},scss文件::root{...原创 2021-05-21 15:12:14 · 643 阅读 · 0 评论 -
关于vue3.0 新的API setup、teleport 、 ref、reactive、toRef、toRefs的认识
teleport :功能:将子节点渲染到存在于父组件以外的DOM节点实例:<!-- to 属性就是目标位置 -->//1. 相对于body定位<teleport to="body"> <modal :show="showModal" @close="showModal = false"> modal组件 </modal></teleport>//2. 相对于自己指定的位置<div i..原创 2021-04-29 16:58:42 · 388 阅读 · 0 评论 -
关于Vue cli4.0创建项目
现在的 vue 脚手架已经升级到4.0的版本了,vue 也已经发布了3.0版本;我本地现在是Vue CLI 3.0.4,对于 Vue 3.x 的项目,需要使用 Vue CLI v4.5 以上的版本。如果你的 Vue CLI 版本较低,请自行升级;安装vue Cli:npm install -g @vue/cli创建项目:vue create vue-project<项目名称>依赖说明://按空格选中Vue CLI v4.5.12? Pleas..原创 2021-04-07 17:07:06 · 191 阅读 · 0 评论 -
element-ui按需引入报错 Error: Cannot find module ‘babel-preset-es2015‘
问题:现在项目都是基于vue-cli 3.x项目,在使用ElementUI按需引入报错Error: Cannot find module ‘babel-preset-es2015‘ElementUI 官网:https://element.eleme.cn/#/zh-CN/component/quickstart首先,安装 babel-plugin-component:npm install babel-plugin-component -D然后,将 .babelrc 修改为:..原创 2021-03-04 16:11:01 · 319 阅读 · 2 评论 -
vue降低cli版本错误 ERROR: ~/.vuerc may be outdated. Please delete it and re-run vue-cli in manual mode
最近准备开发一个H5的分享业务,发现新版的vue cli4.0是一堆坑呀首先: 我本地的@vue cli版本是:后来因为项目工期紧,直接减低了本地 cli版本至 3.0,但是因为我的失误,在创建vue项目的时候出错了,测试也不用紧张:只用找到本地用户的目录找到一个.vuerc 的文件删掉就OK了...原创 2021-02-25 11:39:40 · 4731 阅读 · 3 评论 -
vue+webpack 编译时,代码压缩,删除console与注释
uglifyJsPlugin 用来缩小(压缩优化)js文件的,最近上了一个项目经理说我账号密码在页面注释了,布上去能审查到!索性直接处理掉!1、vue cli 3.0中,项目的 vue.config.js2、vue 2.0项目的 build/webpack.prod.conf.js...原创 2020-08-27 10:23:30 · 2155 阅读 · 2 评论 -
Request header field x-token is not allowed by Access-Control-Allow-Headers in preflight response.
题:最近在做项目时,报错Request header field x-token is not allowed by Access-Control-Allow-Headers in preflight response,刚开始看到‘Access-Control-Allow-Headers’就觉得是跨域问题,跟后台联调才发现问题;刚开始接口跨域是后台帮忙处理的,登录接口因为不需要传token,所以登录接口通了,发现其他接口都报这个错误; 于是我改用前端代理,接口顺利进行; 到了项目接近收尾,打包测..原创 2020-08-19 16:02:18 · 8613 阅读 · 0 评论 -
vue2.0报错request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin跨域问题!
问题:前后端分离联合开发的时候,难免遇到跨域问题,不过也不要害怕,这是因为浏览器的同源策略,从一个域上加载的脚本不允许访问另外一个域的文档属性,So,我们只需要耐下心来处理就OK了!1、让后端小伙伴帮忙解决,好了,万事大吉!!So easy!2、前端自己解决: 找到config/index.js 在你掉接口的地方 在你调接口的时候加上api/+'接口地址'就可以了,如果你封装了你的axios的话,直接配置在你的统一接口地址的...原创 2020-08-19 14:46:06 · 4782 阅读 · 0 评论 -
vue页面实现定时刷新
根据项目订单需要几分钟去定时刷新一下获取最新订单情况,既然是定时,只能用setInterval();但是该什么时候刷新,什么时候需要清除定时器?首先看一下vue的生命周期:beforeCreate 实例初始化之后,此时数据和时间都没有;created beforeCreate之后紧接着的钩子就是创建完毕created,此时可以读取数据data的值,...原创 2019-10-30 18:56:30 · 3001 阅读 · 0 评论