效果：点击切换按钮，背景色由白色变成黑色，从指定的地方开始过渡 点击按钮： <div ref="themeBtn" @click="changeTheme">点击切换</div> 切换逻辑： // 主题切换按钮 const themeBtn = ref(null); /* 改变颜色 */ const 阅读全文
如果你期望鼠标移动到某元素，某元素会上移一段距离，你也许会这么写 .box { position: relative; transition: all 3s; } .box:hover { top: -20px; } 结果上移是上移了，但是过渡效果transition没生效 原因：需要给transi 阅读全文
如果控制pre code是通过v-show来显示 <pre v-show="isShow" v-highlight><code>{{ code }}</code></pre> 那么highlight.js的高亮样式可能不会生效 神奇的是，改为v-if，就能显示高亮样式了 阅读全文
<template> <div class="demo-container"> <div class="demo-item"> <div class="demo-title">方向指示类图标</div> <div class="demo-content"> <div class="demo-box" 阅读全文
宏就是一些命令组织在一起，作为一个单独命令完成一个特定任务。—— 百度百科 vue3的宏用于指导vue在浏览器的工作，好比人类的DNA，它是独立的一种代码，用于编译成浏览器所能识别的代码，然后vue3在运行时才能使用诸如setup，defineComponent等vue3专用的api。 注意：宏是v 阅读全文
我在打包时发现终端抛出了一个错误：'xxx' is declared but its value is never read. ps：项目是用vite搭建的vue3+ts项目 原因：ts检测到你声明了一个变量，但是从未使用，就会报错。 解决方案：注释掉该变量或者使用该变量，亦或者使用忽略检查代码，让 阅读全文
问题就是我给code标签传递一段源代码，该代码明明没有空格，但实际渲染却多了一串空格？如下图所示： 原因：code标签包裹的内容会原原本本的渲染出来，包括空格。 我查看了我的代码： 我是这么写的： <code> {{ sourceCode }} </code> {{ sourceCode }}前面有 阅读全文
.scrollable-area { /* 设置溢出行为，使滚动条出现 */ overflow-y: scroll; /* 针对Webkit内核的浏览器 */ &::-webkit-scrollbar { /* 设置滚动条的宽度 */ width: 8px; } /* 滚动条轨道 - 背景颜色/白底 阅读全文
要配置路由守卫要使用到vue-router，它是 Vue.js 官方的路由管理器，主要用于帮助开发者构建单页面应用（Single Page Application，简称 SPA）。 步骤一：新建路由文件，文件名随意，建议叫router.ts，规范一点 // router.ts import { cr 阅读全文
前言：vite+vue项目 rollup-plugin-visualizer：一个用于 Rollup 构建系统的插件，它能够生成可视化的报告，展示你的项目构建后的模块依赖关系和文件大小。 仓库：https://github.com/btd/rollup-plugin-visualizer 安装： y 阅读全文
步骤一：打开vscode，按住ctrl+shif+p唤出命令窗口 步骤二：在窗口中输入命令，并回车 Preferences: Open User Snippets 对，就是这个代码片段，接着输入你想添加代码的某某语言or脚本，比如我要添加vue的代码片段 输入vue，回车，会显示vue.json文件 阅读全文
前言：请确保你已安装了node，没有你得先装这个。 步骤一： // 创建文件夹 mkdir express-node // 创建完了进入该文件夹 cd express-node // 初始化 npm init -y // 安装express npm i express 前提工作都准备好后，在expr 阅读全文
我这会打算打个包扔到线上看看效果，结果线上报错： TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../". 奇怪，之前还好好 阅读全文
在前端项目中，assets文件夹和public文件夹都扮演着存储静态资源的重要角色，但它们之间存在一些关键的区别。以下是对这两个文件夹区别的详细分析： assets文件夹 内容与用途： assets文件夹通常用于存放项目中可能会变动的静态资源，如图片、样式表（CSS文件）、JavaScript脚本、 阅读全文
你最近是否发现新版chrome的字体长得又小又挤？那么怎么设置我们想要的外观字体呢？ 点击==>chrome右上角三个点==>再点击设置 找到外观==>自定义字体 把所有字体设置为，比如微软雅黑，然后字号页调整一下，立马生效！ 阅读全文
常见ui库会有个代码预览，这是怎么做到的？就是通过导入一个vue文件的源代码，用pre和code包裹着显示的，比如： <template> <div> <transition name="slide-fade"> <pre v-highlight> <code class="language-js" 阅读全文
我使用了.md文件作为路由文件来引用，在开发中能正常显示，打包的时候就报错了 // vite.config.ts import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import markdown fr 阅读全文
我在xx.md文件里引入了多个vue文件，如下： <script setup> import demo1 from "./demo1.vue"; import demo2 from "./demo2.vue"; import preview from "@/components/preview.vu 阅读全文
highlight.js —— 一个开源语法高亮库，用于在网页上对源代码进行语法高亮显示。 安装 npm i highlight.js yarn add highlight.js 引入 // main.js import { createApp } from 'vue'; import App fr 阅读全文
1. Transition 和 TransitionGroup 用途：用于为单个元素或组件提供过渡效果。TransitionGroup则用于列表中的多个元素或组件的过渡效果。 特点： Transition：只影响单个元素或组件，不会额外渲染DOM元素。 TransitionGroup：渲染一个真实的 阅读全文
