vue
文章平均质量分 63
Keeling1720
这个作者很懒,什么都没留下…
展开
-
Vue使用iview组件库
步骤一、使用npm下载ivew组件库步骤二、在main.js中配置iview步骤三、使用iview组件在官网随便找一个来看看效果。这里以官网的按钮为例:我们直接抄他代码就完事了,比如,在我们的App.vue里面我们打算加一个蓝色的按钮和红色的按钮,那么就是:效果如下:其他的组件也是这么扣,然后我们再给他写个样式啥的,这不就搞定了嘛。...原创 2022-07-11 13:24:04 · 3180 阅读 · 0 评论 -
Vue脚手架(快速搭建Vue工程)
脚手架,即 预先定义好的目录结构及基础代码。而Vue的脚手架是Vue-cli,脚手架能帮助我们快速生成一个Vue的项目模板。他的主要功能如下:环境准备:node.js(>=6.x,首选8.x) + git然后我们就可以下载我们的vue-cli了。在cmd中输入:(-g表示全局安装,也就是global的缩写),npm记得设置淘宝的镜像源,会比较快。查看自己是否已经设置了淘宝的镜像源,请在cmd输入:如果显示结果如上,那么就说明已经设置过了,如果不是,那么请使用以下语句进行配置:配置完成后,我们就可以使用以下原创 2022-07-11 13:08:18 · 882 阅读 · 0 评论 -
Vue拦截器报错Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘code‘)
如果出现Vue拦截器报错Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘code’)。那么,很可能是因为你修改了你的拦截器却没有重启你的前端服务器的原因。重启一下就可以啦。原创 2021-12-22 15:34:51 · 25641 阅读 · 0 评论 -
解决Vue控制台报错:NavigationDuplicated: Avoided redundant navigation to current location
它的提示是 避免到当前位置的冗余导航。 简单来说就是重复触发了同一个路由。解决方法如下:在router文件夹下的index.js文件中添加这几行代码即可:const originalPush = Router.prototype.push//解决报错信息:NavigationDuplicated: Avoided redundant navigation to current locationRouter.prototype.push = function push(location) { r原创 2021-12-11 21:24:54 · 1799 阅读 · 0 评论 -
SpringBoot和Vue跨域Session不是同一个怎么解决(不用Redis)
SpringBoot和Vue跨域Session不是同一个怎么解决(不用Redis)在使用Vue和SpringBoot做前后端分离项目时,会出现以下问题:前端直接请求数据会出现跨域访问限制的问题。如果登录的时候我们在Session域中保存了UserLogin,然后为了防止用户直接在不登录的情况下访问主页面,我们还要判断Session域中是否有UserLogin。这个时候,我们会发现访问的Session不是同一个(想知道是不是同一个Session,我们可以调用HttpSession对象的isNew方法判原创 2021-11-03 18:17:40 · 1391 阅读 · 2 评论 -
Vue项目访问不存在的链接显示空白,怎么让他报错
如果,当我运行我的vue项目的时候,我随便输了个网址路由,他居然!!!!直接给我扔了个空白页。不知道的还以为是网页还没加载出来呢?怎么搞?简单,我们给他报404不就行了吗。首先,我们在我们的views目录下,新建一个NotFound.vue文件。<template> <img src="../assets/logo.png" /> <h1>404</h1> <h2>抱歉,当前页面不存在</h2></template&原创 2021-10-12 17:06:33 · 491 阅读 · 0 评论 -
Vue工程路径前面的#怎么去掉
这个其实很简单,我们只需要在我们的路由下的index文件里面加一个mode,把他变成history就可以了。如下:使用npm run dev,进入我们的登录页面:(可以看到前面的#已经不见了)原创 2021-10-12 16:50:28 · 746 阅读 · 0 评论 -
Vue实现嵌套路由
Vue实现嵌套路由嵌套路由又称为子路由,在实际应用中,通常由多层嵌套的组件组合而成。同样地,URL中各段动态路景观也按某种结构对应嵌套的各层组件,例如我们看Vue的官网教程。当我们点击左边的项目的时候,我们知道,他左边和上面两个导航栏是不会改变的。改变的只是右边那一块区域。将鼠标放在某个标签上面,我们可以看到,他就是一个路由。或者我们应该说,他就是一个子路由。接下来,我们就说一下怎么实现这个子路由功能。我们先去ElemetUI里面选一个吧。我选的是下面它对应的代码如下:我们将它写到我们的Mai原创 2021-10-11 21:31:33 · 6391 阅读 · 0 评论 -
Vue整合ElementUI
Vue整合ElementUI首先说一个事儿,要用ElementUI,最好是用Vue的脚手架先搭建好项目再用,如果直接在HTML中通过导入在线的vue、axios、elementUI的依赖,然后直接用的话。。。。会很麻烦,而且布局可能也会跟官网给你的不太一样。(这雷我先踩了,不信的小伙伴也大可以自己去试一下,毕竟也有可能是本人智力问题嘿嘿嘿)ok,废话不多说,我们直接从vue怎么整合ElementUI说起。首先,我们通过vue-cli创建我们Vue的脚手架。(不知道怎么下载vue-cli和搭建的,可以看原创 2021-10-09 18:32:32 · 21482 阅读 · 6 评论 -
Webpack的安装和使用
Webpack的安装和使用打开cmd,使用指令npm i webpack webpack-cli -g进行下载即可。在Webpack中,万物皆模块,js、css、图片等等在webpack中,我们都可以看成是一个模块。现在我们来简单地使用我们的webpack。写代码前,我们先看一下最终的目录结构吧:首先我们写一个要被引用的hello.js文件:exports.sayHello = function(){ document.write("<div>Hello Webpack!<原创 2021-10-09 09:36:03 · 209 阅读 · 0 评论 -
Vue快速入门(下)
文章目录Vue快速入门(下)(应急用)八、使用Axios实现异步通信(重点)8.1 什么是Axios8.2 第一个Axios应用程序九、表单输入绑定十、组件基础Vue快速入门(下)(应急用)八、使用Axios实现异步通信(重点)8.1 什么是AxiosAxios是一个开源的可以用在浏览器端和Nodejs的异步通信框架,他的主要作用就是实现Ajax异步通信,其功能特点如下:从浏览器中创建XMLHttpRequests从node.js中创建http请求支持Promise API拦截请求和响应原创 2021-10-06 19:17:13 · 1719 阅读 · 0 评论 -
Vue操作表格进行增删改查
文章目录Vue操作表格进行增删改查查询增加删除修改Vue操作表格进行增删改查查询首先是导入依赖:<script type="text/javascript" th:src="@{/js/jquery-3.6.0.js}"></script><script type="text/javascript" th:src="@{/js/vue.js}"></script>然后我们在渲染页面的时候直接请求我们的JSON数据。 <table b原创 2021-10-06 16:10:08 · 7180 阅读 · 1 评论 -
Vue快速入门(上)
文章目录Vue快速入门(应急用)一、下载和导入Vue二、第一个Vue程序三、条件与循环四、处理用户输入(事件监听器)五、Vue实例5.1 $watch(当某个变量被修改后调用)5.2 生命周期六、模板语法6.1 文本6.2 原始HTML6.3 Attribute6.4 使用JavaScript表达式6.5 指令Vue快速入门(应急用)一、下载和导入Vue要想用vue,首先,我们肯定要引用vue的“依赖”。这里提供两种方法:方法一、自己去官网下载vue.js文件点击这里下载vue.js文件 (由于这原创 2021-10-04 16:23:50 · 1177 阅读 · 0 评论