# Specter PUI

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

## 🚀 快速开始

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

```bash
# 使用 npm
npm create specter-pui my-project

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

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

# 进入项目
cd my-project

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

### 方法 2：直接从 Git 克隆

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

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

```bash
npm install @yxhl/specter-core-vue
```

然后在代码中引入：

```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.项目运行相关命令

```bash
# 安装依赖
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](https://gitee.com/lyj5812/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-app test-my-app
cd test-my-app
npm install
npm run dev
🎯 用户使用方式（发布后）
# 创建新项目
npm create specter-app my-project

# 进入项目
cd my-project

# 安装依赖
npm install

# 启动开发服务器
npm run dev
就像使用 npm create vue@latest 或 npm create vuetify@latest 一样简单！