- 博客(46)
- 资源 (4)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 数据标注工具：AiLabel.js实现标注 超详细教程 案例分享
背景：在前端开发过程中难免遇到针对图片的缩放平移；以及在图片上进行矢量数据、文本、标注的展示；如果你有上面的任何需求，恭喜你，找到组织了....在此背景下，AILabel.js出生了。前面文章我们已经介绍过AiLabel.js了；https://blog.csdn.net/u012967771/article/details/113148527npm下载地址：https://www.npmjs.com/package/ailabelgithub地址:https://github.com/d.
2024-01-31 22:40:47
3844
32
原创 vue3.0+vite+router搭建项目（四）:搭建后台管理系统
前言：前面的文章已经讲解了如何从0开始搭建个vue3+vite的项目，今天就为大家分享一下。如图：需求：（1）、构建系统主页面（2）、封装系统头部（3）、封装侧边菜单栏（4）、实现路由页面跳转一、建立相应目录结构，配置路由详细介绍几个文件1、package.json package.json文件是项目配置文件，除了项目的一些基本信息外，注意一下三点： （1）dependencies：项目发布时的依赖 （2）devDep
2022-03-10 09:15:00
1908
原创 vue3.0+vite+router搭建项目（三）:配置vite.config.js
前言：上一篇文章中，我们已经讲解了项目搭建的方法以及过程总出现bug的解决方法。这篇文章主要讲解一下配置。一、vite 配置别名使用编辑器打开搭建号的项目 进入配置文件 vite.config.js。 import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/export default defineConfig({
2022-03-09 16:19:47
3588
原创 vue3.0+vite+router搭建项目
第一步：安装vite（1）、去Node.js 官网安装node1、安装 Node.js >=12.0.0二、搭建vite项目（1）、安装全局vitenpm install -g create-vite-app第二步：创建项目创建基于vite的vue3项目，执行以下代码：create-vite-appcreate-vite-appvue3-vite-demo注意：此处可能会出现create-vite-app : 无法加载文件 C:\U...
2022-02-24 10:14:32
4308
原创 VueFastDev - 前端快速开发工具 (升级表格配置)
vue-fast-dev是一套基于element-ui、Echarts等二次开发封装、模块化的前端UI组件库。致力于快速高效的PC端开发(特别是中后台产品)提供一个快速且灵活的解决方案。
2022-02-15 16:46:34
9392
原创 VueFastDev - 前端快速开发工具 (更新树形选择器)
嗨，大家好！自从我们的VueFastDev - 前端快速开发工具 上线 以来，广受好评，虽还在持续开发阶段，也依旧有好多程序员选择了使用它。今天就为大家更新一个组件：树形选择器文档地址：http://web_help.gitee.io/vuefastdevdocs/#/fastForm/TreeSelecthttp://web_help.gitee.io/vuefastdevdocs/#/fastForm/TreeSelect以tree树形为基础，封装类似select选择器功能，实.
2022-01-26 16:58:16
9113
原创 VueFastDev - 前端快速开发工具
VueFastDev简介vue-fast-dev是一套基于element-ui、Echarts等二次开发封装、模块化的前端UI组件库。致力于快速高效的PC端开发(特别是中后台产品)提供一个快速且灵活的解决方案。VueFastDev 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。VueFastDev相关文档 NPM地址：https://www.npmjs.com/package/vuefastdev 开发文档：http://w...
2022-01-10 10:08:26
12662
1
转载 如何做好前端项目组组长
俺自己弄自己写博客是为了记录自己的脚步，走成功就留下近道，方便其他兴趣者抄近道提升；走失败了就留下血迹(魂类游戏の特色)，方便其他人看看我是这么寄的。我曾经给自己规定，一个月最少留下一片技术性的或者经验性值的博客，方便自己自我总结。结果十月底后，咱忙得不可开交~~，都没时间水群~~，写博客的规划就一拖再拖，最后都十二月了，emmmm，不能再拖了。今天就写完。6号的今儿，加个班，努力写完吧。
2023-12-15 10:14:17
140
原创 Vue学习笔记：封装Element-ui的upload组件实现图片和文件的上传
1、需求，封装封装Element-ui的upload组件实现图片和文件的上传vue+element能够满足大部分的前端UI开发，今天的我们就以
2021-10-17 00:55:07
795
原创 Vue学习笔记：vue-cropper实现封装截图组件
vue-cropper一款好用的前端截图插件 项目介绍：使用vue+elementUI写的项目，需要用到图片截图功能、视频截图、视频直播等功能，关于截图不失真，发现vue-cropper这款插件能满足需求，可以让用户自由调整截图框的宽高、位置，可以根据用户的需求选择截图的格式（png、jpg），也可以选择图片的编码格式（base64、blob）等。案例展示：http://zhb_nyx.gitee.io/cropperimg/#/cropperImg官方网站：https://gi..
2021-09-16 10:37:58
2807
原创 Vue学习笔记：大文件实现切割分片上传
相关资源：Vue学习笔记：获取文件唯一标识 md5值template<input multiple="multiple" type="file" ref="fileUpload" style="display: none" @change="getFileChunk()" />script//文件分片切割
2021-08-20 00:38:54
676
原创 Vue学习笔记：获取文件唯一标识 md5值
今天分享的技术是：获取文件唯一标识 md5值第一步：导入依赖npm install spark-md5 --save第二步：引用依赖import SparkMD5 from "spark-md5";第三步：上传文件 <input multiple="multiple" type="file" ref="fileUpload"
2021-08-19 00:14:56
2070
原创 Vue学习笔记：vue表单校验提交报错TypeError: Cannot read property ‘validate‘ of undefined
vue表单校验提交报错TypeError: Cannot read property 'validate' of undefined原因是@click="addUser(addForm.ruleForm)"中的 addForm.ruleForm 没有使用引号。正确写法：<el-button type="primary" @click="addUser(‘addForm.ruleForm’)">提交</el-button>...
2021-08-06 10:25:43
776
原创 Vue学习笔记：实现单页长时间不操作自动退出登录清除token,返回登录页
需求：实现单页长时间不操作自动退出登录清除token,返回登录页根据需求的思路是：每次操作页面时候存储当前时间，当前时间与存储时间比较，是否超过设定的时间，超过就退出登录，返回登录页第一步：在until文件夹中新建astrict.js//单页长时间不操作就会自动退出var lastTime = new Date().getTime()var currentTime = new Date().getTime()var timeOut = 1 * 60 *1000 //设置超时时间:..
2021-07-15 17:48:36
1834
2
原创 Vue学习笔记：Vue+Antd封装菜单
需求：使用 Vue + Antd 搭建后台管理系统，封装无限下拉循环菜单文档：Antd第一步：搭建Vue脚手架，这里不做过多叙述。第二步：导入 Antd 依赖npm install antd第三步：新建菜单组件SiderMenu.vue<template> <div style="width: 256px"> <a-menu :selectedKeys="selectedKeys" :openKeys.sync.
2021-07-15 10:21:51
1066
原创 Vue学习笔记：vue-seamless-scroll滚动插件的使用
一、安装npm install vue-seamless-scroll –save二、在main.ts中全局挂载import vueSeamlessScroll from 'vue-seamless-scroll'Vue.use(vueSeamlessScroll)三、在要使用该插件的子组件中引入import vueSeamlessScroll from "vue-seamless-scroll";@Component({ components: { vueSeam
2021-06-23 14:50:57
1238
原创 Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板技术：Vue + Element-ui功能：后台管理系统基础模板，路由配置，加载页面jin
2021-06-04 10:34:30
3722
原创 VuePress搭建文档博客 超详细教程
前言搭建文档，个人博客用什么比较用；当然是Vue全家桶之一的vuepress啦；这可是大神尤雨溪推出的一款模板；vuepress用于迅速搭建技术文档网站与个人博客，简单快捷，下面和我一起开始学习吧！一、成品展示1. 技术文档网站：vue全家桶官网：vue、vuex、vue-cli、vue-router以及vuepress本身2. 个人博客：组件zhb-ui 使用文档3. 官方文档VuePress二、开始搭建搭建之前建议大家先学习了解一下markdown语法，为之后
2021-04-23 15:30:33
2728
1
原创 Vue学习笔记：封装UI组件库
实例内容封装常见的功能组件（Button，Modal，Form相关），封装完成后封装成UI组件库发布到NPM上。实例目的掌握组件封装的语法和技巧 学会造轮子，了解组件库实现原理 搭建和积累自己的组件库 学会组件库上传gitHub 学会组件库打包，上传npm----------------------------------------------------------------------------分割线--------------------------------------
2021-04-08 11:21:17
969
原创 Vue学习笔记：将数组数据使用Excel表格导出
Vue学习笔记：将数组数据使用Excel表格导出需求：数组数据使用 Excel导出第一步：下载依赖命令行： npm i xlsx第二步：建立下载公共jssrc下建立文件夹utils后建立data2Excel.js第三步：将公共js导入页面import { dataConversionUtil } from '@/utils/data2Excel'第四步：数组数据组装Excel表格 表头loadExcel(){ var dat
2021-04-01 00:11:22
3255
9
原创 Vue学习笔记：Element时间控件设置某一个日期禁止选择
Vue学习笔记：Element时间控件添加一段时间禁止选择需求：时间控件，当天之前禁止选择，某一个日期的之前时间禁止选择文档：代码实现：在时间控件上添加:picker-options="pickerOptions"<el-date-picker v-model="addForm.ruleForm.approveEndTime" type="date" placeholder="年/月/日" format="yyyy/MM/dd HH:mm:ss" value-format.
2021-03-18 15:58:12
1364
1
原创 Vue学习笔记：Vue中封装自定义步骤条 实现上下一步
Vue中封装自定义步骤条 实现上下一步效果图：如上图：在VUE中实现效果，VUE+Element,ant都有封装好的UI,直接引用就好了；这里，觉得样式不符合UI设计，所以自定义封装了一个步骤条组件；设计原理：当点击下一步的，获取步骤的index, 通过绑定的class 给经过的步骤添加样式；:class="index <= stepsIndex ? 'on' : ''"定义步骤条的条数,数组定义在父组件，通过this.$parent 获取父组件的数组；步骤条组件
2021-03-08 23:55:57
5355
1
原创 Vue学习笔记：axios 拦截器的用法
Vue学习笔记：axios 拦截器的用法什么是axios 拦截器？拦截器就是拦截每一次的请求和响应，然后进行相应的处理。请求拦截器，它可以统一在你发送请求前在请求体里加上token；响应拦截器，是在接受到响应之后进行的一些操作，比如，服务器返回登录状态失效，需要重新登录的时候，就给它跳到登录页面；创建拦截器const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 ,//
2021-03-05 15:36:03
4224
原创 VUE 中渲染Echarts 动画 柱状图
VUE 中渲染Echarts 动画 柱状图效果图：安装Echarts依赖要在vue中使用Echarts 需要先安装依赖npm install echarts --save这是我的Echarts版本"echarts": "^4.0.4"第一步：在template减免 容器dom<template> <div class="min-body"> <div style="width:80vw;height: 80vh"
2021-03-03 00:18:07
2986
14
原创 vue学习笔记：Vuex使用流程
关于VueXVueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。一、使用Vuex的目的实现多组件状态管理。多个组件之间需要数据共享时，Vuex是个很好的帮手哦二、Vuex 的五大核心
2021-02-26 15:16:45
7904
原创 VUE 中封装公共js 全局化定义变量 调用公共方法
1.首先，在assets中建立公共js => config.js2.在config.js 中 封装全局定义变量 和 公共方法const dev = { dataType:[ {dataName:'图片',dataId:'1'}, {dataName:'视频',dataId:'2'}, {dataName:'语音',dataId:'3'}, {dataName:'文本',dataId:'4'}, ...
2021-02-24 14:43:22
2056
原创 VUE 中实现echarts江苏气泡图
VUE 中实现echarts江苏气泡图效果图：安装Echarts依赖要在vue中使用Echarts 需要先安装依赖npm install echarts --save这是我的Echarts版本(据了解低版本的echarts，默认并没有地图相关数据)"echarts": "^4.0.4"引入Echarts 以及 地图数据import echarts from 'echarts'import 'echarts/map/js/province/jiangsu'
2021-02-23 23:53:24
1082
1
原创 Vue 设置不同sass-loader版本 引入 SCSS 全局变量
首先创建一个全局变量文件global.scss//菜单栏背景色$menu-theme-color: red;编辑vue.config.jsmodule.exports = { // 设置全局样式调用 css: { loaderOptions: { sass: { // 根据自己样式文件的位置调整 data: `@import "@/styles/global.scss";`//V8- prependData: .
2021-02-23 09:57:14
1117
9
原创 VUE 中实现echarts中国地图 人口迁徙
VUE 中实现echarts中国地图 人口迁徙效果图：安装Echarts依赖要在vue中使用Echarts 需要先安装依赖npm install echarts --save这是我的Echarts版本(据了解低版本的echarts，默认并没有地图相关数据)"echarts": "^4.0.4"引入Echarts 以及 地图数据import echarts from 'echarts'import 'echarts/map/js/china' //引入中国地图
2021-02-19 23:16:27
1473
原创 Vue中封装一个localStorage工具类，如何引用？
示范：在vue框架中配置一个localStorage工具类，然后引用！首先，在src下建立一个文件夹utils，再在utils下建立一个js,tools.js;在tools.js中封装localStorage// 封装本地存储的方法var prototype={ $setStroage(key, value) { //对象必须序列化才能存入缓存 localStorage.setItem(key, JSON.stringify(value));
2021-01-25 15:58:51
786
2
转载 ECharts:数据可视化快速入门
官网地址：https://www.echartsjs.com/zh/index.html一、常见的数据可视化解决方案D3.js目前Web端评价最高的JavaScript可视化工具库（入门难）ECharts.js百度出品的一个开源JavaScript数据可视化库HighCharts.js国外的前端数据库可视化库，非商用免费，国外大公司使用较多AntV蚂蚁金服全新一代数据可视化解决方案二、主要介绍、关系与区别HighCharts与ECharts就像Office和WPS的关系...
2021-01-13 22:42:09
507
原创 Echarts渲染男女比例象形图
Echarts渲染男女比例象形图示例：源码：这里Echarts的demo应用场景为普通html,需引入echarts.js文件js: var loadEcharts13 = function () { var myChartss = echarts.init(document.getElementById('Echarts13')); var symbols = ['path://M694.7 248.2c-6.3-43.6-43.9-77.2-89
2021-01-11 11:00:07
6689
9
原创 【教程】html+css零基础入门教程（一）
什么是 HTML？HTML即超文本标记语言 (Hyper Text Markup Language)， 是用来描述网页的一种语言。超文本标记语言的结构包括"头"部分（外语：Head）、和"主体"部分（外语：Body），其中"头"部提供关于网页的信息，"主体"部分提供网页的具体内容。标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页如下代码：<html><body><h1>My First Heading</h1&
2020-12-24 00:12:01
462
原创 echarts 图表Y轴最小间隔值 改为 1
echarts 图表Y轴最小间隔值 改为 1数据可视化运用更加广泛，官方提供的组件也能支持大部分数据展示的需求；今天这里来介绍其中一个样式功能；更改Y轴最小间隔值为1；代码如下：在yAxis中添加 minInterval:1,yAxis: [ { type: 'value', minInterval:1, axisLine: { show: f...
2020-12-07 22:46:34
4727
3
原创 echarts 图表改变Y轴样式及背景样式
数据可视化中使用率最高的就是echarts.js;在官方文档中也很详细的将各个属性标注的很清楚。今天给大家分享一下echarts 图表改变Y轴样式及背景样式。原样式：修改后样式：立即奉上代码：js:::yAxis: [ { type: 'value', axisLine: {
2020-11-23 12:20:37
4059
前端培训PPT含测评题.zip
2021-12-08
Vue + Element-ui后台管理系统模板.zip
2021-06-04
Echarts数据可视化图表案例
2021-01-11
vue中封装 横向滚动的导航条 怎么封装？？
2022-01-18
TA创建的收藏夹 TA关注的收藏夹
TA关注的人