技术探索
未读
nrmnrm（npm registry manager）是npm的镜像管理工具
能帮助你在加载国外的资源太慢时快速切换npm源
安装npm install -g nrm，全局安装nrm
使用查看所有源1nrm ls
显示类似以下信息
1234567* npm ---------- https://registry.npmjs.org/ yarn --------- https://registry.yarnpkg.com/ tencent ------ https://mirrors.tencent.com/npm/ cnpm --------- https://r.cnpmjs.org/ taobao ------- https://registry.npmmirror.com/ npmMirror ---- https://skimdb.npmjs.com/registry/ huawei ------- https://repo.huaweicloud.com/repository/npm/
其中 * 号表示当前使用的源。
切换源相比 npm config set ...
组件库
未读
我的 Vue3 文档内置标签component
动态组件
根据 currentTabComponent 的值判断是否要渲染组件
1<component v-bind:is="currentTabComponent"></component>
keep-alive
每次切换新标签的时候，Vue 都会创建一个新的 currentTabComponent 实例。
1234<!-- 失活的组件将会被缓存！--><keep-alive> <component v-bind:is="currentTabComponent"></component></keep-alive>
slot⭐
子组件的占位符
在父组件引用的中 写入的内容
会被 插进子组件内 并渲染回父组件
12345678910<!-- 父组件 --><Button> <div>这是默认插槽的内容</div></Button><!- ...
技术探索
未读
PostCSSPostCSS中文网
处理CSS代码的工具，通过一系列的插件来实现最新的CSS特性
插件介绍Autoprefixer
兼容各种浏览器特有的前缀
1box-sizing: border-box;
12-webkit-box-sizing-moz-box-sizing
PostCSS-Preset-Env
使用最新的CSS特性，转移为主流浏览器支持的版本
1234567.box{ background: #000000; &:hover{ background: #000000; }}
123.box:hover{ background: #000000;}
Autoprefixer
兼容各种浏览器特有的前缀
1box-sizing: border-box;
12-webkit-box-sizing-moz-box-sizing
大前端
未读Plugins 开发插件 | Vue.js
前言Vue3中，一个插件通常是一个对象
通常我们开发的插件通过全局导出
1export default myPlugin
从而在项目的入口文件中使用
1app.use(myPlugin)
基础开发plugins/MyButton.vue123<template> <button>我的按钮</button></template>
index.ts123456import MyButton from './MyButton.vue'export default{ install:(app,options)=>{ app.component('myButton', MyButton) }}
main.js123import MyButton from './plugins/MyButton.ts'create(App).use(MyButton).m ...
技术探索
未读
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 & ...
