07 2024 档案
摘要：
假如你的自定义组件是这样： <template> <div><slot></slot></div> </template> <script> export default { name: "tButton", }; </script> 那么怎么判断你在使用时，比如<t-button></t-butt
阅读全文
假如你的自定义组件是这样： <template> <div><slot></slot></div> </template> <script> export default { name: "tButton", }; </script> 那么怎么判断你在使用时，比如<t-button></t-butt
阅读全文
摘要：
我写了一个input组件（vue3） <template> <div> <input class="inp" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </div> </templa
阅读全文
我写了一个input组件（vue3） <template> <div> <input class="inp" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </div> </templa
阅读全文
摘要：
不生效样式： // template <div :style="tSwitchItemCss"></div> // script const tSwitchItemCss = computed(() => ({ 'transform: ': `${openValue.value ? 'transla
阅读全文
不生效样式： // template <div :style="tSwitchItemCss"></div> // script const tSwitchItemCss = computed(() => ({ 'transform: ': `${openValue.value ? 'transla
阅读全文
摘要：
安装less和加载器 npm install less npm install less-loader 配置vue.config.js css: { preprocessorOptions: { less: { charset: false, additionalData: "@import './
阅读全文
安装less和加载器 npm install less npm install less-loader 配置vue.config.js css: { preprocessorOptions: { less: { charset: false, additionalData: "@import './
阅读全文
摘要：
效果：点击切换按钮，背景色由白色变成黑色，从指定的地方开始过渡 点击按钮： <div ref="themeBtn" @click="changeTheme">点击切换</div> 切换逻辑： // 主题切换按钮 const themeBtn = ref(null); /* 改变颜色 */ const
阅读全文
效果：点击切换按钮，背景色由白色变成黑色，从指定的地方开始过渡 点击按钮： <div ref="themeBtn" @click="changeTheme">点击切换</div> 切换逻辑： // 主题切换按钮 const themeBtn = ref(null); /* 改变颜色 */ const
阅读全文
摘要：
如果你期望鼠标移动到某元素，某元素会上移一段距离，你也许会这么写 .box { position: relative; transition: all 3s; } .box:hover { top: -20px; } 结果上移是上移了，但是过渡效果transition没生效 原因：需要给transi
阅读全文
如果你期望鼠标移动到某元素，某元素会上移一段距离，你也许会这么写 .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，就能显示高亮样式了
阅读全文
如果控制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"
阅读全文
<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
阅读全文
宏就是一些命令组织在一起，作为一个单独命令完成一个特定任务。—— 百度百科 vue3的宏用于指导vue在浏览器的工作，好比人类的DNA，它是独立的一种代码，用于编译成浏览器所能识别的代码，然后vue3在运行时才能使用诸如setup，defineComponent等vue3专用的api。 注意：宏是v
阅读全文
摘要：
我在打包时发现终端抛出了一个错误：'xxx' is declared but its value is never read. ps：项目是用vite搭建的vue3+ts项目 原因：ts检测到你声明了一个变量，但是从未使用，就会报错。 解决方案：注释掉该变量或者使用该变量，亦或者使用忽略检查代码，让
阅读全文
我在打包时发现终端抛出了一个错误：'xxx' is declared but its value is never read. ps：项目是用vite搭建的vue3+ts项目 原因：ts检测到你声明了一个变量，但是从未使用，就会报错。 解决方案：注释掉该变量或者使用该变量，亦或者使用忽略检查代码，让
阅读全文
摘要：
问题就是我给code标签传递一段源代码，该代码明明没有空格，但实际渲染却多了一串空格？如下图所示： 原因：code标签包裹的内容会原原本本的渲染出来，包括空格。 我查看了我的代码： 我是这么写的： <code> {{ sourceCode }} </code> {{ sourceCode }}前面有
阅读全文
问题就是我给code标签传递一段源代码，该代码明明没有空格，但实际渲染却多了一串空格？如下图所示： 原因：code标签包裹的内容会原原本本的渲染出来，包括空格。 我查看了我的代码： 我是这么写的： <code> {{ sourceCode }} </code> {{ sourceCode }}前面有
阅读全文
摘要：
.scrollable-area { /* 设置溢出行为，使滚动条出现 */ overflow-y: scroll; /* 针对Webkit内核的浏览器 */ &::-webkit-scrollbar { /* 设置滚动条的宽度 */ width: 8px; } /* 滚动条轨道 - 背景颜色/白底
阅读全文
.scrollable-area { /* 设置溢出行为，使滚动条出现 */ overflow-y: scroll; /* 针对Webkit内核的浏览器 */ &::-webkit-scrollbar { /* 设置滚动条的宽度 */ width: 8px; } /* 滚动条轨道 - 背景颜色/白底
阅读全文
摘要：
要配置路由守卫要使用到vue-router，它是 Vue.js 官方的路由管理器，主要用于帮助开发者构建单页面应用（Single Page Application，简称 SPA）。 步骤一：新建路由文件，文件名随意，建议叫router.ts，规范一点 // router.ts import { cr
阅读全文
要配置路由守卫要使用到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
阅读全文
前言：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文件
阅读全文
步骤一：打开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
阅读全文
前言：请确保你已安装了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 "../". 奇怪，之前还好好
阅读全文
我这会打算打个包扔到线上看看效果，结果线上报错： TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../". 奇怪，之前还好好
阅读全文
摘要：
在前端项目中，assets文件夹和public文件夹都扮演着存储静态资源的重要角色，但它们之间存在一些关键的区别。以下是对这两个文件夹区别的详细分析： assets文件夹 内容与用途： assets文件夹通常用于存放项目中可能会变动的静态资源，如图片、样式表（CSS文件）、JavaScript脚本、
阅读全文
在前端项目中，assets文件夹和public文件夹都扮演着存储静态资源的重要角色，但它们之间存在一些关键的区别。以下是对这两个文件夹区别的详细分析： assets文件夹 内容与用途： assets文件夹通常用于存放项目中可能会变动的静态资源，如图片、样式表（CSS文件）、JavaScript脚本、
阅读全文
摘要：
你最近是否发现新版chrome的字体长得又小又挤？那么怎么设置我们想要的外观字体呢？ 点击==>chrome右上角三个点==>再点击设置 找到外观==>自定义字体 把所有字体设置为，比如微软雅黑，然后字号页调整一下，立马生效！
阅读全文
你最近是否发现新版chrome的字体长得又小又挤？那么怎么设置我们想要的外观字体呢？ 点击==>chrome右上角三个点==>再点击设置 找到外观==>自定义字体 把所有字体设置为，比如微软雅黑，然后字号页调整一下，立马生效！
阅读全文
摘要：
常见ui库会有个代码预览，这是怎么做到的？就是通过导入一个vue文件的源代码，用pre和code包裹着显示的，比如： <template> <div> <transition name="slide-fade"> <pre v-highlight> <code class="language-js"
阅读全文
常见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
阅读全文
我使用了.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
阅读全文
我在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
阅读全文
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：渲染一个真实的
阅读全文
1. Transition 和 TransitionGroup 用途：用于为单个元素或组件提供过渡效果。TransitionGroup则用于列表中的多个元素或组件的过渡效果。 特点： Transition：只影响单个元素或组件，不会额外渲染DOM元素。 TransitionGroup：渲染一个真实的
阅读全文
摘要：
我要把某一.md作为访问路径的入口文件，结果编译器爆红了 原因：编译器不识别.md文件。 解决方案：安装2个插件：@vitejs/plugin-vue和vite-plugin-md，前者大家应该都有，后者是专为markdown语法文件下的一个包， 装完后，需要在vite.config.ts文件里引入
阅读全文
我要把某一.md作为访问路径的入口文件，结果编译器爆红了 原因：编译器不识别.md文件。 解决方案：安装2个插件：@vitejs/plugin-vue和vite-plugin-md，前者大家应该都有，后者是专为markdown语法文件下的一个包， 装完后，需要在vite.config.ts文件里引入
阅读全文
摘要：
新建一个页面，引入该页面路径，想用@符号代替../之类的操作时 // index.ts export default [ { path: '/', name: 'home', component: () => import("@/views/home.vue") } ] 报错：Cannot find
阅读全文
新建一个页面，引入该页面路径，想用@符号代替../之类的操作时 // index.ts export default [ { path: '/', name: 'home', component: () => import("@/views/home.vue") } ] 报错：Cannot find
阅读全文
摘要：
哎，嗯。。。emmm。。。 好，问题就是这样的，最近写了vue组件打算上到npm，然后上是上了，但是样式却没有生效？？ 左上角是组件样式本地调试的截图，可以看到是生效的，右上角的截图是我在别的项目引用了我写的这个库，结果样式却没有生效。 我打包后的文件列表如下： 注意：style.css包含了所有的
阅读全文
哎，嗯。。。emmm。。。 好，问题就是这样的，最近写了vue组件打算上到npm，然后上是上了，但是样式却没有生效？？ 左上角是组件样式本地调试的截图，可以看到是生效的，右上角的截图是我在别的项目引用了我写的这个库，结果样式却没有生效。 我打包后的文件列表如下： 注意：style.css包含了所有的
阅读全文
摘要：
vite+vue+某框架写的网站可以通过配置vite.config.js中的build.rollupOptions.output.manualChunks来手动分割指定的包到指定的文件夹内，然后在网站入口文件按照需求引入 比如： build: { rollupOptions: { output: {
阅读全文
vite+vue+某框架写的网站可以通过配置vite.config.js中的build.rollupOptions.output.manualChunks来手动分割指定的包到指定的文件夹内，然后在网站入口文件按照需求引入 比如： build: { rollupOptions: { output: {
阅读全文
摘要：
rt。
阅读全文
rt。
阅读全文
摘要：![2024-07-15 npm ERR! 403 403 Forbidden - PUT https://registry.npmmirror.com/-/user/org.couchdb.user:iuniko - [FORBIDDEN] Public registration is not allowed ==> 切换npm镜像源](https://img2024.cnblogs.com/blog/2823037/202407/2823037-20240715005658631-348131829.png)
今天晚上我打算推一个包到npm时，遇到了如下报错： npm ERR! 403 403 Forbidden - PUT https://registry.npmmirror.com/-/user/org.couchdb.user:xxx - [FORBIDDEN] Public registratio
阅读全文
今天晚上我打算推一个包到npm时，遇到了如下报错： npm ERR! 403 403 Forbidden - PUT https://registry.npmmirror.com/-/user/org.couchdb.user:xxx - [FORBIDDEN] Public registratio
阅读全文
摘要：
是的，拉一下可以获取最新分支。
阅读全文
是的，拉一下可以获取最新分支。
阅读全文
摘要：
我在写一个ui组件库，在打包时发现dist文件夹里没有生成我想要的xx.es.js文件，我查看了我的vue项目中的vue.config.js文件，发现build.lib没有指定输出的文件名 解决方案：配置项目中的vue.config.js文件，参考我的👇 vue.config.js import
阅读全文
我在写一个ui组件库，在打包时发现dist文件夹里没有生成我想要的xx.es.js文件，我查看了我的vue项目中的vue.config.js文件，发现build.lib没有指定输出的文件名 解决方案：配置项目中的vue.config.js文件，参考我的👇 vue.config.js import
阅读全文
摘要：
报错1：This package has been marked as private npm ERR! 你的包被设为私有模式了。 npm ERR! code EPRIVATE npm ERR! This package has been marked as private npm ERR! Rem
阅读全文
报错1：This package has been marked as private npm ERR! 你的包被设为私有模式了。 npm ERR! code EPRIVATE npm ERR! This package has been marked as private npm ERR! Rem
阅读全文
摘要：
金蝶云，做erp的，最近工作中需要用到这个软件来进行页面开发，便想着做下学习记录。呃，由于公司电脑安装的金蝶云开发软件属于机密，所以就不提供了，不过学习的网址倒是可以贴一下，然后再记录一些问题什么的。 金蝶云开发者社区：https://vip.kingdee.com/?productId=1&pro
阅读全文
金蝶云，做erp的，最近工作中需要用到这个软件来进行页面开发，便想着做下学习记录。呃，由于公司电脑安装的金蝶云开发软件属于机密，所以就不提供了，不过学习的网址倒是可以贴一下，然后再记录一些问题什么的。 金蝶云开发者社区：https://vip.kingdee.com/?productId=1&pro
阅读全文
摘要：
windows：进入dutedisplay官网https://www.duetdisplay.com/zh#download，下载并安装 ipad：在苹果应用商店搜索dutedisplay，选中并下载 注意：你需要注册一个dutedisplay账号，才能登录该软件，它是付费的，so，我看到付费我就放
阅读全文
windows：进入dutedisplay官网https://www.duetdisplay.com/zh#download，下载并安装 ipad：在苹果应用商店搜索dutedisplay，选中并下载 注意：你需要注册一个dutedisplay账号，才能登录该软件，它是付费的，so，我看到付费我就放
阅读全文
