快速开始
本节将介绍如何在项目中使用组件库。
提示
在开始之前，请确保已经完成了安装。
引入样式
在项目入口文件（通常是 main.ts 或 main.js）中引入样式文件：
ts
// main.ts
import '@pt/<package-name>style';组件使用
传统方式
这是一个简单的示例，展示如何使用组件：
查看代码
vue
<template>
<div class="example-container">
<pt-button type="primary" @click="handleClick">点击我</pt-button>
<pt-input v-model="inputValue" placeholder="请输入内容" />
<p>输入的内容：{{ inputValue }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { PtButton, PtInput } from '@pt/<package-name>'
const inputValue = ref('')
const handleClick = () => {
alert('按钮被点击了！')
}
</script>
<style scoped>
.example-container {
padding: 1rem;
}
</style>在线链接
如果你想通过引用esm在线链接的方式使用组件，请参考下面示例
MarkdownCompiler组件
请打开代码查看
<script setup lang="ts">
import { onMounted, defineAsyncComponent, onBeforeMount } from 'vue'
import UseUtils from './useUtils.vue'
// 动态加载 CSS 文件的函数
function loadRemoteStyle(url:string) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);
}
// 定义一个异步组件，返回一个 Promise，Promise 内部使用动态 import 加载远程模块
// @ts-ignore
const CustomInput = defineAsyncComponent({
loader: async () => {
// @ts-ignore
// const module = await import('https://minio-local.i-tudou.com/potato-share-components/test-federation/components/es/CustomInput.js')
const module = await System.import('/potato-share-components/test-federation/components/es/CustomInput.js');
return module.default
},
loadingComponent: {
template: '<div>加载中...</div>'
},
errorComponent: {
template: '<div>加载失败，请检查网络或 CORS 配置</div>'
},
delay: 2000, // 延迟 200ms 后再显示 loadingComponent
timeout: 5000 // 5秒超时后显示 errorComponent);
})
// @ts-ignore
const HelloWorld = defineAsyncComponent({
loader: async () => {
// 确保先加载 Vue 运行时
await Promise.resolve(); // 确保 Vue 运行时已加载
// @ts-ignore
// const module = await import('https://minio-local.i-tudou.com/potato-share-components/test-federation/components/es/CustomInput.js')
const module = await System.import('/potato-share-components/test-federation/components/es/HelloWorld.js');
// 添加调试信息
console.log('Loaded module:', {
moduleType: typeof module,
defaultExport: module.default,
keys: Object.keys(module),
// 检查组件是否使用了正确的 Vue 实例
vueInstance: module.default?.__vccOpts?.__proto__?.constructor
});
return module.default
},
loadingComponent: {
template: '<div>加载中...</div>'
},
errorComponent: {
template: '<div>加载失败，请检查网络或 CORS 配置</div>'
},
delay: 2000, // 延迟 200ms 后再显示 loadingComponent
timeout: 5000 // 5秒超时后显示 errorComponent);
})
// 在组件挂载前初始化 Vue
onBeforeMount(async () => {
});
onMounted(async () => {
loadRemoteStyle('/potato-share-components/test-federation/styles/style.css');
})
</script>
<template>
<div>
<h1>组件测试</h1>
<p>组件1</p>
<fieldset>
<legend>组件1</legend>
<p>
<ClientOnly>
<Suspense>
<CustomInput/>
<template #fallback>
<div>Html Loading...</div>
</template>
</Suspense>
</ClientOnly>
</p>
</fieldset>
<div style="margin-bottom: 10px;"></div>
<fieldset>
<legend>组件2</legend>
<p>
<ClientOnly>
<Suspense>
<HelloWorld :msg="'Hello World'"/>
<template #fallback>
<div>Html Loading...</div>
</template>
</Suspense>
</ClientOnly>
</p>
</fieldset>
<hr style="margin: 40px 0;"/>
<UseUtils ></UseUtils>
</div>
</template>
<style scoped>
fieldset{
border-radius: 16px;
}
</style>如果你通过在线链接的方式使用组件，请确保在项目中配置了 systemjs 和 systemjs-babel，以支持运行时模板编译。并且在app.vue文件中全局注入依赖
vue
import * as Vue from 'vue' // 显式导入 Vue
import "systemjs";
import "systemjs-babel";
// @ts-ignore
function registerModule(moduleName:string, moduleValue:any) {
// @ts-ignore
System.addImportMap({
imports: {
[moduleName]: `dep:${moduleName}`
}
});
// @ts-ignore
System.set(`dep:${moduleName}`, moduleValue as any);
}
registerModule('vue', Vue);
// 注册 SystemJS
// @ts-ignore
registerModule("systemjs", System);
// 注册 SystemJS Babel
// 如果你有 `SystemJS Babel` 的全局变量或模块导出，可以将它注册
// @ts-ignore
registerModule("systemjs-babel", window.SystemJSBabel || {});Hooks 使用
vue
<script setup>
import { useMqtt } from '@pt/hooks'
const { connect, subscribe, publish } = useMqtt()
</script>工具函数使用
js
import { mqtt } from '@pt/utils'
mqtt.connect(...)