@enjoyloneliness/fx-ui-vue

面向 Vue 3.5+ 的 Adaptive UI Foundation。它处理桌面、平板和手机之间的布局与交互，不替代 Element Plus 等视觉组件库。

安装

pnpm add vue @enjoyloneliness/fx-ui-core @enjoyloneliness/fx-ui-vue

插件方式

import { createApp } from 'vue'
import FxUi from '@enjoyloneliness/fx-ui-vue'
import '@enjoyloneliness/fx-ui-vue/style.css'
import App from './App.vue'

createApp(App).use(FxUi).mount('#app')

插件包含全局组件 TypeScript 声明，可直接在模板中使用 <FxContainer>、<FxDrawer> 等组件。

按需导入

<script setup lang="ts">
import { FxContainer, FxResponsive } from '@enjoyloneliness/fx-ui-vue'
</script>

<template>
  <FxContainer safe-area>
    <FxResponsive>
      <template #mobile>手机内容</template>
      <template #desktop>桌面内容</template>
    </FxResponsive>
  </FxContainer>
</template>

无论使用插件还是按需导入，都只需引入一次 @enjoyloneliness/fx-ui-vue/style.css。该文件已经包含默认 tokens。