🚀 @pt/common-ui 快速上手指南

📦 安装

bash

npm install @pt/common-ui

🔧 基础配置

1️⃣ 在 index.html 中配置应用标识

在 HTML 文件的 meta 标签中添加 appCode 属性，用于组件库识别当前应用：

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta itemprop="appCode" content="pt-common-ui-example" /> <!-- 👈 必须配置 -->
    <title>@pt/common-ui 示例</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./example/src/main.ts"></script>
  </body>
</html>

2️⃣ 在 main.ts 中集成组件库

将组件库集成到 Vue 应用中，并配置必要的依赖项：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import CommonUI, { AuthStore } from '@pt/common-ui'; // ⭐ 导入组件库
import "@pt/common-ui/style"; // ⭐ 导入组件库样式（已内置浅色/深色主题）

//import './styles/custom-theme.css'  // 如果你的项目引入自定义主题，覆盖变量

import router from './routers';

// 创建 Vue 应用实例
const app = createApp(App);

// 设置 Pinia 状态管理
const pinia = createPinia();
app.use(pinia);

// 初始化认证 Store
const authStore = AuthStore();

// 🔐 预设权限数据（可选）
/* authStore.authButtonList = {
  components: ['view', 'add', 'export'], // 组件页面的权限
  auth: ['add', 'edit'], // 权限演示页面的权限
}; */

// 🔌 注册组件库和相关指令
app.use(CommonUI, { AuthStore });

// 配置路由
app.use(router);

// 挂载应用
app.mount('#app');

🎮 使用组件

安装和配置完成后，您可以直接在应用中使用 @pt/common-ui 提供的所有组件和指令。

vue

<template>
  <!-- 使用组件示例 -->
  <pt-button type="primary">按钮</pt-button>
  
  <!-- 使用权限指令示例 -->
  <div v-auth="'components:add'">
    只有拥有 components:add 权限的用户才能看到此内容
  </div>
</template>

基础组件

数据展示

Chat

Tools for Agents

🚀 @pt/common-ui 快速上手指南

📦 安装

🔧 基础配置

1️⃣ 在 index.html 中配置应用标识

2️⃣ 在 main.ts 中集成组件库

🎮 使用组件

📚 相关资源

🚀 @pt/common-ui 快速上手指南 ​

📦 安装 ​

🔧 基础配置 ​

1️⃣ 在 index.html 中配置应用标识 ​

2️⃣ 在 main.ts 中集成组件库 ​

🎮 使用组件 ​

📚 相关资源 ​

🚀 @pt/common-ui 快速上手指南

📦 安装

🔧 基础配置

1️⃣ 在 index.html 中配置应用标识

2️⃣ 在 main.ts 中集成组件库

🎮 使用组件

📚 相关资源