vue
你说的誓言°变失言
这个作者很懒,什么都没留下…
展开
-
vue3与webpack5安装element-plus样式webpack编译报错?
【代码】vue3与webpack5安装element-plus样式webpack编译报错?原创 2023-04-06 10:09:57 · 324 阅读 · 1 评论 -
Element-UI中Tree组件获取过滤方法后的数据并且转换JSON数据(circular-json)
注意: 这里解释一下为什么要用CircularJSON这个插件,因为element tree这node数据存在一个对象里的子项存在循环引用,存在循环引用的对象。原创 2023-03-29 17:52:22 · 856 阅读 · 1 评论 -
Element-UI实现的下拉搜索树组件(el-select、el-input、el-tree组合使用)
【代码】Element-UI实现的下拉搜索树组件(el-select、el-input、el-tree组合使用)原创 2023-03-29 15:56:33 · 2896 阅读 · 0 评论 -
前端图片滑动验证(vue-monoplasty-slide-verify)
前端图片滑动验证原创 2023-01-28 15:31:02 · 1251 阅读 · 1 评论 -
vue项目引入svg图标
vue项目引入svg图标原创 2022-12-25 20:59:57 · 217 阅读 · 0 评论 -
Vue-插槽slot
Vue-插槽slot原创 2022-12-24 18:40:40 · 58 阅读 · 0 评论 -
vue中9种组件通信方式
vue中9种组件通信方式原创 2022-12-24 18:16:41 · 178 阅读 · 0 评论 -
Vue实现记住账号密码功能
Vue实现记住账号密码功能原创 2022-12-24 18:01:33 · 1923 阅读 · 0 评论 -
Vue编程式路由导航和路由守卫
Vue编程式路由导航和路由守卫。原创 2022-12-24 17:41:46 · 90 阅读 · 0 评论 -
vuex和event-bus有什么不同
vuex和event-bus有什么不同。原创 2022-12-23 13:08:55 · 601 阅读 · 0 评论 -
vue根据视频播放结束后显示登录页
一、效果如下二、代码入下<template> <div class="footer"> <!-- 背景视频 --> <video src="@/assets/begin.mp4" loop="loop" :autoplay="Data.autoplay" muted id="media" v-if="!Data.time"></video> <!-- 播放结束后显示得 --> &l原创 2022-04-25 17:12:06 · 586 阅读 · 0 评论 -
vue中无线滚动列表飞入效果(可视化大屏)
一、效果如下二、代码如下(因项目是vite与vue3.0、element-plus)<template> <ul class="IncidentMediateUl clearfix" v-infinite-scroll="infiniteScroll" :infinite-scroll-disabled="Data.disabled" style="overflow: auto"> <li v-for="(item, index) in Data原创 2022-04-25 16:18:37 · 1578 阅读 · 0 评论 -
使用HBuilderX将vue项目打包成App
使用HBuilderX将vue项目打包成App原创 2022-02-13 17:24:42 · 977 阅读 · 0 评论 -
framework-admin-vue3 管理系统快速开发模板
基于Vue3、ElementPlus框架、工程化工具Vite进行构建。此模板可用于现代化管理系统的初始开发模板,可节省一些重复性的工程初始化搭建工作。原创 2022-02-08 10:41:41 · 864 阅读 · 0 评论 -
echarts图形数据过多自动滚动(赋代码)
因项目使用echarts数据过多自己滚动效果如下:代码如下:<template> <div id="echarts" style="width: 500px; height: 400px"></div></template><script>import echarts from "echarts";export default { name: "", data() { return { }; },原创 2021-03-22 16:14:00 · 1953 阅读 · 2 评论 -
vue中echarts的tooltip自动轮播、封装文件与使用(附源码)
一、引入tools.js文件(其实就是echarts-auto-tooltip.js)因在vue中使用轮播与htnl文件使用echarts-auto-tooltip.js不共用,因此封装一个vue使用的自动轮播。使用方法:在当前组件入组<script> //在当前组件引入tools文件 import tools from 'tools'; mounted() { //执行方法 this.drawLine(); }, methods(原创 2021-02-26 15:32:24 · 2574 阅读 · 2 评论 -
vue解决跳转时新页面没有置顶
一.Vue页面跳转后当前位置不在顶部的解决办法(两种办法)1.在main.js中添加如下代码:// 跳转后返回顶部 router.afterEach((to,from,next) => { window.scrollTo(0,0); })//或者router.beforeEach((to, from, next) => { // chrome document.body.scrollTop = 0 // firefox docume原创 2021-01-15 17:09:39 · 933 阅读 · 0 评论 -
vue中Element-ui 表格 (Table)合并行、列单元格
一、前言注:因为个人公司项目需要处理table表格重复数据多个单元格显示。现已合并。效果如下:二、代码<template> <el-table :data="tableData" border :span-method="objectSpanMethod" style="width: 100%;text-align:center;border:1px solid #d9d9d9" :cell-st原创 2021-01-15 16:32:27 · 4333 阅读 · 0 评论 -
vue前后端通信进行对所有请求和响应都进行AES加密(密文形式)
一、前言注:前后端分离的开发方式,我们以接口为标准来进行推动,定义好接口,各自开发自己的功能,最后进行联调整合。无论是开发原生的APP还是webapp还是PC端的软件,只要是前后端分离的模式,就避免不了调用后端提供的接口来进行业务交互。网页或者app,只要抓下包就可以清楚的知道这个请求获取到的数据,这样的接口对爬虫工程师来说是一种福音,要抓你的数据简直轻而易举。近期因为政府项目要求被要求项目所有的交互与响应都变为密文。如下图实现效果。二、前端操作安装crypto-js。npm install原创 2021-01-15 14:56:19 · 1289 阅读 · 0 评论 -
vue中table表格内容过长——显示省略号悬浮显示内容
一、问题1:vue中table表格单列内容文本过长,导致回行过多,撑大table表格过于难看。如图:二、解决方法(三种)解决效果图如下:第一种:①在el-table上面增加代码tooltip-effect="dark"或者tooltip-effect=“light”<el-table :data="resultData" border tooltip-effect="dark" style="width:100%" :header-cell-style="原创 2021-01-06 10:56:59 · 17706 阅读 · 5 评论 -
vue项目中使用crypto-js AES加密解密(url地址参数变为密文)
一、安装crypto-jsnpm install crypto-js --save二、配置在src目录下得components里创建utils.js、代码如下:const CryptoJS = require('crypto-js'); //引用AES源码jsconst key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF"); //十六位十六进制数作为密钥const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234原创 2020-10-24 21:19:03 · 766 阅读 · 2 评论 -
vue项目中引用cdn资源与项目配置
一、CDN是什么CDN(内容分发网络)本身是指一种请求资源的方式。说白了就是在本地,通过script头去请求对应的脚本资源的一种方式。我在这里要说的就是直接引用 或者下载Vue.js放在本地,进行项目开发的方式。而不是通过npm包管理工具去下载vue包。二、配置下面,以引入element-ui、vue、vuex、vue-router、axios为例,说明处理流程。1. 在index.html中引入cdn资源. <link rel="stylesheet" href="https://cd原创 2020-10-22 14:42:54 · 2377 阅读 · 0 评论 -
vue项目常用依赖安装⑥——vuex
一、介绍Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。中文官方地址如下:vuex官网二、安装npm install vuex --save三、配置1. 在系统入口文件main.js中引入vuex,代码如下://引入vueximport store from './store/index' //引入状态管理创建得index文件import Vuex from 'vuex'Vue.use(Vuex)// 定义实例new Vue({ el: '#app', sto原创 2020-10-15 14:35:30 · 1116 阅读 · 0 评论 -
vue项目常用依赖安装⑤——qs
一、介绍qs具有一些附加安全性的querystring解析和字符串化库。二、安装npm install qs--save三、配置在根目录下的\src\main.js中引入://引入qsimport qs from 'qs'//再组件中通过this调用this.$qs.$如果不设置全局就正常调用qs;// Vue.prototype.$qs = qs;...原创 2020-10-15 11:59:36 · 2016 阅读 · 0 评论 -
vue项目常用依赖安装④——jquery
一、安装npm install jquery --save二、配置在项目根目录下的build/webpack.base.conf.js文件头部中:const webpack = require("webpack")如图:在项目根目录下的build/webpack.base.conf.js文件module上面添加:plugins: [ new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery"原创 2020-10-15 11:07:29 · 590 阅读 · 0 评论 -
vue项目常用依赖安装③——axios
一、介绍Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。简单来说就是前端最火最简单的一个http请求解决方案。官方地址如下:axios官网二、安装npm install axios --save三、配置在main.js文件中 引入 axios组件 :// 程序入口:环境依赖,插件import Vue from 'vue'// 引入根组件import App from './App'// 引入路由配置import router fro原创 2020-10-15 10:19:16 · 2652 阅读 · 0 评论 -
vue项目常用依赖安装②——element-ui
一、介绍Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,中文官方地址如下:Element-Ul官网二、安装npm install element-ui -S三、配置在main.js文件中 引入 element 组件 :// 程序入口:环境依赖,插件import Vue from 'vue'// 引入根组件import App from './App'// 引入路由配置import router from './router'// 关闭原创 2020-10-15 09:42:27 · 2602 阅读 · 0 评论 -
vue项目常用依赖安装①——vue-router
一、介绍vue-router是vue官方的路由解决方案,简单易用,中文官方地址如下:vue-router中文手册二、安装npm install vue-router --save三、配置用vue-cli构建项目之后,在src/router/index.js文件中,看到以下的路由核心文件:// 引入vue框架import Vue from 'vue'// 引入vue-router路由依赖import Router from 'vue-router'// 引入首页组件import i原创 2020-10-14 17:27:32 · 2534 阅读 · 0 评论 -
vue项目封装element-ui面包屑实现动态路由
效果如下:新建一个bread.vue组件在bread.vue组件代码如下:<template> <div class="bread"> <div class="example-container"> 当前位置: <el-breadcrumb separator=">"> <el-breadcrumb-item v-for="(item, index) in brea原创 2020-10-10 12:01:11 · 1099 阅读 · 0 评论 -
vue项目封装api接口(详解)
在前端vue的开发中,有一点是必须要做的,那就是将所有的API接口封装起来,因为从开发到最终上线的过程中,API是需要经常更换的,所以需要将API封装起来,便于修改和更换。在所有的API中,每一个API都会分成两个部分,比如:http://192.168.5.253/ZJJGManagerWebApi/api/EnterpriseInfo/GetEnterpriseInfo这是分成基本路径和最后的方法两部分的,一般情况下如果需要更换API的时候,只是更换前半部分,最后的方法是不会改变的。1.在src目录原创 2020-10-10 10:24:58 · 19026 阅读 · 2 评论 -
vue安装后的项目结构(详解)
一、总体框架一个vue-cli的项目结构如下,其中src文件夹是需要掌握,其余了解即可文件夹目录如下: 每个文件夹目录详细说明如下: 二、配置目录文件讲解build目录(webpack配置)build文件主要是webpack的配置,目录详情如下:config目录(vue项目配置目录)config文件主要是项目相关配置,常用的就是当端口冲突时配置监听端口,打包输出路径及命名等,目录详情如下:node_modules(项目依赖包)node_modules里面是项目依原创 2020-10-09 17:25:53 · 473 阅读 · 0 评论 -
vue-cli(vue脚手架)项目安装
一、安装node.jsnode.js官网:https://nodejs.org/zh-cn/从node.js官网下载并安装node,安装过程很简单,一直点下一步就ok了,安装完之后,我们通过打开命令行工具(win+R)输入cmd。然后输入node -v 命令,查看node的版本,若出现相应的版本号,则说明你安装成功了。安装完node.js之后,npm也会自动安装查询是否安装成功的命令:node -v 与 npm -v二、安装vuevue-cli官网:https://cli.vuejs.o原创 2020-10-09 15:58:23 · 331 阅读 · 1 评论 -
Vue移动端日期选择器(datepicker.js)
声明:因为帮忙用到移动端用到日期选择器,效果如图使用方法:第一步:在main.js中引入import datePicker from "../static/js/datePicker.js"Vue.use(datePicker)第二步:在.vue文件中使用<input id="demo" type="text" placeholder="选择出生日期" readonly>...原创 2020-04-28 16:22:35 · 5969 阅读 · 4 评论