vue
在奋斗的大道
程序发烧友
展开
-
Vue3 集成Element3、Vue-router、Vuex实战
在src/components文件夹下创建两个页面(Home.vue/Login.vue)在 src 目录下创建 store/index.js store 仓库。在main.js中引入element3 ,并注册element3。在App.vue 引入Elements 3 按钮。在src下创建route文件夹和下面的index.js。在route/index.js 注册相关页面。打开index.js 引入router。在main.js 引入router。修改Home.Vue。原创 2023-04-03 09:17:54 · 1189 阅读 · 0 评论 -
Vue 2 升级Vue3 ,并且使用vsCode 搭建Vue3 开发环境
第一:使用快捷键win+R,打开cmd 命令窗口。第二:查看当前电脑运行的vue 版本,请使用如下指令:卸载目前vue版本,输入如下指令:温馨提示:使用Windows 11 提示报错信息不用在意,由于Windows 11 操作的文件权限 要求比较高,导致有些vue 的文件无法正常删除,需要管理员的权限才可以操作,我们仅仅需要确保当前环境已经移除Vue 环境。再次执行查看Vue 版本信息。第三步:安装Vue 3前提条件:确保你的Node.js的版本高于vue 3 最低要求的版本。原创 2023-03-31 14:44:14 · 2114 阅读 · 2 评论 -
VUE +Element 实现多个字段值拼接
效果截图:VUE 核心功能代码片段://获取公共通知列表 getUsers() { let para = { page: this.page, title: this.filters.title }; this.listLoading = true; //NProgress.start(); getNoticeListPage(para).then((res) => { this.total = res.data原创 2022-04-13 18:16:18 · 3039 阅读 · 7 评论 -
vue+element 根据状态,显示不同的操作按钮
效果截图:VUE 核心功能代码片段<!--列表--> <el-table :data="hrs" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"> <el-table-column type="selection" width="55"> </el-table-column> &原创 2022-04-12 23:09:12 · 6364 阅读 · 0 评论 -
SpringBoot + MyBatis+Vue +ElementUI 实现省市县组件封住
Spring Boot后台项目编写:pom.xml 文件<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelV原创 2021-09-08 19:31:28 · 489 阅读 · 0 评论 -
Vuex 总结
Vuex组件之间共享数据的方式父向子传值:通过 props 接收; 子向父传值:通过$emit触发 兄弟组件之间共享数据:EventBus;Vuex Vuex 原理简介Vuex 实现了一个单向数据流,在全局拥有一个 state 存放数据,当组件要更改 state 中的数据时,必须通过 mutations 进行,mutations 同时提供了订阅者模式供外部插件调用获取 state 数据的更新。而当所有异步操作(常用于调用后端接口异步获取数据)或批量的同步操作需要走 acti...转载 2021-09-08 15:50:11 · 255 阅读 · 0 评论 -
Vue + ElementUI 之el-table的二次封装,带条件查询及翻页功能
在实际开发后台项目中会存在很多表格,表格数据过多就需要分页和按条件筛选搜索查询,于是就对el-table进行了二次封装。页面效果如图:第一步:首先创建一个 searchForm.vue 文件,放置筛选查询条件和按钮。<template> <el-form :label-width="labelWidth" label-position="right" size="small" class="search-form" > <el-con.原创 2021-09-08 15:04:37 · 3384 阅读 · 3 评论 -
Vue2 + ElementUI 关于$emit用法总结
数据传递总结父组件可以使用 props 把数据传给子组件。 子组件可以使用 $emit 触发父组件的自定义事件。实战:封住客户等级功能的通用表单(支持新增和编辑)定义封住子组件:levelCommon.vue<style></style><template> <el-dialog :title="title" :visible="visible" size="tiny"> <el-form ref原创 2021-09-08 14:36:15 · 2395 阅读 · 0 评论 -
Vue + ElementUI 编辑/新增页面复用总结
前景需求最近编写简单crm后台管理类项目,涉及到表单的使用上,有着大量的相同内容的表单,根据使用场景分为新建表单与编辑表单。实战:实现一个客户等级管理功能,其中包含客户等级列表,新建客户等级,修改客户等级信息功能。客户等级列表:新建客户等级:修改客户等级:从上面图中可以看出,客户等级的编辑表单和删除表单基本一致。功能实现实现方式一:<style></style><template> <el-c..原创 2021-09-08 14:21:23 · 5425 阅读 · 2 评论 -
ElementUI 之el-table-column 格式化属性(日期格式化)
如果想对表格某一列的内容格式化(性别\日期显示),可用 formatter 属性。实战:日期显示在method 定义formatDate 方法 formatDate(row, column) { // 获取单元格数据 let data = row[column.property] if(data == null) { return null原创 2021-09-07 21:38:12 · 3492 阅读 · 0 评论 -
Vue + ElementUI 实现批量删除功能
第一步:在el-table 组件绑定@selection-change事件第二步:在调用父组件的子组件中添加当表格项发生变化时会触发事件函数:selectionChange(val)在method 函数中添加如下代码: selectionChange(val) { // 表格选项发生变化 console.log("触发表格事件") this.selectionList = [] ..原创 2021-09-07 16:29:45 · 2516 阅读 · 2 评论 -
Vue 项目中使用ElementUI 框架中message 对话框实例对象
Element-ui中message弹出框使用总结:第一:按需导入的element-ui中的message在customer.vue 文件中引入message 弹出对话框第二步:在方法里面直接通过调用Message 弹出对话框实例对象,填充相关属性ElementUI之Message 相关属性和方法,官方文档地址:https://element.eleme.io/#/zh-CN/component/message...原创 2021-09-07 16:10:51 · 836 阅读 · 0 评论 -
Vue 基于ElementUI 封装table表格组件 + pagination分页组件
效果展示:状态页面用户页面Vue 源码:定义封装组件:Pagination.vue<template> <div> <el-table height="520" :data="tableData" style="width: 100%" border> <template v-for="(item, index) in columnData"> <el-table-column .原创 2021-09-06 16:00:36 · 1485 阅读 · 2 评论 -
axios 使用总结
功能简介:axios是第三方封装库,作用是在框架中使用数据请求安装: npm install axios –S在Vue 项目文件中的main.js 文件,定义axios请求类的全局引用。核心代码如下特点:1. 它在浏览器中创建的是浏览器对象2. 它底层是用Node.js中的http模块实现的3. 支持Promise4. 可以拦截请求和响应功能: loading加载效果、登录拦截5. 转换请求和响应数据6. 自动转换为JSON数据7. 客...原创 2021-09-06 15:38:10 · 327 阅读 · 0 评论 -
axios关于QS 序列化问题总结
qs 安装// 安装qs,执行如下指令cnpm install qs在Vue 项目文件中的main.js 文件,定义qs 序列化工具类的全局引用。核心代码如下:axios 表单请求,需要进行参数序列化针对post 表单请求,需要进行请求参数序列化 ,实例代码如下: getData(){ var params ={ 'pageNum': 1, 'pageSize': 10, }原创 2021-09-06 11:38:05 · 2167 阅读 · 1 评论 -
Vue 提示Invalid default value for prop “tableData“: Props with type Object/Array must use a factory
今天尝试封装分页+表格控件,定义prop 属性值提示如下错误信息:Invalid default value for prop "tableData": Props with type Object/Array must use a factory大致含义:(props default 数组/对象的默认值应当由一个工厂函数返回)错误代码:// 表格数据 tableData: { type: Array, default: [], required: fals.原创 2021-09-06 11:16:05 · 1532 阅读 · 0 评论 -
Vue + ElementUI集成pdf.js 文件,预览pdf 文件
步骤总结第一步:下载pdf.js资源在此下载:第二步: 解压打开Vue项目的config/index.js文件。查看资源目录是static文件夹。所以将解压后的文件夹放入项目的static目录下,如图:第三步:使用在新建的vue文件中,代码如下。<template> <div class="showPdf"> <iframe :src="pSrc" width="100%" height="100%"><...原创 2021-08-26 18:19:22 · 1349 阅读 · 0 评论 -
解决 Error: ENOENT: no such file or directory, scandir ‘..\node_modules\node-sass\vendor‘
问题描述:启动公司前端工程师的前端项目,提示如下错误信息:Module build failed: Error: ENOENT: no such file or directory, scandir '*********\node_modules\node-sass\vendor' @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader??ref--8-oneOf-1-1!./node_modul原创 2021-08-26 16:55:03 · 2105 阅读 · 0 评论 -
Vue 项目修改运行端口
打开 Vue项目之config\index.js 文件,找到如下截图配置:修该port 参数,重新启动Vue 项目,查看控制台输出项目访问地址。原创 2021-08-04 15:52:04 · 541 阅读 · 0 评论 -
Vue +ElementUI +Baidu地图 项目模板
Vue项目构建:Vue + Vue-Route +Vuex + Element-UI + Axios+百度地图 项目后台模板Vue项目创建:#创建一个基于webpack模板的新项目vue init webpack C:\node_workspace\sb-map# 切换至项目路径cd C:\node_workspace\sb-map# 安装项目依赖文件cnpm install# 项目启动cnpm run dev Vue 项目集成Vuex + Element-UI + Axios框原创 2021-08-04 15:45:26 · 701 阅读 · 0 评论 -
Vue + Element(文件上传控件)+ SpringBoot 文件上传功能
文件上传效果展示:文件上传效果预览文件上传删除Vue 前端核心代码 <el-form-item label="文件上传" > <el-upload drag multiple name="multipartfiles" ref="upload" :limit=1 :action="imageAction" :on-preview="handlePreview" :on-remove="handleRemo..原创 2021-07-28 19:49:41 · 830 阅读 · 1 评论 -
Vue 下载文件方式总结
第一种方式:使用 window.location.href限于使用get方式downloadRest(scope){ this.$axios({ method:'post', url:'/api/upload/file/preview', data:{"filePath":scope.row.filePath}, headers:{ 'Content-Type':'appl原创 2021-07-28 19:39:56 · 6059 阅读 · 0 评论 -
Vue v-if 动态控制el-button 显示
一般情况下前端在做表格是时候会有需要动态渲染按钮,下面是我实现动态渲染按钮案例实现根据后台返回值显示不同的按钮vue 代码片段: <template slot-scope="scope"> <el-button type="primary" size="mini" @click="toEdit(scope)">修改</el-button> <el-button type="danger" si..原创 2021-07-27 10:28:38 · 12896 阅读 · 0 评论 -
Vue 将el-form数据,转换为json post 提交Spring Boot后台
第一步:创建一个表单数据集(定时任务过滤参数实体)表单数据集(定时任务过滤参数实体)定义:el-form 绑定表单数据集(定时任务过滤参数实体)定义: <div> <el-col :span="24"> <el-form :inline="true" :model="queryParams" ref="queryParams"> <el-form-item label="定时任务类名"> .原创 2021-07-27 10:13:30 · 1964 阅读 · 0 评论 -
ElementUI 之el-form表单重置功能按钮
业务场景:使用el-form时,点击重置按钮或者取消按钮时会实现表单重置效果。重置功能按钮功能实现详细步骤:第一:首先给el-form添加ref属性。 <el-form :inline="true" :model="queryParams" ref="queryForm">第二:在点击重置按钮执行的方法中,执行如下功能代码片段 reset(){ # 重新设置请求参数实体属性 this.queryParams = {原创 2021-07-18 23:38:55 · 5774 阅读 · 7 评论 -
Vue 集成mock.js 并模拟新房信息
Vue 集成mock.js 的一般步骤:1、Vue 项目集成mockjscnpm i mockjs -S2、在src 文件夹下新增mock.js 文件,并且在main.js 引入mock.js 文件mock.js 文件内容://引入mockjsconst Mock = require('mockjs')// 获取 mock.Random 对象const Random = Mock.Random;console.log(111)//使用mockjs模拟数据Mock.moc原创 2021-03-26 18:36:55 · 189 阅读 · 0 评论 -
Vue 提示:./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_vue-loader@13.7.3@vue-loa
今天在做租房管理系统后台模板提示如下错误信息:These dependencies were not found:* @/components/part/nav-top.vue in ./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=script&index=0!./src/components/home.原创 2021-03-26 17:37:03 · 5436 阅读 · 0 评论 -
SpringBoot + Vue 用户登入token 之租房管理系统后台 模板
SpringBoot 项目构建:SpringBoot + MySQL8 + MyBatis-Plus + Redis +定时任务框架(elastic-job) + Spring Security + JWT(前后端分离Token)csdn 下载地址:Vue项目构建:Vue + Vue-Route +Vuex + Element-UI + Axios 项目管理后台模板Vue项目创建:#创建一个基于webpack模板的新项目vue init webpack C:\node_workspace原创 2021-03-26 17:19:03 · 932 阅读 · 0 评论 -
Vue +Vant 静态电商商城app(首页版)
项目创建:第一步:创建Vue 项目(rourou)vue init webpack rourou第二步:集成第三方组件(axios(请求框架)\mock(模拟框架)\)集成移动框架:vantvant 官网地址cnpm i vant -S集成HTTP请求框架:axioscnpm i axios -S集成模拟数据框架:mockcnpm i mock -S集成样式框架:stylus 和stylus-loaderstylus和stylus-loader 基..原创 2021-02-23 19:09:57 · 2414 阅读 · 0 评论 -
Vue 集成mock.js
mock.js官网地址:mockjs.com/mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url,mockjs可以拦截ajax请求,返回设定好的数据。使用方式这里主要讨论在vue项目中,使用axios发送ajax请求,mock.js模拟数据的流程。vue-cli搭建项目后,安装axios和mock.jsnpm install -S axiosnpm install -D mockjs复制代码在项目中新..转载 2021-02-23 18:31:33 · 1345 阅读 · 1 评论 -
Vue + Vant 图片懒加载 提示:Failed to resolve directive: lazy
vue + vant 使用图片懒加载提示:Failed to resolve directive: lazy报错代码: <img v-lazy="item.GoodImg" alt="">问题解决:main.js 引用Lazyload 懒加载框架import Vant from 'vant';import { Lazyload } from 'vant';import 'vant/lib/index.css';Vue.config.productionTip = .原创 2021-02-23 18:27:26 · 3916 阅读 · 1 评论 -
Vue +Vant 实现顶部搜索栏
搜索栏组件源码(SearchBar.vue)<template> <section class="city-search"> <van-icon class="search-icon" name="search" /> <input placeholder="在此输入检索关键字" v-model="KeyWord"> <van-icon class="clear-icon" name="clear" v-show="K原创 2021-02-23 16:23:48 · 3175 阅读 · 0 评论 -
Vue 集成 stylus和stylus-loader
stylus和stylus-loader安装cnpm i stylus -Scnpm i stylus-loader -Sstylus使用一、语法不再需要括号,相比之前语法简洁<style lang="stylus" scoped>.login width 100% height 100% text-align center background url('./../../images/bgc/bgc.jpg') background-repeat n原创 2021-02-23 15:56:51 · 856 阅读 · 0 评论 -
TypeError: this.getOptions is not a function (安装stylus)
vue 安装stylus 和stylus-loader 提示如下截图错误信息原因:stylus-loader安装的版本过高解决方案:1.cnpm uninstall stylus-loader2.cnpm i stylus-loader@3.0.2 -S原创 2021-02-23 15:51:17 · 4358 阅读 · 1 评论 -
elementui 之input 框总结
1.elementUI的input框,需要用v-model绑定一个变量,这个变量相当于原生input框的value2.placeholder属性和原生的一样 <!-- v-model相当于input里的value,必须绑定 --><el-input v-model="test" placeholder="请输入内容"></el-input>3.禁用el-input,绑定一个disabled属性即可<!-- 禁用el-input -->转载 2021-02-16 01:20:12 · 12413 阅读 · 0 评论 -
elementui 之el-table 实现批量删除功能
页面前端效果展示:模板定义(template) <el-row> <el-table :data="tableData" style="width: 100%;" ref="multipleTable" @selection-change="handleSelectionChange"> <el-table-column type="selection" label="序号">原创 2021-02-15 11:24:32 · 6624 阅读 · 0 评论 -
elementui 之富文本编辑器vue-quill-editor 清空html 标签
问题描述:富文本编辑器vue-quill-editor 点击内容提交,发现提交的内容都携带html 标签(<p>富文本编辑内容</p>)。目的:清空提交内容的html 标签解决思路: 定义一个方法:采用正则表达式的方式,将所有html 内容进行替换。method 定义: // 移除文本内容中的HTML 标签 delHtmlTag(str) { return str.replace(/<[^>]+>/g,"");原创 2021-02-15 02:44:51 · 5668 阅读 · 0 评论 -
elementui 集成富文本编辑器vue-quill-editor
第一步:安装vue-quill-editorcnpm install vue-quill-editor -S第二步:VUE项目集成vue-quill-editormain.js 文件 添加如下代码片段:import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubb原创 2021-02-15 02:39:02 · 1560 阅读 · 0 评论 -
elementui 之el-table-column 日期格式显示
如果想对表格某一列的内容进行日期格式化,可用 formatter 属性。属性绑定日期格式化的方法即可。前端代码之模板 <el-row> <el-table :data="tableData" style="width: 100%;"> <el-table-column prop="title" label="通知标题" > </el-ta原创 2021-02-15 02:31:10 · 11000 阅读 · 5 评论 -
elementui 之el-table通过v-if 控制按钮显示与隐藏
前端效果演示:后端代码: <el-row> <el-table :data="tableData" style="width: 100%;" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> <el-table-column prop="privilegeName" label="权限名原创 2021-02-12 00:15:48 · 11297 阅读 · 3 评论