# Specter Core Vue

A Vue 3 + Vuetify 3 component library with built-in utilities and composables.

## NPM 包安装与使用

### 安装

```bash
npm install @your-username/specter-core-vue
# 或
yarn add @your-username/specter-core-vue
# 或
pnpm add @your-username/specter-core-vue
```

### 完整引入

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import SpecterCoreVue from '@your-username/specter-core-vue'
import '@your-username/specter-core-vue/dist/style.css'

const app = createApp(App)
app.use(SpecterCoreVue)
app.mount('#app')
```

### 按需引入组件

```vue
<script setup>
import { VtkStepper, VtkMessage } from '@your-username/specter-core-vue'
</script>

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

### 使用工具类

```javascript
import { storage, request, message, useVtk } from '@your-username/specter-core-vue'

// 使用 storage
storage.set('key', { name: 'test' })
const data = storage.get('key')
storage.clear()

// 在 setup 中使用 useVtk
const vtk = useVtk()
vtk.storage.set('user', { name: '张三' })
```

---

## 一、项目开发配置

### 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) 参考其整体布局，改进内部页面样式；