Vue
文章平均质量分 55
Vue相关知识点
厚积薄发的Cicci
每个人技能都有觉醒期 只是时间早晚得问题
展开
-
40 个前端超强项目使用代码, 直接体现基本功
前端项目超强实用代码原创 2023-08-08 14:50:29 · 766 阅读 · 0 评论 -
Vue 实现导出功能及解决导出excel表格无法打开的问题
Vue 实现导出功能及解决导出excel表格无法打开的问题原创 2022-06-24 11:28:51 · 7177 阅读 · 2 评论 -
vue el-upload实现多文件上传
vue el-upload实现多文件上传原创 2022-06-16 15:23:20 · 4372 阅读 · 0 评论 -
接收后端返回的pdf文件流 前端使用Vue-pdf实现预览(分页)
后端返回文件流前端将文件流转为成blob地址预览pdf文件原创 2022-06-16 14:53:51 · 11921 阅读 · 2 评论 -
Element UI 实现Upload多文件上传 (只请求一次接口)
页面代码展示 代码粘贴直接用注: 页面上用到的请求 是封装好的 from-data 表单提交后台效果图展示:请求参数展示:后端代码springboot代码展示:原创 2022-06-07 11:21:54 · 5619 阅读 · 0 评论 -
vue跳转页面常用的方法
**1:router-link跳转**1.不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始;如果不带'/',则从当前路由开始。 2.带params参数<router-link :to="{name:'home', params: {id:12345原创 2022-05-19 18:49:10 · 1371 阅读 · 0 评论 -
Vue --- 正则共用和表单校验封装方法
**1.在view/api 目录下创建pattern.js文件**//整数const IntegerRegex = /(^-?[1-9]\d*)|(0{1})$///正整数const IntegerPlusRegex = /^[1-9]\d*|0$///小数const decimalRegex = /^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$///正小数const decimalPlusRegex = /^[+]{0,1}(\d+)$|^原创 2021-11-24 14:24:12 · 1820 阅读 · 4 评论 -
vue cli3中vue.config.js的配置
来源:https://www.cnblogs.com/lanshengzhong/p/10386986.html(转载,个人做个笔记)Babel : 将ES6编译成ES5TypeScript: javascript类型的超集Progressive Web App (PWA) Support: 支持渐进式的网页应用程序Router:vue-routerVuex: 状态管理CSS Pre-processors: CSS预处理Linter / Formatter: 开发规范Unit Testin转载 2021-11-02 16:51:37 · 249 阅读 · 0 评论 -
Vue繁体简体转换
https://github.com/nk2028/opencc-js/blob/main/README-zh-CN.md原创 2021-07-27 19:04:48 · 1856 阅读 · 0 评论 -
Vue element-ui 组件使用过程中产生的问题汇总(持续更新)
这里做下平时用到组件时 产生的问题记录①.关于ElementUI导航组件el-menu刷新页面后恢复默认问题<el-menu :default-active="activeIndex" router //是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转> // index值设置为路由path <el-menu-item index="/">首页</el-menu-item> <原创 2021-06-30 19:00:32 · 1209 阅读 · 0 评论 -
解决办法:vue-cli4创建项目导入elementUI,浏览器报错Uncaught TypeError: Cannot read property ‘prototype‘ of undefined
查看elementUI官网,发现这样一句话:使用 vue-cli@3 我们为新版的 vue-cli 准备了相应的 Element 插件,你可以用它们快速地搭建一个基于 Element 的项目。而官网引入的格式是这样的:import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.us原创 2021-06-25 15:34:40 · 721 阅读 · 0 评论 -
Vue中computed和watch的区别
计算属性computed :支持缓存,只有依赖数据发生改变,才会重新进行计算不支持异步,当computed内有异步操作时无效,无法监听数据的变化computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在c转载 2021-06-22 18:41:01 · 111 阅读 · 0 评论 -
Vue中的路由配置项meta(及权限登录不同的导航)
meta?meta简单来说就是路由元信息 也就是每个路由身上携带的信息。列举几个例子:①.面包屑效果路由信息:页面:②.可以在路由导航守卫跳转的时候判断有没有这个信息,如果有让跳转如: 设置meta属性设置路由守卫③.根据不同的用户权限分配不同的路由导航当我登录是,通过判断是管理员还是普通用户,引导他们进入不同的内容的index.vue组件页面。没错,只用一个页面,实现两种权限。 有多种方式 先来看下第①种:可以提前创建几套路由规则 然原创 2021-06-16 15:51:20 · 15485 阅读 · 0 评论 -
vue之封装loading组件
直接上代码: <!-- 用法: this.$store.commit('showLoading', true);展示 this.$store.commit('showLoading', false);不展示 <div class="main"> <Loading v-show="isLoading" /> </div> .main{ position: relative;/转载 2021-05-26 18:27:24 · 553 阅读 · 0 评论 -
Element-UI table表格 自定义样式
Element-UI中关于table表格的样式操作自定义列的内容:需求:在表格最后一栏添加操作按钮通过slot-scope="scope"添加操作按钮,这是专门为我们提供的插槽,方便自定义添加不同的内容。<el-table-column> <template slot-scope="scope"> <el-button size="mini" type="primary">编辑</el-button>转载 2021-05-18 11:00:55 · 15468 阅读 · 0 评论 -
Vue自定义公共组件及提取公共的方法
vue自定义公共组件我们在编写页面的时候,会存在公共的组件,比如头部和底部菜单我们拿公共头部为例子,想在每个页面都显示公共头部的实现方式有两种:在src/components目录创建目录 common, 再创建header.vueheader.vue<template> <div> <h1>header in here</h1> </div> </template> <script>原创 2021-05-17 18:25:44 · 3647 阅读 · 0 评论 -
Vue项目的一些优化策略
Vue项目完成后就要从开发环境转成生产环境一些第三方的包体积过大,导致生成js文件过于庞大,这是时候可以生成打包报告来查看项目中的问题1.生成报告有两种方式,一种使用npm run build --report2.另一种使用vue脚手架的ui可视化面板,在项目中输入vue ui3.点击生产环境下的运行按钮,可以看到打包出来的js文件一共有2M之多,js/chunk-vendors.js就是一些项目依赖文件,再右侧可以看到element-ui 和echarts 以及富文本编辑器,树状表格插件这几个原创 2021-05-11 11:39:44 · 7796 阅读 · 3 评论 -
vue请求拦截 给所有的api接口的请求 params 带上一个存储的值及qs的安装
vue请求拦截 给所有的api接口的请求 params 带上一个存储的值:Vue.prototype.$http = axios;// 设置请求拦截器,为请求对象添加token,这是后续权限api要求的Vue.prototype.$http.interceptors.request.use(req => { // req就是请求对象 console.log(req) // 基于请求拦截器显示响应进度条 // NProgress.start(); // 为请求对象设置携带tok原创 2021-05-08 11:06:14 · 1303 阅读 · 0 评论 -
Vue组件之间的传值(父子,子父,兄弟传值)
一、父组件向子组件传递数据在 Vue 中,可以使props向子组件传递数据子组件部分:这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量。如果需要从父组件获取 logo 的值,就需要使用 props: [‘logo’]在 props 中添加了元素之后,就不需要在 data 中再添加变量了父组件部分:在调用组件的时候,使用 v-bind 将 logo 的值绑定为 App.vue 中定义的变量 logoMsg然后就能将App.vue中 logoMsg转载 2021-04-28 18:21:56 · 667 阅读 · 0 评论 -
this.$router.push用query传参对象时需注意的地方
在vue项目中,我们用函数式编程this.$router.push跳转,用query传递一个对象时要把这个对象先转化为字符串,然后在接收的时候要转化为对象,要不然会接收不到参数。要不就把参数分开传递,不要放到对象里。this.$router.push({ path: '/liveing', query: { routeParams: JSON.stringify({ liveUrl: url, flag: 2 }) }});接收:let routeParam转载 2021-04-26 15:08:33 · 1529 阅读 · 0 评论 -
Vue 项目运行(打包)报错:vue_element_shop_manage@0.1.0 build: `vue-cli-service build`解决方法
用vue cli3.0生成vue项目时,运行项目(打包项目)出现报错build: vue-cli-service build,serve: vue-cli-service serve最后查看发生安装的node -v版本时v12.0,node版本不稳定造成的,所以通过nvm切换到node -v v8.11.2版本,再次运行就可以了。下载安装nvm:打开网址我们可以看到有两个版本:nvm-noinstall.zip:绿色免安装版,但使用时需进行配置。nvm-setup.zip:安装版,推荐使用原创 2021-04-07 14:10:43 · 6219 阅读 · 0 评论 -
Vue打包后生成一个可修改接口地址的配置文件
先给几个参考:vue2.0中实现打包后可配置接口地址webpack 打包vue项目后生成一个可修改接口地址的配置文件这个是vue3.0的(vue中实现打包后可配置接口地址)感谢!!!再来贴我自己的代码:(普通版)第一步:在 static 静态文件中新建一个 serverconfig.js 文件,js 代码如下:window.global_url = { Base_url: "https:www.rioyi.com:50000/inhouse" };注意是src下面的static文件夹转载 2021-04-07 13:57:08 · 638 阅读 · 0 评论 -
vue项目(vue-cli2,vue-cli3)打包后出现空白解决方案
出现这种情况要分两个处理方式(vue-cli2和vue-cli3)**vue-cli2;**首先找到config/index.js文件,将assetPublicPath的路径改为“./”即可,**vue-cli3:**在根目录下创建vue.config.js文件,在文件里面加入以下代码module.exports = { assetsDir: 'static', parallel: false, publicPath: './',}到了这步本来就可原创 2021-04-07 13:47:11 · 1315 阅读 · 0 评论 -
ERROR Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.
**vue常见报错**ERROR Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.解决办法:清空 :package-lock.json 中 旧的 vue-loadernpm i -D vue-loader@14安装14版本原创 2021-03-30 15:42:17 · 4935 阅读 · 2 评论 -
vue项目打包步骤及运行打包项目
**1.项目打包**终端运行命令 npm run build打包成功的标志与项目的改变,如下图:点击index.html,通过浏览器运行,出现以下报错,如图:解决: 修改1、查看package.js文件的scripts命令2、打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳 转到index.js文件3、其中dev是开发环境,build是构建版本,找到build下面的assets原创 2021-03-15 11:15:20 · 19268 阅读 · 0 评论 -
vue引入echarts示例
**首先,第一步下载Echarts。**可以使用淘宝镜像下载 更快哦!~npm 下载:npm install --registry=https://registry.npm.taobao.org下载淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org使用cnpm(淘宝镜像)下载echarts:cnpm install echarts**第二步,引入echarts。**1. 在main.j原创 2021-03-10 14:38:03 · 395 阅读 · 0 评论 -
Vue中有哪些生命周期及使用场景
生命周期在vue中分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后。1、beforeCreate(创建前)在数据观测和初始化事件还未开始。2、created(创建后)此时状态:Vue里的数据在内存中已经创建完毕,但是还没有渲染到页面上。可做操作:从服务器获取一些初始化的数据,或者通过ajax向服务器发送一些数据。3、beforeMount(载入前)在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注原创 2021-03-09 15:49:50 · 2806 阅读 · 0 评论 -
vue-cli可视化创建项目流程
**可视化面板搭建vue项目3.0**1. 安装 node.js在你的平台上下载 Node.js 源码或预编译安装包网址如下:链接:直达 node.js下载.输入node -v,可得 node.js 的版本号,如下,表示安装成功同时测试 node.js 自带的npm的版本, 输入npm -v 如下:2. 安装 vue-cli 3.01. 已安装vue-cli 的使用命令 npm uninstall vue-cli -g 或 yarn global remove vue-翻译 2021-03-09 15:39:08 · 569 阅读 · 0 评论 -
VUE-CLI脚手架的搭建(2.0 及 3.0)
1、安装node js下载地址:http://nodejs.cn/download/2、安装完成后运行Node.js command prompt(node -v查看安装版本)3、安装npm(由于现在版本的nodejs已经集成npm所以无需安装,可以用npm -v 查看版本)4、注册cnpm来代替npm使用命令:npm install cnpm -g --registry=https://registry.npm.taobao.org如果你发现你安装成功了,使用cnpm却发现找不到命令,那转载 2021-03-09 15:07:02 · 5489 阅读 · 0 评论 -
Vue面试中,经常会被问到的面试题/Vue知识点整理
看看面试题,只是为了查漏补缺,看看自己那些方面还不懂。切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈不然,稍微有水平的面试官一看就能看出,是否有真才实学还是刚好背中了这道面试题。(都是一些基础的vue面试题,大神不用浪费时间往下看)一、对于MVVM的理解?MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。View 代表UI 组件,它负责将数据模型转化成UI 展现出来。V原创 2020-08-06 16:51:23 · 213 阅读 · 0 评论