Specter PUI

雅心互联智能组件库 - 基于 Vue 3 + Vuetify 3 的完整项目模板。

1. 组件库发布 cd d:/yaxin/specter-core-vue/pui-vtks

npm run build

发布

npm publish --access public

2. 脚手架发布 cd d:/yaxin/specter-core-vue/pui

当前版本 1.0.10,可以直接发布

npm publish

新建包

npm create specter-pui-app@latest tempTest0002

更新组件库(当组件库发布新版本后)

npm update @yxhl/specter-pui-vtk

🚀 快速开始

方法 1：使用脚手架创建项目（推荐）

# 使用 npm
npm create specter-pui@latest my-project

# 或使用 yarn
yarn create specter-pui@latest my-project

# 或使用 pnpm
pnpm create specter-pui@latest my-project

# 进入项目
cd my-project

# 安装依赖
npm install

# 启动开发服务器
npm run dev

方法 2：直接从 Git 克隆

git clone https://gitee.com/liangthink/specter-core-vue.git my-project
cd my-project/pui
npm install
npm run dev

方法 3：在现有项目中使用组件和工具类

npm install @yxhl/specter-core-vue

然后在代码中引入：

<script setup>
import VtkStepper from '@yxhl/specter-core-vue/src/components/assembly/VtkStepper.vue'
import storage from '@yxhl/specter-core-vue/src/commons/storage'
</script>

<template>
  <VtkStepper :list="['步骤1', '步骤2', '步骤3']" :el="1" />
</template>

📦 NPM 包说明

本包发布的是完整的项目源代码（不包含 node_modules 和 dist），可以直接作为项目模板使用。

安装后，完整项目位于：node_modules/@yxhl/specter-core-vue/

一、项目开发配置

1.项目运行相关命令

# 安装依赖
pnpm install

# 开发模式
pnpm run dev

# 构建应用
pnpm run build

# 构建 NPM 库
pnpm run build:lib

# 预览构建结果
pnpm run preview

2.项目目录相关说明

| 模块 | 说明 | | ------------- | ---------------------------------------------------- | | assets: | 静态资源文件； | | commons: | 公共工具，含请求等自定义的公共类； | | components: | 公共组件，含静态组件和数据交互组件； | | compositions: | 公共指令，含自定义的公共指令； | | config: | 配置信息，环境变量、多页面配置等； | | plugins: | 系统插件，管理和配置 Vue 应用的各种插件和库； | | router: | 系统路由，包含系统路由，需要实现动态数据读取； | | store: | 状态管理，包含所有的状态管理，按照模块文件单独管理； | | views: | 业务页面，包含系统中业务页面； |

src/assets/
├── css/           // 样式文件
|   ├── settings.scss     // Vuetify 样式变量配置
|   ├── variables.scss    // 全局 SCSS 变量
|   ├── mixins.scss       // SCSS 混合器
|   ├── global.scss       // 全局样式
|   └── themes/           // 主题相关样式
|       ├── light.scss
|       └── dark.scss
├── img/           // 图片资源
│   ├── logo.png
│   ├── background.jpg
│   └── icons/
├── font/            // 字体文件
│   ├── custom-font.woff
│   └── custom-font.woff2
├── icon/            // 图标文件
│   ├── svg-icons/
│   └── favicon.ico
└── data/             // 静态数据文件
    ├── config.json
    └── mock-data.json

3.框架模板页面说明

| 模块 | 说明 | | ------ | ------------------------------------------------------------ | | dash: | 综合性首页； | | datas: | 数据列表（基本列表、商品列表、表格列表）； | | form: | 表单页面，含表单页面展示； | | page: | 公共页面，主要为成功页面、失败页面、异常页面、其他常用页面； | | phone: | 适配手机端的页面模板，主要包括 list/input/view； |

4.框架模板参考说明

yun-admin-ui 参考其整体布局，改进内部页面样式；

📋 完整发布流程总结 1️⃣ 发布源代码包 cd d:/yaxin/specter-core-vue/pui npm publish --access public 2️⃣ 发布脚手架工具 cd d:/yaxin/specter-core-vue/create-specter-app npm publish 3️⃣ 测试使用

等待几分钟让 npm 同步

npm create specter-pui test-my-app cd test-my-app npm install npm run dev 🎯 用户使用方式（发布后）

创建新项目

npm create specter-pui my-project

进入项目

cd my-project

安装依赖

npm install

启动开发服务器

npm run dev 就像使用 npm create vue@latest 或 npm create vuetify@latest 一样简单！