LunarXYZ@lunarxyz/components
@lunarxyz/components 是一个基于 @lunarxyz/core 和 Vant 4.x 的 Vue3 组件包，主要目的是简化 Lunarxyz App 相关生态在 UI 层面的开发成本。
安装
默认都是通过工程化项目引入，在使用之前，需要集成到你的项目依赖里：
yarn add @lunarxyz/core @lunarxyz/components vant@rc
或者使用你更习惯的 npm ：
npm i @lunarxyz/core @lunarxyz/components vant@rc
TIP
组件包依赖核心包和 Vant UI 4.x 版本，所以需要同时安装 @lunarxyz/core 和 vant 这 2 个包，并确保 Vant 的版本为 ^4.0.0-rc.0 或以上。
和核心包一样，组件包也是需要依赖 Vue 3 ，请确保你的项目的 Vue 版本号 >= ^3.2.37 ，否则可能会有兼容问题。
Vant 文档
请基于 Vant 的最新版本使用本组件包，如使用其他 UI 框架，可能会存在一些兼容问题。
点击查看： Vant 4.x 版本文档
组件按需引入
和核心包一样，组件包也是一个 Fully Tree Shakeable 的包（术语解释：Tree shaking ）。
所以也是需要你在 .vue 组件里按需导入，这样编译器会在构建的时候丢弃没有被引用的模块，可以有效的减少打包后的项目体积。
<script setup lang="ts">
// 这里的 `{ LoginPopup }` 就是按需导入需要的组件
import { LoginPopup } from '@lunarxyz/components'
// 同时还需要一起导入组件的样式模块
import '@lunarxyz/components/lib/es/LoginPopup/style'
</script>
这种方式比较繁琐的是需要手动导入样式，下面还有另外两种自动化导入方案，可以根据自己习惯配置。
TIP
import 时基础路径是 @lunarxyz/components/lib/es/ ， es 是 ES Module 的缩写。
require 时基础路径是 @lunarxyz/components/lib/cjs/ ， cjs 是 CommonJS 的缩写。
组件和样式自动导入
以 Vite 为例，可以利用 unplugin-vue-components 提供的能力实现组件和样式自动导入。
安装插件：
yarn add -D unplugin-vue-components
在 vite.config.ts 配置插件部分如下：
// vite.config.ts
import { defineConfig } from 'vite'
import components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
components({
resolvers: [
// 自动导入 Vant 组件
VantResolver(),
// 自动导入组件包
(componentName) => {
if (componentName.startsWith('Lunarxyz')) {
const name = componentName.slice(8)
return {
name,
from: `@lunarxyz/components`,
sideEffects: `@lunarxyz/components/lib/es/${name}/style`,
}
}
},
],
}),
],
})
在业务组件里，必须带上前缀才可以自动导入：
<template>
<!-- Vant 组件必须以 `Van` 开头 -->
<VanButton type="primary" @click="isShowLoginPopup = !isShowLoginPopup">
<span>唤起登录</span>
</VanButton>
<VanConfigProvider theme="dark">
<!-- 组件包的组件必须以 `Lunarxyz` 开头 -->
<LunarxyzLoginPopup v-model:show="isShowLoginPopup" />
</VanConfigProvider>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const isShowLoginPopup = ref<boolean>(false)
</script>
这种方式可以自动导入组件和样式，不需要在每个 .vue 文件里手动导入了，但带来比较繁琐的是组件都必须通过前缀来识别。
样式自动导入
以 Vite 为例，利用 vite-plugin-style-import 提供的能力实现组件样式的自动导入，然后组件本身通过手动导入。
安装插件：
yarn add -D vite-plugin-style-import consola
在 vite.config.ts 配置插件部分如下：
// vite.config.ts
import { defineConfig } from 'vite'
import { createStyleImportPlugin } from 'vite-plugin-style-import'
export default defineConfig({
plugins: [
createStyleImportPlugin({
libs: [
// 自动导入 Vant 的样式
{
libraryName: 'vant',
esModule: true,
resolveStyle: (name) => {
const excludes = [
'show-fail-toast',
'show-success-toast',
'show-loading-toast',
'close-toast',
]
if (excludes.includes(name)) return ''
return `../es/${name}/style`
},
},
// 自动导入组件包的样式
{
libraryName: '@lunarxyz/components',
esModule: true,
libraryNameChangeCase: 'pascalCase',
resolveStyle: (name) => {
return `@lunarxyz/components/lib/es/${name}/style`
},
},
],
}),
],
})
TIP
由于插件的 VantResolve() 方法路径有误，所以无法通过导入助手来自动导入，需要自己配置 libs 的规则，详见 #91 。
类型声明
同样的，组件包也是一个 Type Strong 的包，提供了完善的 TypeScript 类型声明。
使用 TS 友好的编辑器开发时（ e.g. VSCode ），编辑器可以帮你自动推导每个 API 的类型。
当你不清楚具体用法的时候，也可以按住 Ctrl + 左键 点击组件名称可以跳转到 .d.ts 文件查看声明及注释。
CDN
暂时不支持 CDN 的方式使用。