随笔分类 - Vue
摘要：作用 实现依赖的自动导入，不用再频繁导入依赖包，从而提交我们的开发效率。 例如可以避免在每个vue组件中都重复性的去声明ref、reactive等函数。配置之后，组件中需要用到ref、reactive等函数时就可以忽略不写下面语句。 import {ref,reactive} from 'vue'
阅读全文
摘要：下载依赖包 npm install unplugin-icons --save-dev npm install unplugin-vue-components --save-dev 如果图标集选择的ep（ElmentPlus），则还需要安装 @iconify-json/ep 包。 npm insta
阅读全文
摘要：安装依赖包 npm install @types/node --save-dev 配置 vite.config.ts 打开vite.config.ts 文件，添加如下配置： import { defineConfig } from 'vite' import vue from '@vitejs/pl
阅读全文
摘要：作用 自动注册svg图标，使svg图标在项目中能够被正确加载和使用。 使用教程 在vue3+vite+ts项目中使用。 安装依赖包 需要安装两个包，一个是vite-plugin-svg-icons，一个是fast-glob，fast-glob 是一个高性能的文件路径匹配库，它可以根据指定的 glob
阅读全文
摘要：后端（.net） 创建SignalR Hub 创建类SysNoticeHub.cs public class SysNoticeHub : Hub { } 模拟接口发送在线通知 [Route("api/sysnotice")] [ApiController] public class SysNoti
阅读全文
摘要：介绍 v-viewer 是一个基于 viewer.js 的 Vue 图像查看器组件，用于实现图片的预览、缩放、旋转等功能。 安装 npm install v-viewer@1.6.4 全局引入 在 main.js 文件中全局引入并注册 v-viewer 插件： import VueViewer fr
阅读全文
摘要：效果 实现代码 export default { data() { return { time:'' } }, created() { let _date = this.showTime(); this.time = _date; setInterval(()=>{ this.time = this
阅读全文
摘要：yarn概念 yarn是一个快速、可靠、安全的JavaScript包管理工具，用于管理项目的依赖关系。 yarn安装 1. 检查yarn是否已安装 打开命令提示符（CMD）并输入以下命令 yarn --version 若返回版本号，则表示已安装。 2. 安装yarn 使用npm命令进行全局安装。 n
阅读全文
摘要：编写toast.vue 在components文件夹下新增toast文件夹，并在toast文件夹中新增index.vue文件 ` <template> <div id="toast"> <span class="toast" @mouseleave="start" @mouseenter="stop
阅读全文
摘要：mavon-editor 安装命令 npm install mavon-editor@2.9.1 --save 全局配置 修改main.js文件，添加如下配置 import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/i
阅读全文
摘要：qs 是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串，或者反过来将一个查询字符串解析成一个object,帮助我们查询字符串解析和序列化字符串。 npm install qs npm install axios -S elementui ui组件库 npm i
阅读全文
摘要：文件结构 新建directive目录，并在该目录下新增permission目录，在permission目录下新增hasPerm.js和index.js。 文件内容 hasPerm.js //操作按钮权限控制 import store from "@/store"; export default {
阅读全文
摘要：Vue.prototype.xx 作用：挂载全局方法使用场景一：将自定义函数或方法进行全局挂载，方便全局使用。xx.js（公共方法或者api请求方法） export function getData(param1) { } main.js import { getData } from "@/xx/
阅读全文
摘要：<template> <div> <!-- 内容 --> <transition name="moveCartoon" appear> </transition> </div> </template> <script> export default { data() { return { } },
阅读全文
摘要：作用 实现不同组件之间进行通信（非父子关系）。 原理 $bus就是vue原型上添加的一个vue实例，用于存储、监听以及触发事件。 实现步骤 在main.js文件中注册事件总线 Vue.prototype.$bus = new Vue(); 在需要发送信息的组件中发送事件 this.$bus.$emi
阅读全文
摘要：Vue中常用的公共函数 独立文件 jsencrypt.js 作用：加密/解密 npm install jsencrypt import JSEncrypt from 'jsencrypt/bin/jsencrypt.min' // 密钥对生成 http://web.chacuo.net/netrsa
阅读全文
摘要：局部引入 优点：减小项目体积。 第一步：安装babel-plugin-component npm install babel-plugin-component -D 第二步：修改babel.config.js文件 module.exports = { presets: [ ["@babel/pres
阅读全文
摘要：watch:{ $route(to,from){ console.log(to.path); } } watch: { '$route':'getPath' }, methods: { getPath(){ console.log(this.$route.path); } } watch: { $r
阅读全文
摘要：mounted和created区别 created是模板渲染成html前调用（初始化页面之前），mounted是模板渲染成html后调用（初始化页面完成之后调用）； created无法进行DOM操作，mounted可以进行DOM操作。 created无法对chart进行初始化配置，mounted可以
阅读全文
摘要：如上图所示，需求是给网页设置背景图，但实际效果是图片无法显示，已经确认地址是没问题的，网上教程有些是让在路径作为参数包裹在require方法里面，但还是未起作用。 折腾许久之后，发现了解决办法，只需要给div设置高度即可 <style> .background { height: 120vh; }
阅读全文
浙公网安备 33010602011771号