技术探索
未读
npm发布准备工作下载nrm
详情见文章
打开npm官网 npm | Home
我们需要先注册一个账号
主流程转换npm源
1nrm use npm
连接npm账号
1npm login
确认账号登录状态
1npm whoami
cd到你需要发布的包/构建产物
比如说我的组件库项目产物位于packages\core
1cd .\packages\core\
至此，先确认我们即将发布的包
packages\core\package.json
123456{ "name": "veyra", "version": "1.0.0", "description": "使用 Vue3 + Ts 构建的组件库", ...}
名称
不能和他人已发布过的包名重名
版本
如果是初次发布 “version”: “1.0.0” 即可
若是自己已发布过的包要更新版本 (如”1.0.1”)
详情请看到文章最后“关于版本号”
在确认 ...
组件库
未读
项目结构1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012 ...
组件库
未读
Tooltip 文字组件
导出的类型1. TooltipProps
描述: Tooltip 组件的 props 配置。
字段:
content?: string提示框显示的内容文本。
trigger?: 'hover' | 'click' | 'contextmenu'触发方式（默认 'hover'）。
placement?: PlacementPopper.js 的定位策略（如 'bottom'）。
manual?: boolean是否手动控制显示（默认 false）。
disabled?: boolean是否禁用组件（默认 false）。
popperOptions?: Partial<Options>Popper.js 的配置选项。
transition?: string过渡动画名称（默认 'fade'）。
showTimeout?: number显示延迟（默认 0）。
hideTimeout?: number隐藏延迟（默认 200）。
2. TooltipEmi ...
组件库
未读MessageBox 对话框组件
MessageBox.vuescript1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283<script setup lang="ts">import { ref, reactive, computed, watch, nextTick, type Ref } from 'vue';import { isFunction, isNil } from 'lodash-es';import type { MessageBoxProps, MessageBoxAction } from './types';import VrOverlay from ...
组件库
未读Message 消息提示组件
Message.vuescript1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071<script setup lang="ts">import type { MessageProps } from './types';import { computed, onMounted, ref, watch } from 'vue';import { useOffset } from './methods';import { typeIconMap } from '@veyra/utils';import VrIcon from '../Icon/Ico ...
组件库
未读Dropdown 下拉菜单
Dropdown.vue
Script 部分123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<script setup lang="ts">import { ref, computed, provide } from 'vue'import { omit, isNil } from 'lodash-es'import type { DropdownProps, DropdownEmits, DropdownContext } from './types'import { useId, useDisabledStyle } from '@veyra/hooks'import { DROPDOWN_CTX_KEY } from & ...
组件库
未读Collapse 折叠面板Collapse.vuescript1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556import { ref, provide, watch } from 'vue'import { each } from 'lodash-es'import type { CollapseItemName, CollapseProps, CollapseEmits } from './types'import { debugWarn } from '@veyra/utils'import { COLLAPSE_CTX_KEY } from './constants'const COMPONENT_NAME = 'V ...
组件库
未读Button 按钮Button.vuescript1234567891011121314151617181920212223242526272829303132333435363738394041424344454647import { ref, computed, inject } from 'vue';import type { ButtonProps, ButtonEmits, ButtonInstance } from './types';import { BUTTON_GROUP_CTX_KEY } from './constants';import { throttle } from 'lodash-es';import VrIcon from '../Icon/Icon.vue';defineOptions({ name: 'VrButton',}) ...
组件库
未读Alert 警告提示组件分析
组件功能概述Alert 组件用于显示不同类型（如成功、警告等）的提示信息，支持关闭、图标、居中对齐等功能，通过 v-model 或 v-show 控制显示状态。
核心代码解析
Script 部分1234567891011121314151617181920212223242526272829303132333435363738394041<script setup lang="ts">import type { AlertProps, AlertEmits, AlertInstance } from './types'import { ref, computed } from 'vue'import { typeIconMap } from '@veyra/utils'import VrIcon from '../Icon/Icon.vue'defineOptions({ ...
JS
未读
通俗版Promise解释首先要理解前端的同步异步任务流程
同步 vs 异步任务同步任务（排队买奶茶）1234567// 你站在柜台前干等，不做其他事console.log("1. 点单：我要珍珠奶茶");console.log("2. 等店员制作...（干等5秒）");// 模拟同步等待const start = Date.now();while (Date.now() - start < 5000) {} // 直接阻断后面的进程，阻塞5秒console.log("3. 拿到奶茶，开心喝！");
异步任务（外卖通知）123456console.log("1. 手机下单奶茶");// 异步操作：下单后先做其他事，等通知setTimeout(() => { console.log("3. 外卖员通知：奶茶到啦！");}, 5000); // 5秒后才触发回调，不阻塞主进程console.log("2. 下单成功，先去打游戏 ...
