随笔分类 - Vue
分享关于Vue2/3的一些技巧
摘要：目录1、前言2、解决 1、前言 使用Vue-Router时，会将一些字段信息附加到路由的Meta对象里面，比如图标icon，标题，权限等，如下： { path: '/billboard/board/:boardId', name: 'billboardBoard', props: true, com
阅读全文
摘要：最近在做一个文件夹管理的功能，要实现一个树状的拖拽文件夹面板。里面包含两种元素，文件夹以及文件
阅读全文
摘要：目录1、前言2、安装3、属性4、事件5、占位符样式修改6、案例 1、前言 vue-grid-layout是一个适用于vue的拖拽栅格布局库，功能齐全，适用于拖拽+高度/宽度自由调节的布局需求。本文将讲述一些常用参数和事件，以及做一个同步拖拽的Demo。效果动态图如下： 2、安装 vue2版本： np
阅读全文
摘要：目录1，前言2，升级vue-cli3，升级的部分变化 1，前言 本文主要分享vue-cli从4.x升级到5.x的过程，以及更新后vue.config.js的变化，因为vue-cli 5已经使用上webpack5。 2，升级vue-cli 首先打开命令提示符终端，输入npm uninstall @vu
阅读全文
摘要：1，前言 在vite/webpack搭建的项目中，不管是vue还是react，都可以写jsx/tsx，为了避免样式污染，常用的方式有两种。一种是每个组件都用一个唯一类名class包裹，使用less/scss嵌套样式。另一种是使用cssModule模块化。本文就分享一下如何使用cssModule，并推
阅读全文
摘要：1，前言 项目写完了准备上线，发现打包后的包很大怎么办？，但是打包后的文件晦涩难懂，如何了解打包文件的细节，到底是哪里占了体积，了解某一个文件是由哪些内容打包而成，从而针对性的优化项目体积。下面给大家介绍一种工具。 webpack-bundle-analyzer 2，安装 # NPM npm ins
阅读全文
摘要：(目录) 1，前言 <script setup>是在单文件组件中使用Composition API的编译时语法糖。相比于普通的<script>语法，它具有更多优势 更少的样板内容，更简洁的代码 能够使用纯 Typescript 声明 props 和抛出事件 更好的运行时性能 (其模板会被编译成与其同
阅读全文
摘要：1，项目配置 最近在做一个项目，项目配置版本如下： vue：3.2.6 vue-router：4.0.11 vuex：4.0.2 axios：0.21.4 element-plus：1.2.0-beta.6 typescript：4.1.5 sass：1.26.5 下面分享一下，如上配置的vue3项
阅读全文
摘要：1，前言 项目基于Vue2全家桶及网易云音乐 Node Api实现，网站风格简约清新，体验比较流畅。 下载地址：https://github.com/wp993080086/music-website 预览地址：music-website 2，已有功能 网易云APP扫码登录 & 网易云账号登录 注册
阅读全文
摘要：1，前言 源于一段话 Element Plus 团队正在将原有组件内的 Font Icon 向 SVG Icon 迁移，请多多留意更新日志, 及时获取到更新信息，Font Icon 将会在第一个正式发布被废弃，请尽快迁移 在此记录一下如何使用element-plus中的icon组件 环境： Vue：
阅读全文
摘要：1，前言 这些内容是博主在学习过程中记录下来的，有一些不重要的点就跳过了，需要时自行查询文档，4.0对比3.0，区别不大。 VueX4.0官网 2，State 语法有所调整 2.1，直接使用 import { onMounted } from 'vue' import { useStore } fr
阅读全文
摘要：1，前言 本文主要讲开发过程中需要常用的，有些api不常用，需要的时候可以自行查找文档。因为V3中没有了this，所以router4语法有所修改，模板中我们仍然可以访问$router和$route，所以不需要在setup中返回router或route Vue-Router4.0官网 1，Router
阅读全文
摘要：前言 这些内容是博主在学习过程中记录下来的，有一些不重要的点就跳过了，需要时自行查询文档。其实V2到V3的学习成本不高，熟悉V2的话，看完这篇文章就可以上手V3。 Vue3官网 在线源码编译地址 1，setup setup是所有Composition API的容器，值为一个函数。组件中所用到的数据、
阅读全文
摘要：1，前言 事情的起因是我的leader告诉我系统的合同上传出现问题了，文件上传失败，接口也没调用。我看了一下时间，17:15了，还有45分钟就要关机回家了，吓得我赶紧定位问题。 2，问题定位 公司的上传是用的emelent-ui的Upload二次封装，找到了组件源码(不是俺封装的)，看了一下逻辑，发
阅读全文
摘要：1，前言 最近这段时间在做一个新的模块，其中有一个三层的树结构，产品经理提出了一个很古怪的需求，整的我只能自己控制树的交互，写完之后，感觉对这个组件的用法有了不一样的了解，故而写下来。 2，需求 如果上级节点勾选了，则底下所有节点也勾选 如果是一个个勾选子级节点，直至勾选满所有子级，则该父级节点不能
阅读全文
摘要：1，前言 在Vue项目开发中，肯定会有这样一个场景：在不同的组件页面用到同样的方法，比如格式化时间，文件下载，对象深拷贝，返回数据类型，复制文本等等。这时候我们就需要把常用函数抽离出来，提供给全局使用。那如何才能定义一个工具函数类，让我们在全局环境中都可以使用呢？请看下文分解。 PS：本文vue为2
阅读全文
摘要：(目录) 最近在重温vue全家桶，再看一遍感觉记忆更深刻，所以专门记录一下（本文vue-router版本为v3.x）。 1，router-view <router-view>是一个功能性组件，用于渲染路径匹配到的视图组件。可以配合<transition>和<keep-alive>使用。如果两个一起用
阅读全文
摘要：(目录) 1，前言 最近在重温vue全家桶，再看一遍感觉记忆更深刻，所以专门记录一下（本文vuex版本为v3.x）。 2，Vuex 是什么 Vuex是专为Vue.js开发的状态管理模式。它采用集中式存储，管理所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化（我的理解就是全局变量）。
阅读全文
摘要：(目录) 1，前言 项目迭代过程中，碰上一个需求，table表格，其中一列计划开始时间一列计划结束时间，使用的是不同的日期选择器，开始时间会限制结束时间只能选相同日期以及之后的日期，反之结束时间也如此。项目用的是elementUi的Table组件，记录一下在Table中怎么写日期选择器DatePic
阅读全文
摘要：(目录) 1，前言 项目迭代过程中，碰上一个需求，要求用甘特图的方式显示项目的工期进度，开完会我赶紧搜索一下甘特图是啥东东，大概了解之后，做出了如下样式 Echarts版本4.5.0 vue版本2.x 2，布局和数据部分 HTML部分 <template> <div id="index"> <div
阅读全文
