前端互助会-CSDN博客

原创 Vue3.0中使用 highlight 实现代码高亮

Vue3.0中使用 highlight 实现代码高亮

2024-04-28 10:47:28 1524

原创数据标注工具：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 6705 41

原创 vue项目中使用XgPlay.js播放视频

Vue中使用XgPlay.js播放 flv视频

2024-01-22 14:11:19 2320 1

原创 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 2028

原创 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 3749

原创 vue3.0+vite+router搭建项目（二）:配置相关依赖

引入less && less-loader

2022-03-03 09:41:09 1622

原创 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 4499

原创 VueFastDev - 前端快速开发工具 (升级表格配置)

vue-fast-dev是一套基于element-ui、Echarts等二次开发封装、模块化的前端UI组件库。致力于快速高效的PC端开发(特别是中后台产品)提供一个快速且灵活的解决方案。

2022-02-15 16:46:34 9459

原创 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 9170

原创 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 12879 1

原创 Vue学习笔记：封装UI组件库

实例内容封装常见的功能组件（Button，Modal，Form相关），封装完成后封装成UI组件库发布到NPM上。实例目的掌握组件封装的语法和技巧学会造轮子，了解组件库实现原理搭建和积累自己的组件库学会组件库上传gitHub 学会组件库打包，上传npm----------------------------------------------------------------------------分割线--------------------------------------

2021-04-08 11:21:17 1051

转载如何做好前端项目组组长

俺自己弄自己写博客是为了记录自己的脚步，走成功就留下近道，方便其他兴趣者抄近道提升；走失败了就留下血迹(魂类游戏の特色)，方便其他人看看我是这么寄的。我曾经给自己规定，一个月最少留下一片技术性的或者经验性值的博客，方便自己自我总结。结果十月底后，咱忙得不可开交~~，都没时间水群~~，写博客的规划就一拖再拖，最后都十二月了，emmmm，不能再拖了。今天就写完。6号的今儿，加个班，努力写完吧。

2023-12-15 10:14:17 276

原创 Vue学习笔记：Vue.js 监听属性watch

Vue.js 监听属性watch

2021-12-29 09:48:00 571

原创 Vue学习笔记：vue-cli脚手架安装

vue-cli 是vue官方提供的一个脚手架工具，用于初始化一个Vue项目；

2021-12-18 10:26:36 367

原创 Vue学习笔记：使用bus.js 进行兄弟组件间的通信

使用bus.js 进行兄弟组件间的通信

2021-11-23 09:45:19 1394 1

原创 Vue学习笔记：封装Element-ui的upload组件实现图片和文件的上传

1、需求，封装封装Element-ui的upload组件实现图片和文件的上传vue+element能够满足大部分的前端UI开发，今天的我们就以

2021-10-17 00:55:07 828

原创 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 3307

原创 Vue学习笔记：大文件实现切割分片上传

相关资源：Vue学习笔记：获取文件唯一标识 md5值template<input multiple="multiple" type="file" ref="fileUpload" style="display: none" @change="getFileChunk()" />script//文件分片切割

2021-08-20 00:38:54 720

原创 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 2195

原创 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 816

原创 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 1938 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 1266

原创 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 1346

原创 Vue学习笔记: Vue + Element-ui搭建后台管理系统模板

Vue学习笔记: Vue + Element-ui搭建后台管理系统模板技术：Vue + Element-ui功能：后台管理系统基础模板，路由配置，加载页面jin

2021-06-04 10:34:30 3846

原创 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 2909 1

原创 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 3460 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 1434 1

原创 Vue学习笔记：Vue中封装自定义步骤条实现上下一步

Vue中封装自定义步骤条实现上下一步效果图：如上图：在VUE中实现效果，VUE+Element,ant都有封装好的UI,直接引用就好了；这里，觉得样式不符合UI设计，所以自定义封装了一个步骤条组件；设计原理：当点击下一步的，获取步骤的index, 通过绑定的class 给经过的步骤添加样式；:class="index <= stepsIndex ? 'on' : ''"定义步骤条的条数,数组定义在父组件，通过this.$parent 获取父组件的数组；步骤条组件

2021-03-08 23:55:57 5864 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 4273

原创 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 3073 14

原创 vue学习笔记：Vuex使用流程

关于VueXVueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。一、使用Vuex的目的实现多组件状态管理。多个组件之间需要数据共享时，Vuex是个很好的帮手哦二、Vuex 的五大核心

2021-02-26 15:16:45 8064

原创 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 2170

原创 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 1193 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 1287 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 1610

原创 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 848 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 544

原创 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 7070 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 483

原创 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 5269 3