# @macroui/macroui-vue
**Vue 3 + Element Plus API + MacroUI 视觉风格的组件库** [![npm version](https://img.shields.io/npm/v/@macroui/macroui-vue.svg)](https://www.npmjs.com/package/@macroui/macroui-vue) [![license](https://img.shields.io/npm/l/@macroui/macroui-vue.svg)](https://github.com/mobiui/macroui/blob/master/LICENSE) [![downloads](https://img.shields.io/npm/dt/@macroui/macroui-vue.svg)](https://www.npmjs.com/package/@macroui/macroui-vue)
> 🎯 **@macroui/macroui-vue** 是基于 **Vue 3**（Composition API + ` ``` ### 3.4 CSS 加载顺序说明 ``` 必须按以下顺序加载： 1. themes.css - 主题变量 (CSS Custom Properties) 2. styled.css - MacroUI 通用组件类 3. style.css - Vue 组件的微调和覆盖 ``` 颠倒顺序可能导致主题变量被覆盖而出现视觉异常。 ### 3.5 函数式调用（无需注册） ```ts import { ElMessage, ElMessageBox, ElNotification, ElLoading } from '@macroui/macroui-vue' ElMessage.success('成功') ElNotification.error('失败') const loader = ElLoading.service({ text: '加载中...' }) ``` --- ## 4. 主题系统 ### 4.1 切换主题 通过设置 `` 即可切换： ```html ``` ### 4.2 动态切换（带持久化） ```ts // src/utils/theme.ts import { ref, watchEffect } from 'vue' const theme = ref(localStorage.getItem('theme') || 'light') export function useTheme() { watchEffect(() => { document.documentElement.setAttribute('data-theme', theme.value) localStorage.setItem('theme', theme.value) }) const setTheme = (name: string) => { theme.value = name } const toggleDark = () => { setTheme(theme.value === 'dark' ? 'light' : 'dark') } return { theme, setTheme, toggleDark } } ``` ```vue ``` ### 4.3 内置主题清单（30+） `light`、`dark`、`cupcake`、`bumblebee`、`emerald`、`corporate`、`synthwave`、`retro`、`cyberpunk`、`valentine`、`halloween`、`garden`、`forest`、`aqua`、`lofi`、`pastel`、`fantasy`、`wireframe`、`black`、`luxury`、`dracula`、`cmyk`、`autumn`、`business`、`acid`、`lemonade`、`night`、`coffee`、`winter`、`dim`、`nord`、`abyss`、`silk`、`caramellatte`、`sunset`。 ### 4.4 自定义主题 ```css /* src/styles/theme.css */ [data-theme="mytheme"] { /* HSL 格式：H S% L% */ --p: 220 90% 56%; /* primary */ --pc: 0 0% 100%; --s: 160 84% 39%; --a: 30 90% 50%; --n: 220 14% 28%; --b1: 0 0% 100%; --b2: 220 13% 95%; --b3: 220 13% 90%; --bc: 220 14% 10%; --in: 198 93% 60%; --su: 158 64% 52%; --wa: 38 92% 50%; --er: 0 91% 71%; } ``` ```html ``` --- ## 5. 国际化 i18n ### 5.1 全局配置 ```ts import { ElConfigProvider } from '@macroui/macroui-vue' import zhCn from '@macroui/macroui-vue/locale/lang/zh-cn' import en from '@macroui/macroui-vue/locale/lang/en' app.use(ElConfigProvider, { locale: zhCn, // size: 'default', // 全局组件尺寸 }) ``` ### 5.2 运行时切换 ```vue ``` ### 5.3 useLocale Hook ```vue ``` ### 5.4 支持的语言（67 种） | 区域 | 语言 | |------|------| | 中国大陆 | zh-cn | | 中国香港 | zh-hk | | 中国澳门 | zh-mo | | 中国台湾 | zh-tw | | 亚洲 | ja, ko, vi, th, my, hi, bn, ta, te, km, ur, pa, id, ms | | 欧洲 | en, de, fr, es, it, pt, pt-br, nl, ru, pl, tr, el, cs, da, sv, nb-no, fi, hu, ro, bg, uk, sk, hr, sl, sr, ca, eo, eu, et, lv, lt | | 中东 | ar, fa, he | | 非洲 | af, sw, mg | | 中亚 | kk, ky, tk, uz-uz | | 其他 | az, hy-am, ku, ckb, mn | > **完整语言文件路径**：`@macroui/macroui-vue/locale/lang/` ### 5.5 扩展新语言 ```ts // src/locales/ja.ts export default { name: 'ja', el: { button: { confirm: '確認', cancel: 'キャンセル', }, pagination: { total: '合計 {total} 件', }, }, } ``` ```ts // 注入到全局 import ja from '@/locales/ja' app.use(ElConfigProvider, { locale: ja, }) ``` ### 5.6 ⚠️ 重要规则 > **邮箱地址不要写入语言包**，应写死在页面组件中。 ```vue ✅ 正确：写死在组件中 ❌ 错误：写入语言包 export default { contact: 'support@example.com', } ``` --- ## 6. 全局配置 ElConfigProvider `ElConfigProvider` 用于全局配置组件默认值。 ```vue ``` ### 6.1 ElConfigProvider Props | Prop | 类型 | 默认 | 说明 | |------|------|------|------| | `locale` | `Language` | `zhCn` | 当前语言 | | `size` | `SizeType` | `'default'` | 全局尺寸 | | `buttonType` | `ButtonType` | - | 全局按钮类型 | | `messageOptions` | `MessageOptions` | - | Message 全局配置 | | `zIndex` | `number` | `2000` | 弹窗 z-index 起始值 | | `namespace` | `string` | `'el'` | 组件 CSS 类前缀 | ### 6.2 SizeType `'large' | 'default' | 'small' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'` > 注：扩展尺寸（`xs` / `sm` / `md` / `lg` / `xl`）仅 macroui-vue 支持，Element Plus 仅有前三档。 --- ## 7. 组件完整参考 ### 7.1 基础组件 #### ElButton — 按钮 ```vue ``` **Props 关键字段**：`type`（`'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'`）、`size`、`plain`、`round`、`circle`、`loading`、`disabled`、`icon`、`native-type`、`autofocus`、`tag`、`text` / `bg` / `link`。 **Events**：`click`、`mousedown`。 **Slots**：`default`、`loading`、`icon`。 #### ElLink — 文字链接 ```vue 默认 主要 无下划线 禁用 ``` #### ElText — 文本 ```vue 默认 主要 危险 大号 省略... ``` #### ElIcon — 图标 ```vue ``` #### ElSpace — 间距 ```vue 1 2 1 2 按钮{{ i }} ``` #### ElDivider — 分割线 ```vue 文字 垂直 ``` #### ElScrollbar — 滚动条 ```vue

{{ i }}

 ``` ### 7.2 表单组件 #### ElInput — 输入框 ```vue ``` **Props**：`modelValue`、`type`、`placeholder`、`disabled`、`clearable`、`show-password`、`prefix-icon`、`suffix-icon`、`maxlength`、`minlength`、`show-word-limit`、`autocomplete`、`name`、`size`、`input-style`。 **Events**：`update:modelValue`、`input`、`change`、`focus`、`blur`、`clear`、`keydown`、`keyup`。 **Slots**：`prefix`、`suffix`、`prepend`、`append`。 #### ElInputNumber — 数字输入 ```vue ``` #### ElInputTag — 标签输入 ```vue ``` #### ElInputOtp — 一次性密码 ```vue ``` #### ElSelect — 选择器 ```vue ``` **Props**：`modelValue`、`multiple`、`disabled`、`size`、`clearable`、`filterable`、`remote`、`loading-text`、`no-match-text`、`no-data-text`、`placeholder`、`collapse-tags`、`multiple-limit`、`value-key`。 #### ElOption / ElOptionGroup **ElOption Props**：`value`、`label`、`disabled`。 **ElOptionGroup Props**：`label`、`disabled`。 #### ElCascader — 级联选择 ```vue ``` **Props**：`modelValue`、`options`、`props`、`size`、`placeholder`、`disabled`、`clearable`、`filterable`、`show-all-levels`、`collapse-tags`、`separator`、`before-filter`、`max-collapse-tags`。 #### ElTreeSelect — 树形选择 ```vue ``` #### ElTree — 树形控件 ```vue ``` #### ElTreeV2 — 虚拟树 ```vue ``` #### ElCheckbox — 多选框 ```vue 选项 A B ``` #### ElCheckboxGroup / ElCheckboxButton ```vue A B ``` #### ElRadio — 单选 ```vue 男 男 女 男 女 ``` #### ElSwitch — 开关 ```vue ``` #### ElSlider — 滑块 ```vue ``` #### ElRate — 评分 ```vue ``` #### ElColorPicker — 颜色选择器 ```vue ``` #### ElDatePicker — 日期选择器 ```vue ``` #### ElTimePicker — 时间选择器 ```vue ``` #### ElTimeSelect — 时间段选择 ```vue ``` #### ElUpload — 上传 ```vue 点击上传
将文件拖到此处，或点击上传
``` #### ElForm — 表单 ```vue ``` **Form Methods（ref）**：`validate(cb?)`、`validateField(props, cb?)`、`resetFields()`、`clearValidate(props?)`、`scrollToField(prop)`。 **ElFormItem Props**：`prop`、`label`、`label-width`、`required`、`rules`、`error`、`show-message`、`inline-message`、`size`。 #### ElMention — @提及 ```vue ``` #### ElAutocomplete — 自动补全 ```vue ``` ### 7.3 数据展示 #### ElTable — 表格 ```vue ``` **关键 Props**：`data`、`height`、`max-height`、`stripe`、`border`、`size`、`fit`、`show-header`、`highlight-current-row`、`row-class-name`、`row-style`、`cell-class-name`、`cell-style`、`empty-text`、`show-summary`、`summary-method`、`span-method`、`lazy`、`load`、`tree-props`、`default-expand-all`、`default-sort`。 **关键 Events**：`select`、`select-all`、`selection-change`、`cell-click`、`row-click`、`row-dblclick`、`sort-change`、`current-change`、`expand-change`、`filter-change`。 #### ElTableColumn — 表格列 **关键 Props**：`type`（`selection` / `index` / `expand`）、`prop`、`label`、`width`、`min-width`、`fixed`、`sortable`、`sort-orders`、`sort-method`、`sort-by`、`resizable`、`formatter`、`show-overflow-tooltip`、`align`、`header-align`、`class-name`、`label-class-name`、`selectable`、`reserve-selection`、`filters`、`filter-placement`、`filter-multiple`、`filter-method`、`filtered-value`、`render-header`。 #### ElTableV2 — 虚拟表格 ```vue ``` #### ElPagination — 分页 ```vue ``` #### ElTag — 标签 ```vue 标签1 成功 警告 危险 大号 圆角 可选中 ``` #### ElBadge — 徽章 ```vue 按钮 ≤9 红点 ``` #### ElAvatar — 头像 ```vue USER ``` #### ElSkeleton — 骨架屏 ```vue ``` #### ElProgress — 进度条 ```vue ``` #### ElEmpty — 空状态 ```vue 重新加载 ``` #### ElResult — 结果页 ```vue ``` #### ElDescriptions — 描述列表 ```vue 张三 zhang@example.com 13800138000 北京市朝阳区 ``` #### ElStatistic — 统计数值 ```vue ``` #### ElTimeline — 时间轴 ```vue 创建项目 里程碑 1 ``` #### ElCalendar — 日历 ```vue ``` #### ElImage — 图片 ```vue ``` #### ElCarousel — 走马灯 ```vue

{{ item }}

 ``` #### ElCollapse — 折叠面板 ```vue 内容1 内容2 ``` #### ElTransfer — 穿梭框 ```vue ``` #### ElWatermark — 水印 ```vue
有水印内容
 ``` ### 7.4 反馈组件 #### ElAlert — 警告提示 ```vue ``` #### ElDialog — 对话框 ```vue 内容 ``` **关键 Props**：`modelValue`、`title`、`width`、`fullscreen`、`top`、`modal`、`append-to-body`、`lock-scroll`、`close-on-click-modal`、`close-on-press-escape`、`show-close`、`before-close`、`draggable`、`overflow`、`center`、`align-center`、`destroy-on-close`、`transition`。 #### ElDrawer — 抽屉 ```vue 内容 ``` **关键 Props**：`modelValue`、`direction`、`size`、`title`、`modal`、`drawer-class`、`wrapper-closable`、`close-on-press-escape`、`destroy-on-close`、`with-header`、`show-close`、`z-index`、`append-to-body`、`lock-scroll`。 #### ElMessage — 消息提示（函数式） ```ts import { ElMessage } from '@macroui/macroui-vue' ElMessage.success('操作成功') ElMessage.warning('警告信息') ElMessage.error('错误信息') ElMessage.info('提示信息') ElMessage({ message: '带图标', type: 'success', duration: 3000, showClose: true, dangerouslyUseHTMLString: true, customClass: 'my-message', onClose: () => console.log('closed'), }) ``` **MessageOptions**：`message`、`type`、`icon`、`dangerouslyUseHTMLString`、`customClass`、`duration`、`showClose`、`center`、`onClose`、`offset`、`appendTo`、`grouping`。 #### ElMessageBox — 消息弹框 ```ts import { ElMessageBox } from '@macroui/macroui-vue' await ElMessageBox.alert('内容', '标题', { type: 'warning' }) try { await ElMessageBox.confirm('确定删除？', '提示', { type: 'warning' }) } catch { // 取消 } const { value } = await ElMessageBox.prompt('请输入名字', '提示', { inputPattern: /^.{2,20}$/, inputErrorMessage: '长度 2-20', }) ``` #### ElNotification — 通知 ```ts import { ElNotification } from '@macroui/macroui-vue' ElNotification({ title: '标题', message: '内容', type: 'success', position: 'top-right', duration: 4500, }) ``` **位置 options**：`top-right` / `top-left` / `bottom-right` / `bottom-left`。 #### ElPopconfirm — 弹出确认 ```vue ``` #### ElTooltip — 文字提示 ```vue 悬停 亮色 ``` **关键 Props**：`content`、`placement`、`disabled`、`offset`、`transition`、`show-after`、`hide-after`、`controlled`、`visible`、`trigger`（`hover` / `click` / `focus` / `contextmenu`）、`teleported`。 #### ElPopover — 弹出框 ```vue ``` #### ElLoading — 加载状态 ```vue 全屏 loading ``` **Options**：`target`、`fullscreen`、`lock`、`text`、`spinner`、`background`、`customClass`。 #### ElTour — 漫游式引导 ```vue ``` ### 7.5 导航组件 #### ElMenu — 导航菜单 ```vue 首页 产品A 产品B 关于 ... ``` **关键 Props**：`mode`（`horizontal` / `vertical`）、`default-active`、`collapse`、`default-openeds`、`unique-opened`、`menu-trigger`、`router`、`collapse-transition`、`arrow-icon`、`ellipsis-icon`。 #### ElMenuItem / ElSubMenu / ElMenuItemGroup ```vue 选项1 ``` #### ElTabs — 标签页 ```vue 内容1 内容2 内容3 ... ... ``` **关键 Props**：`v-model`、`type`（`card` / `border-card`）、`tab-position`、`closable`、`addable`、`editable`、`before-leave`。 #### ElTabPane — 标签页内容 **关键 Props**：`name`、`label`、`disabled`、`lazy`、`closable`、`contextmenu`。 #### ElBreadcrumb — 面包屑 ```vue 首页 列表 详情 ``` #### ElDropdown — 下拉菜单 ```vue 下拉菜单 操作 ``` #### ElSteps — 步骤条 ```vue ... ``` **关键 Props**：`space`、`direction`、`active`、`align-center`、`simple`、`finish-status`、`process-status`。 **ElStep Props**：`title`、`description`、`icon`、`status`。 #### ElPageHeader — 页头 ```vue ``` #### ElAffix — 固钉 ```vue 固定按钮 ``` #### ElBacktop — 回到顶部 ```vue ``` #### ElAnchor — 锚点 ```vue ``` ### 7.6 布局组件 #### ElContainer / ElHeader / ElAside / ElMain / ElFooter ```vue Header Aside Main Footer ``` #### ElRow / ElCol — 栅格 ```vue 8/24 8/24 8/24 ... 响应式 flex ``` **ElRow**：`gutter`、`type`、`justify`、`align`、`tag`。 **ElCol**：`span`、`offset`、`push`、`pull`、`xs`、`sm`、`md`、`lg`、`xl`、`tag`。 #### ElSplitter — 分隔面板 ```vue 左 右 ``` #### ElSegmented — 分段控制器 ```vue ``` #### ElBorder — 边框 ```vue 带边框容器 自定义边框 ``` #### ElInfiniteScroll — 无限滚动指令 ```vue
  • {{ item.name }}
``` --- ## 8. 工具函数与 Hooks ### 8.1 入口导出 ```ts import * as MacrouiVue from '@macroui/macroui-vue' import { ElMessage, ElMessageBox, ElNotification, ElLoading, } from '@macroui/macroui-vue' ``` ### 8.2 useLocale ```ts import { useLocale } from '@macroui/macroui-vue' const { t, locale } = useLocale() t('el.pagination.total', { total: 100 }) ``` ### 8.3 useZIndex ```ts import { useZIndex } from '@macroui/macroui-vue' const { initialZIndex, currentZIndex, nextZIndex } = useZIndex() nextZIndex() // 取得下一个 z-index ``` ### 8.4 useNamespace ```ts import { useNamespace } from '@macroui/macroui-vue' const ns = useNamespace('button') ns.b() // 'el-button' ns.is('disabled') // 'is-disabled' ns.m('primary') // 'el-button--primary' ``` ### 8.5 类型导出 ```ts import type { ButtonType, ButtonSize, SizeType, FormInstance, FormRules, FormItemRule, MenuItemRegistered, TableInstance, TreeInstance, UploadFile, UploadFiles, UploadUserFile, TreeNodeData, CascaderOption, CascaderValue, SelectOption, SelectOptionGroup, MessageOptions, MessageType, NotificationOptions, DateCell, CalendarInstance, } from '@macroui/macroui-vue' ``` ### 8.6 工具函数 | 函数 | 用途 | |------|------| | `useLocale()` | 获取当前 locale | | `useZIndex()` | z-index 管理 | | `useNamespace(name)` | 类名前缀 | | `useId()` | 生成唯一 id | | `useResizeObserver()` | 监听 DOM 尺寸 | | `useEventListener()` | 监听事件 | | `useThrottleFn()` | 节流 | | `useDebounceFn()` | 防抖 | | `useDraggable()` | 拖拽（Dialog 等内部使用） | --- ## 9. 按需引入 ### 9.1 自动按需（unplugin-vue-components） ```bash npm install -D unplugin-vue-components ``` ```ts // vite.config.ts import Components from 'unplugin-vue-components/vite' import { MacrouiVueResolver } from 'unplugin-vue-components/resolvers' export default { plugins: [ Components({ resolvers: [MacrouiVueResolver()], }), ], } ``` ### 9.2 手动按需（推荐用于 SSR） ```ts import { ElButton, ElInput, ElConfigProvider, } from '@macroui/macroui-vue' ``` ### 9.3 在 Webpack 中按需 ```js // babel.config.js module.exports = { plugins: [ ['babel-plugin-import', { libraryName: '@macroui/macroui-vue', libraryDirectory: 'es', style: true, }, '@macroui/macroui-vue'], ], } ``` ### 9.4 性能优化要点（v2.17.84+） `@macroui/macroui-vue` 的 ESM 产物里，下述运行时依赖全部走 `external`，**不会被打进 bundle**： | 依赖 | 角色 | |------|------| | `vue` | peer（必需） | | `@macroui/macroui-icons` | 图标默认 external；通过 `MacrouiIconsResolver` 按需引入 | | `@vueuse/core` | Tooltip / Dropdown 等使用的基础 hook | | `@popperjs/core` | 旧版 Popper 定位（`el-tooltip` 等） | | `@floating-ui/dom` | 新版 Floating 定位（`el-floating`） | | `lodash-unified` | 通用工具函数 | **当前 ESM 体积拆解**： ``` dist/index.mjs ~849 KB │ gzip: ~183 KB // 90+ 组件代码本体 dist/index.js ~613 KB │ gzip: ~151 KB // CJS 同步产物 dist/style.css ~291 KB │ gzip: ~41 KB // 全局样式 dist/locale/ ~216 KB │ gzip: ~6 KB // 67 种语言（仅打包用到的） ``` 按需引入结论： 1. **全量注册**：`app.use(MacrouiVue, ...)`，体积 ≈ 849 KB / 183 KB (gzip)。 2. **按需 resolver**（推荐）：配合 `MacrouiVueResolver` + `MacrouiIconsResolver`，仅打包实际用到的组件，通常 < 200 KB (gzip)。 3. **手动按需**：参考 §9.2。 --- ## 10. SSR / Nuxt ### 10.1 Nuxt 3 配置 ```ts // nuxt.config.ts export default defineNuxtConfig({ build: { transpile: ['@macroui/macroui-vue'], }, vite: { optimizeDeps: { include: ['@macroui/macroui-vue'], }, }, css: [ '@macroui/macroui/dist/themes.css', '@macroui/macroui/dist/styled.css', '@macroui/macroui-vue/dist/style.css', ], }) ``` ```ts // plugins/macroui.ts import MacrouiVue from '@macroui/macroui-vue' export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(MacrouiVue) }) ``` ### 10.2 SSR 注意事项 - 引用的组件必须出现在 template 中，否则会在 server 端跳过 - 使用 `` 包裹需要 client 行为的组件（如 ElTooltip、ElPopover） - 表单的 `el-form` SSR 推荐只渲染结构，校验放客户端 --- ## 11. 浏览器支持 | 浏览器 | 版本 | |--------|------| | Chrome / Edge | 最近 2 年 | | Firefox | 最近 2 年 | | Safari | 14+ | | iOS Safari | 14+ | | Android Chrome | 90+ | | IE | ❌ 不支持 | 支持 Vue 3（>= 3.4）。 --- ## 12. 开发与构建 ### 12.1 仓库克隆 ```bash git clone https://github.com/mobiui/macroui.git cd macroui-vue pnpm install ``` ### 12.2 开发命令 ```bash # 库开发模式（监听源码，自动 build） pnpm dev:lib # 示例页面（examples/） pnpm dev:demo # 仅构建库 pnpm build:lib # 完整构建（含 locale） pnpm build:all # 单元测试 pnpm test pnpm test:watch pnpm test:coverage # E2E 测试 pnpm test:e2e pnpm test:e2e:ui # 代码风格 pnpm lint # TypeScript 类型检查 pnpm typecheck ``` ### 12.3 目录结构 ``` macroui-vue/ ├── examples/ # 示例项目（vite demo） │ ├── pages/ │ ├── App.vue │ ├── main.ts │ └── vite.config.ts ├── packages/ │ ├── components/ # 90+ 组件 │ │ ├── ElButton/ │ │ │ ├── button.vue │ │ │ ├── props.ts │ │ │ └── index.ts │ │ └── ... │ ├── constants/ # 常量 │ │ ├── aria.ts │ │ ├── date.ts │ │ ├── form.ts │ │ ├── key.ts │ │ └── size.ts │ ├── hooks/ # Hooks │ ├── locale/ # i18n 语言包 │ │ ├── index.ts │ │ └── lang/ │ ├── styles/ # 组件局部样式 │ └── utils/ # 工具函数 ├── tests/ │ ├── unit/ # 单元测试 (vitest) │ └── e2e/ # E2E 测试 (playwright) ├── styles/ │ └── index.scss # 全局样式入口 ├── docs/ # 文档 ├── dist/ # 构建产物 └── types/ # 全局类型 ``` ### 12.4 创建新组件 ```bash mkdir -p packages/components/ElNewComponent touch packages/components/ElNewComponent/new-component.vue touch packages/components/ElNewComponent/props.ts touch packages/components/ElNewComponent/index.ts ``` **props.ts：** ```ts import { buildProps } from '@macroui/macroui-vue' import type { ExtractPropTypes, PropType } from 'vue' export const newComponentProps = buildProps({ modelValue: { type: [String, Number, Boolean], default: '', }, size: { type: String, values: ['large', 'default', 'small'], default: 'default', }, disabled: Boolean, }) export const newComponentEmits = { 'update:modelValue': (value: any) => true, } export type NewComponentProps = ExtractPropTypes export type NewComponentEmits = typeof newComponentEmits ``` **new-component.vue：** ```vue ``` **index.ts：** ```ts import { withInstall } from '@macroui/macroui-vue' import NewComponent from './new-component.vue' export const ElNewComponent = withInstall(NewComponent) export default ElNewComponent ``` ### 12.5 添加到 packages/components/index.ts ```ts export { ElNewComponent } from './ElNewComponent' ``` --- ## 13. NPM 发布 ```bash # 1. 确认登录状态 npm whoami # 2. 修改 package.json 中的 version（遵循 semver） # major：破坏性变更 # minor：向下兼容的新功能 # patch：bugfix # 3. 构建 pnpm build:lib # 4. 发布 npm publish --access public ``` ### 13.1 2FA Token 设置 如账户启用 2FA，需要 Granular Access Token： 1. 访问 https://www.npmjs.com/settings/tokens 2. 点击 **Generate New Token** → **Granular Access Token** 3. 配置： - Token Name: `macroui-vue-publish` - Organization: `@macroui` - Permissions: **Publish packages** ✅ - **2FA Bypass**: ✅ **必须启用** 4. 生成 Token ```bash npm config set //registry.npmjs.org/:_authToken=YOUR_GRANULAR_TOKEN npm publish --access public ``` --- ## 14. 项目结构 详见 [12.3 目录结构](#123-目录结构)。 --- ## 15. 常见问题 ### Q1: 样式不生效？ - ✅ 检查 CSS 加载顺序：`themes.css` → `styled.css` → `style.css` - ✅ 确认 `` 已设置 - ✅ 检查 Tailwind config 中是否覆盖了类名前缀 - ✅ 检查 scoped 样式是否影响组件 ### Q2: 组件不显示？ - ✅ 检查是否全局注册（`app.use(MacrouiVue)`） - ✅ 检查是否局部注册 + 命名拼写 - ✅ 检查 `