Vue
文章平均质量分 56
一个小Pan桃❀
这个作者很懒,什么都没留下…
展开
-
如何查看vue版本和vue/cli的版本
经常有人以为vue -V是查看vue的版本,但其实不是,一开始自己迷迷糊糊也以为是,后来查文档之后才知道正确答案,特此在这里总结一下,那么这条博客就当是开启学习vue3之路的第一条笔记叭~如果查看vue版本和vue/cli脚手架的版本,这里共有两种方式:一、命令行vue版本npm list vuevue/cli版本vue -V部分截图:二、package.json文件查看package.json文件相关依赖版本号:...原创 2022-03-29 11:55:08 · 28543 阅读 · 0 评论 -
message提示框的三种显示方式
message提示框的三种显示方式 在store.js中使用封装的message提示组件 /*提示信息封装组件*/export function messageTips (message, str, type) { if (str !== '') { message.destroy() message.config({ top: document.documentElement.clientHeight - 200, duration...原创 2022-03-16 11:45:12 · 768 阅读 · 0 评论 -
HTTP请求中的传参方式form data、 request payload、query string parameters三者对比
目录一、GET请求Query String Parameters二、POST请求2.1 FormData2.2 Request Payload补充:Post请求总结:HTTP请求中不同的请求方式和设置不同的Content-Type时,参数传递的方式会不一样,以下对这三种形式做个总结:Query String Parameters、Form Data、Request Payload;一、GET请求Query String ParametersGET请求时,参数会转载 2021-09-10 11:36:10 · 8919 阅读 · 1 评论 -
vue 用户点击不同的导航菜单,显示对应菜单所展示的区域
情景:导航栏在一个单独组件NavigationBar/index.vue,中间的内容区也是一个单独组件ContentComponents/index.vue,但这个组件都是属于Home子组件,NavigationBar和ContentComponents属于兄弟级组件需求:用户通过点击NavigationBar组件里每一个导航菜单,把所点击的导航菜单名称value和类型type(该类型可控制中间的内容区划分的是一半区域,整个区域或默认初始区域)传给ContentComponents组件,Co原创 2021-08-27 09:55:25 · 2518 阅读 · 0 评论 -
vue 中使用vue-quill-editor富文本编辑器
使用过的类似编辑器,参考这篇博客:1.安装:在vue可视化面板中安装-》依赖-》查找插件-》安装使用npm命令行进行安装npm install vue-quill-editor --save2.注册:// 导入富文本编辑器import VueQuillEditor from 'vue-quill-editor'// 导入富文本编辑器样式import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.cs原创 2021-08-24 15:09:22 · 453 阅读 · 0 评论 -
设置导航路由
业务:实现导航路由的切换(采用路由跳转,不采用a链接跳转)。用户在点击”农业资讯“导航时,地址栏会有相应的url地址,若将该地址复制发送给别人,别人通过该地址访问能够显示对应的导航页如:Url地址为实时气象与农情http://localhost:8082/AgrometeorologyPage/RealMeteorologyAndAgricultural复制发送,新页签打开:效果如下 :具体实现:1.使用ant design vue中的menu导航组件渲染页面 ..原创 2021-08-24 09:25:19 · 693 阅读 · 0 评论 -
设置CSS: body{font-size: 62.5%;}的原因是什么?
1.如何根据不同设备的分辨率设置字体。在pc端想要做一个全屏适配的项目,但得根据分辨率的来随着放大缩小。移动端用过flexible来解决,不知道在pc端怎么处理比较好.字体的单位使用rem(root element根元素)1rem就是根元素的font-size的值。然后使用多媒体查询@media screen and (min-width=value){html{font-size:value px}}直接设置根元素的字体大小,已达到自己所需。举栗:html{font-size:625%转载 2021-08-20 17:49:18 · 1225 阅读 · 0 评论 -
vue中使用wangeditor富文本编辑器
需要实现的效果,见红色框,用户可以对文本进行各种各样的编辑:实现:1.这里我安装的wangeditor插件是2.x版本的,因此借助下方手册进行开发:wangeditor2使用手册:https://www.kancloud.cn/wangfupeng/wangeditor2/1139662.安装npm install wangeditor@2.1.23 --save3.使用<div id="websiteEditorElem" style="height: 250p..原创 2021-08-20 17:15:02 · 561 阅读 · 0 评论 -
vue 组件使用vuex中的mutations方法报错,报unknown mutation type的错误
报错:【vuex】 unknown mutation type: mutationvuex如果分为几个模块,方法是在某个模块中的话,如果直接在组件中通过this.$store.commit('方法名')是获取不到的,必须要在前面加上模块名,如this.$store.commit('模块名/方法名')才可以获取到。在项目当中,我当前组件的vuex写在store/DataMonitorStore/DataMonitorStore.js里的,所以这里必须加上模块名。当前组件是sliderBar.vue原创 2021-07-27 10:49:40 · 13304 阅读 · 1 评论 -
vue项目将所有px单位在浏览器显示时是rem
效果:步骤:1.安装npm i postcss-pxtorem@5.1.1 22.保存postcss.config.js文件postcss.config.js内容:module.exports = { plugins: { autoprefixer: { browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem': { ...原创 2021-07-22 18:01:25 · 397 阅读 · 0 评论 -
vue 配置路由导航守卫
业务需求:当一个用户成功登录系统之后,不同的用户都有各自的菜单权限,不同角色用户登录会显示该用户对应的可访问的权限菜单1.新建(注册)一个用户,会默认分配一个角色2.回到登录页,登录新(注册)的用户 ---> token3.渲染home组件的侧边栏时,使用header头部中的token4.发送获取菜单的请求时,也会使用header头部中的token导航守卫:1.如果用户没有正确登录,则不让跳转到主页2.在路由配置生效之前,统一判断token3.路由,导航,守卫4原创 2021-07-15 18:21:14 · 592 阅读 · 0 评论 -
vue 对系统管理模块下的用户管理,角色管理的实现之个人总结
参考网址:https://www.bilibili.com/video/BV15y4y1B7gA?p=481.获取权限列表并在页面上渲染展示postman数据结构:业务需求:用户在点击“修改”按钮时获取到所有权限列表的值。// 修改按钮的点击事件<template slot="operation" slot-scope="text, record"> <a @click="editShow(record)">修改</a></tem原创 2021-07-15 18:20:11 · 1872 阅读 · 0 评论 -
antd design vue分页组件
我们在使用分页组件的时候可以有两种方法:第一种是直接用表格()的自定义:pagination属性最方便;如下图所示:第二种是分页组件这里我总结的是第二种方法的使用,由于是 Ant Design Vue 的组件,所以必须安装Ant Design Vue才能使用,具体的安装请看官网~1.添加分页组件 <div class="seaTable"> <a-table :columns="columns" :dat原创 2021-07-13 10:24:57 · 2585 阅读 · 3 评论 -
vue 注册页面的实现
一、登录组件表单的数据绑定1.为a-form-model加上 :model="form"属性进行数据绑定在a-form-model表单上填写的数据自动同步到form对象上 :model="form"在当前组件的行为区有data数据,在data数据里面设置一个form对象,即为表单的数据绑定对象2.为每一个表单项的文本输入框通过v-model属性绑定form对象上具体的属性中为了看到测试效果,我在这里先在form对象初始化一个值,用户在页面上可以看到以用户名和密码等...原创 2021-07-12 13:54:16 · 3008 阅读 · 0 评论 -
antd design vue 日期组件汉化
使用antd design vue组件库时,一些默认提示为英文,要将英文汉化,以DatePicker为例这里未把Today,select time等汉化的效果:后来查找了很多文档,按照文档把其中一个日期选择框的Today给汉化了,具体的步骤如下:1.引入 import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn');2.在data中初始化定义,并把自己想汉化的内容重新设置原创 2021-07-08 18:52:38 · 4484 阅读 · 3 评论 -
vue 登录与退出的实现
一、登录组件表单的数据绑定1.为a-form-model加上 :model="form"属性进行数据绑定在a-form-model表单上填写的数据自动同步到form对象上 :model="form"在当前组件的行为区有data数据,在data数据里面设置一个form对象,即为表单的数据绑定对象2.为每一个表单项的文本输入框通过v-model属性绑定form对象上具体的属性中为了看到测试效果,我在这里先在form对象初始化一个值,用户在页面上可以看到以用户名和密码,但是密码一般翻译 2021-07-08 14:15:44 · 1717 阅读 · 0 评论 -
vue 后台返回文件流 前端页面上导出下载excel
1.项目要求在做项目的时候,碰到前端需要下载文件,其中涉及到的文件必须从后端传送。为了能对文件处理之后及时发送到前端,后面考虑用文件流的方式,后端以文件流的方式,前端通过a标签直接进入下载。刚开始没接触过,以为就像配置普通接口一样,因此在控制台访问的时候发现了与普通接口不一样的地方,如下图所示是后端返回的数据流,反正看不懂2.解决关键:后端返回前端的头部中添加设置contentType为x-download.代码项目中我的下载按钮是UI提供的一个图片,问了小姐姐说要用一个a标.翻译 2021-07-07 19:07:21 · 617 阅读 · 0 评论 -
vue+antd-design-vue 设置下拉菜单默认选项并(静态)遍历
设置默认值在data中全局定义defalutTime变量,初始化为2016年给下拉菜单添加v-model属性,动态绑定value值遍历在data中定义一个数组,里面包含不同年份的对象给列表遍历的时候使用v-for遍历数组...原创 2021-07-01 15:43:24 · 636 阅读 · 0 评论