随笔分类 -  Vue项目

摘要:vue项目安装lees-loader报错:Module build failed: Error: Cannot find module 'less'1-新搭建的一个项目,运行时报Module build failed: Error: Cannot find module 'less'错误 原因:vue文件里面的style添加了 lang="less" 解决方案: 安装less npm install less 2-安装less后运行报错: Mo 阅读全文
posted @ 2023-07-19 18:10 Mahmud*小麦* 阅读(260) 评论(0) 推荐(0)
摘要:Vue过滤器的使用详解(代码实现)过滤器的功能是对要显示的数据进行格式化后再显示,其并没有改变原本的数据,只是产生新的对应的数据 过滤器,其实不是必须要用的东西,它只是vue给我们提供的新的数据处理方式,过滤器能做到的,用计算属性,methods方法,依然可以实现 案例1:(过滤器简单使用) <template> <h3>{{str 阅读全文
posted @ 2023-03-05 23:28 Mahmud*小麦* 阅读(104) 评论(0) 推荐(0)
摘要:登录-退出功能(管理系统Vue)一、登录业务流程 在登录页输入用户名和密码 调用后台接口进行校验 验证通过之后,根据后台的响应状态跳转到项目主页 使用路由导航守卫控制访问权限 - 4.1 项目中出现登录之外的其他API接口,必须在登录后才能访问,未登录状态下不能看到其他页面 - 4.2 将登录成功之后的token,保存到客户端se 阅读全文
posted @ 2023-02-15 00:13 Mahmud*小麦* 阅读(119) 评论(0) 推荐(0)
摘要:Vue组件之间几种传值的方法(看代码)简单额总结一下几种组件之间的传参方式 一. props(父传子) 父组件 传递 <template> <div> <HelloWorld :msg="msg" /> </div> </template> <script> import HelloWorld from "./components/He 阅读全文
posted @ 2023-01-10 15:41 Mahmud*小麦* 阅读(64) 评论(0) 推荐(0)
摘要:elementui表格中实现点击单个单元格和表头--带参数触发事件/跳转路由对于element表格做点击跳转的功能有两大类:1,表头的点击跳转2,表格内容单元格进行点击跳转 是因为该表格只有tabs标签也第二个选项被选中的时候才能让他起效果,所以先做判断,第二个tabs标签被选中的时候实现该功能 1,tabs标签做判断 this.saveTableName1是第二个tabs 阅读全文
posted @ 2023-01-10 13:51 Mahmud*小麦* 阅读(3824) 评论(0) 推荐(0)
摘要:echarts点击柱状图带参数跳转到指定页面(路由)echarts点击柱状图带参数跳转到指定页面(路由) 项目开发者常用echarts来实现数据可视化功能。上次遇到了一个问题,就是通过后台返回的数据渲染echarts数据完成后需要点击柱形图图标的时候跳转制定的新的页面展示(当然新的页面内容,后台通过柱形图的参数来给我们返回过来的) 1,引入echar 阅读全文
posted @ 2023-01-10 12:06 Mahmud*小麦* 阅读(2888) 评论(0) 推荐(0)
摘要:element-UI 根据table中数据改变颜色 或显示对应内容element-UI 根据table中数据改变单元格数据颜色或显示对应的内容的实现如下: 1.根据table中数据不同改变颜色(正数颜色为红色,负数颜色为绿色) <el-table-column prop="sharesReturn" label="盈亏(元)"> <template scope=" 阅读全文
posted @ 2022-12-30 11:04 Mahmud*小麦* 阅读(3680) 评论(0) 推荐(0)
摘要:el-table设置单元格里的字体颜色例如图中,设置某个单元格的字体颜色: ① el-table标签上添加属性::cell-style=“cellStyle” <el-table :data="tableData" :cell-style="cellStyle" border stripe fit> ②vue文件里在method里声明 阅读全文
posted @ 2022-12-14 12:40 Mahmud*小麦* 阅读(1404) 评论(0) 推荐(0)
摘要:incoming change和current change incoming change和current change 1.提交代码时冲突。 如果远端代码和本地修改有冲突,是不会拉取代码成功的,也就是说,只有把代码贮藏【stash】起来,才能拉取到最新代码,这时候 应用贮藏的时候就可能会发生冲突 阅读全文
posted @ 2022-12-05 10:35 Mahmud*小麦* 阅读(861) 评论(0) 推荐(0)
摘要:项目中elementui时间线的使用~✔✔Vue项目项目中经常会遇到事件线的功能Timeline,比如说快递跟踪功能等。element.js 时间线的使用,先来看效果图 是因为element2.6.0之前的版本不支持时间线组件了。所有下载安装比较麻烦。这里推荐使用本地组件:直接放在pluginis目录下,然后引入就可以 timeline文件 阅读全文
posted @ 2022-11-29 11:38 Mahmud*小麦* 阅读(2564) 评论(0) 推荐(0)
摘要:项目使用lodash(深拷贝)的方法Vue项目使用lodash(深拷贝)的方法 Lodash使用了一个简单的 _ 符号,就像Jquery的 $ 一样,十分简洁。 https://www.lodashjs.com/ 1.安装 npm install lodash -S 2.导入 (1)方式一:在main.js中导入 //全部导入 imp 阅读全文
posted @ 2022-11-28 14:29 Mahmud*小麦* 阅读(1099) 评论(2) 推荐(0)
摘要:Vue富文本编辑器(vue-quill-editor)使用✔✔最近工作中需求使用一款富文本编辑器,最终选择了vue-quill-editor,之所以选择vue-quill-editor,是看上了它的轻量以及外观简洁的优势。打开官方文档,直接上手配置,各种报错,踩了很多坑,遇到的主要问题有以下几个 字体大小无法设置 工具栏样式错位 图片上传报错 编辑器高度无法设 阅读全文
posted @ 2022-11-28 12:12 Mahmud*小麦* 阅读(251) 评论(0) 推荐(0)
摘要:ElementUI实现图片上传的功能&#127752;~(已完成✔)Vue项目中经常会遇到使用ElementUI实现图片上传的需求~(已完成✔) (1)安装官网组件Upload 打开官网有个Upload 上传组件-通过点击或者拖拽上传文件:本次项目中用到了:图片列表缩略图结构 <!-- action-表示图片要上传到的后台api地址--> <!-- on-previ 阅读全文
posted @ 2022-11-27 23:17 Mahmud*小麦* 阅读(2996) 评论(1) 推荐(0)
摘要:Vue项目中使用ElementUI实现Steps步骤条和Tabs标签页的联动效果功能Vue项目中使用Elemen-tUI做一个steps步骤条:左边的内容和步骤条进度效果是同步的切换,顶部是 (1)steps步骤条 (2)Tabs标签页 (3)steps步骤条和tabs标签页之间的联动效果 思路: 那么这里需要步骤条的属性名称和标签页的属性名称联动同步切换的功能:步骤条是属性 :a 阅读全文
posted @ 2022-11-27 14:30 Mahmud*小麦* 阅读(5154) 评论(0) 推荐(0)
摘要:Vue项目中使用树形控件 vue-table-width-tree-gridVue项目中使用树形控件 vue-table-width-tree-grid 需要实现的整体效果如下: 这个树形结构组件ElementUI是没有提供的,我们需要依赖第三方插件来完成。 一、安装tree-table组件 (1)Vue 可视化工程vue UI来安装: 我们打开VUE的可视化面板(在cmd 阅读全文
posted @ 2022-11-15 21:47 Mahmud*小麦* 阅读(2534) 评论(0) 推荐(0)
摘要:vue项目中手机号+邮箱验证正则~✔vue项目中手机号+邮箱验证正则~✔ vue项目中经常会遇到各种验证规则的需求。这里我把布局用ElementUI来写出来了。接下来需要添加用户,密码,手机号,邮箱的验证规则。 里面用户名,密码是比较简单的,直接用element提供的组件验证规则。手机号和邮箱是自定义规则,需要严格验证是否合法 1,首 阅读全文
posted @ 2022-11-09 20:22 Mahmud*小麦* 阅读(862) 评论(0) 推荐(0)
摘要:ElementUI中Table和Switch组件中插槽scope应用使用场景ElementUI中Table和Switch组件中插槽scope应用使用场景 ElementUI 安装 npm i element-ui -S 引入 Element main.js 内容添加 import ElementUI from 'element-ui';import 'element-ui/ 阅读全文
posted @ 2022-11-08 21:15 Mahmud*小麦* 阅读(305) 评论(0) 推荐(0)
摘要:项目中使用ElementUI的Form 组件使用ElementUI的Form 组件 (1)首先必须是项目中安装ElementUI库 (2)引入Vue的项目中 (3)引入对应的组件名称并且全局注册 ElementUI 安装 npm i element-ui -S 引入 Element main.js 内容添加 import ElementUI 阅读全文
posted @ 2022-11-08 20:24 Mahmud*小麦* 阅读(138) 评论(0) 推荐(0)
摘要:一般我们的项目开发完毕以后就需要考虑如何优化,如何将项目部署上线,提供给外界用户使用等的问题。 所有必须要考虑的问题是:优化项目,部署上线项目 项目优化方案: (1)生成打包报告:通过项目的Vue UI可视化工具生成一个打包的报告,根据报告发现和优化项目,进一步的区解决。(2)第三方库使用CDN:为 阅读全文
posted @ 2022-11-07 13:46 Mahmud*小麦* 阅读(266) 评论(0) 推荐(0)
摘要:ElementUI的左侧菜单栏的小问题~~Vue后台管理的项目中使用了ElementUI的组件库。左侧菜单栏遇到了一些小问题,结果一步一步的解决了~~ 1,首先菜单栏的图标Icon不满足我们的需求,我们可以引入公司内部的样式icon图标文件,数组的方式动态渲染出来就可以。 2,左侧菜单栏的列表渲染完成后点击一个菜单发现全部菜单同时展开 3, 阅读全文
posted @ 2022-11-07 09:13 Mahmud*小麦* 阅读(1018) 评论(0) 推荐(0)