![](https://img-blog.csdnimg.cn/8c875a37bf1748ad9151786e6d1d5cf5.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue学习笔记
文章平均质量分 55
Vue学习笔记,记录学习,工作的难点,重点!以及个人感悟!!!
前端互助会
微信公众号同名:前端互助会;这里有一群热爱学习又有进取心的小伙伴们!相信你也是爱学习的人,,从今天开始让我们一起学习,共同进步把。
希望你能在我这里学到所有的东西,惊艳到所有人。祝大家工作顺利,身体健康,学习愉快!
V:web_help
展开
-
Vue3.0中使用 highlight 实现代码高亮
Vue3.0中使用 highlight 实现代码高亮原创 2024-04-28 10:47:28 · 616 阅读 · 0 评论 -
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 · 1961 阅读 · 0 评论 -
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 · 3685 阅读 · 0 评论 -
vue3.0+vite+router搭建项目(二):配置相关依赖
引入less && less-loader原创 2022-03-03 09:41:09 · 1576 阅读 · 0 评论 -
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 · 4365 阅读 · 0 评论 -
VueFastDev - 前端快速开发工具 (升级表格配置)
vue-fast-dev是一套基于element-ui、Echarts等二次开发封装、模块化的前端UI组件库。致力于快速高效的PC端开发(特别是中后台产品)提供一个快速且灵活的解决方案。原创 2022-02-15 16:46:34 · 9417 阅读 · 0 评论 -
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 · 9135 阅读 · 0 评论 -
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 · 12816 阅读 · 1 评论 -
Vue学习笔记:Vue.js 监听属性watch
Vue.js 监听属性watch原创 2021-12-29 09:48:00 · 541 阅读 · 0 评论 -
Vue学习笔记:vue-cli脚手架安装
vue-cli 是vue官方提供的一个脚手架工具,用于初始化一个Vue项目;原创 2021-12-18 10:26:36 · 327 阅读 · 0 评论 -
Vue学习笔记:使用bus.js 进行兄弟组件间的通信
使用bus.js 进行兄弟组件间的通信原创 2021-11-23 09:45:19 · 1356 阅读 · 1 评论 -
Vue学习笔记:封装Element-ui的upload组件实现图片和文件的上传
1、需求,封装封装Element-ui的upload组件实现图片和文件的上传vue+element能够满足大部分的前端UI开发,今天的我们就以原创 2021-10-17 00:55:07 · 803 阅读 · 0 评论 -
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 · 2989 阅读 · 0 评论 -
Vue学习笔记:大文件实现切割分片上传
相关资源:Vue学习笔记:获取文件唯一标识 md5值template<input multiple="multiple" type="file" ref="fileUpload" style="display: none" @change="getFileChunk()" />script//文件分片切割原创 2021-08-20 00:38:54 · 690 阅读 · 0 评论 -
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 · 2122 阅读 · 0 评论 -
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 · 780 阅读 · 0 评论 -
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 · 1881 阅读 · 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 · 1170 阅读 · 0 评论 -
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 · 1278 阅读 · 0 评论 -
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板技术:Vue + Element-ui功能:后台管理系统基础模板,路由配置,加载页面jin原创 2021-06-04 10:34:30 · 3794 阅读 · 0 评论 -
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 · 2819 阅读 · 1 评论 -
Vue学习笔记:封装UI组件库
实例内容封装常见的功能组件(Button,Modal,Form相关),封装完成后封装成UI组件库发布到NPM上。实例目的掌握组件封装的语法和技巧 学会造轮子,了解组件库实现原理 搭建和积累自己的组件库 学会组件库上传gitHub 学会组件库打包,上传npm----------------------------------------------------------------------------分割线--------------------------------------原创 2021-04-08 11:21:17 · 997 阅读 · 0 评论 -
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 · 3331 阅读 · 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 · 1373 阅读 · 1 评论 -
Vue学习笔记:Vue中封装自定义步骤条 实现上下一步
Vue中封装自定义步骤条 实现上下一步效果图:如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了;这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条组件;设计原理:当点击下一步的,获取步骤的index, 通过绑定的class 给经过的步骤添加样式;:class="index <= stepsIndex ? 'on' : ''"定义步骤条的条数,数组定义在父组件,通过this.$parent 获取父组件的数组;步骤条组件原创 2021-03-08 23:55:57 · 5570 阅读 · 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 · 4242 阅读 · 0 评论 -
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 · 3018 阅读 · 14 评论 -
vue学习笔记:Vuex使用流程
关于VueXVueX是适用于在Vue项目开发时使用的状态管理工具。试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此,Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。一、使用Vuex的目的实现多组件状态管理。多个组件之间需要数据共享时,Vuex是个很好的帮手哦二、Vuex 的五大核心原创 2021-02-26 15:16:45 · 7972 阅读 · 0 评论 -
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 · 2109 阅读 · 0 评论 -
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 · 1173 阅读 · 9 评论 -
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 · 801 阅读 · 2 评论 -
el-select的change事件
官网提供了el-select的change事件,但是并没有提供使用示例,但是最近在vue项目中却要使用到。直接上代码,HTML部分data() { return { devType: '', devTypes: [] }}, methods: { selectChanged(value) { console.log(value) }}js部分data() { return { devType: '', dev..转载 2020-11-23 10:20:07 · 4614 阅读 · 0 评论