conorg-vab-plus-sit

v1.0.1

Published

10 months ago

## **📌 项目描述**

0High
0Medium
0Low

conorg.cn

Craft-X 组件库项目依赖解析

📌 项目描述

名称: Craft-X
类型: Vue 3 组件库
构建工具: Vite
文档: VitePress
模块格式: ESM & UMD
目标: 让使用者可以直接使用，不需要额外安装相同的依赖

📌 依赖优化

将 dependencies 中仅用于开发的依赖移动到 devDependencies
组件库核心功能所需的依赖保留在 dependencies
确保使用者不需要重复安装组件库的核心依赖

📌 dependencies（运行时依赖 - 用户安装组件库后仍需要）

这些依赖 会被打包到组件库的最终产物中，使用者无需再次安装。

🚀 1. Vue 相关

| 依赖 | 作用 | | ----- | ------------------------------------------- | | vue | Vue 3 核心库，组件库必须依赖 Vue 运行。 |

🚀 2. 核心功能

| 依赖 | 作用 | | ------------------ | ---------------------------------------------------------------------------------------------------------- | | tinycolor2 | 颜色处理库，用于计算颜色渐变、转换颜色格式等。 | | autoprefixer | CSS 预处理工具，根据目标浏览器列表自动添加浏览器前缀（如 -webkit-、-moz-、-ms-）以提高 CSS 兼容性。 | | crypto-js | 加密库，提供 MD5、SHA256、AES 等加密功能。 | | dayjs | 轻量级日期处理库，代替 Moment.js，处理时间格式化等。 | | lodash-es | Lodash 的 ES 模块版本，提供高性能的工具函数。 | | mitt | 轻量级事件总线（Event Bus），用于组件间通信。 | | sass | SASS/SCSS 预处理器，用于样式管理。 | | semver | 语义化版本管理工具，用于解析版本号。 | | ssh2-sftp-client | SSH/SFTP 客户端库，用于自动化文件上传等。 |

📌 devDependencies（开发依赖 - 仅用于开发，不会被打包）

这些依赖 仅在开发时使用，不会包含在最终的组件库中，因此 使用者无需安装它们。

🚀 1. Vite & 构建工具

| 依赖 | 作用 | | ------------------------ | ---------------------------------------------------------- | | vite | 前端构建工具，用于本地开发和打包组件库。 | | vitepress | Vite 官方的文档生成工具，用于编写组件库文档。 | | @vitejs/plugin-vue | Vue 3 的官方 Vite 插件，让 Vite 正确编译 .vue 组件。 | | @vitejs/plugin-vue-jsx | Vue 3 JSX 支持，让 Vue 组件可以使用 JSX 语法。 |

🚀 2. TypeScript & 类型支持

| 依赖 | 作用 | | ------------------ | ------------------------------------------------------------------- | | typescript | TypeScript 编译器，让组件库支持 TS。 | | @types/crypto-js | CryptoJS 的 TypeScript 类型，保证 crypto-js 代码有类型提示。 | | @types/lodash-es | Lodash-ES 的 TypeScript 类型。 | | @types/node | Node.js API 的类型定义，确保 fs、path 这些 API 有类型提示。 |

🚀 3. Vue 生态 & 组件增强

| 依赖 | 作用 | | ------------------------- | ------------------------------------------------------------------------------------------- | | @vueuse/core | VueUse 核心库，提供丰富的 Vue 组合式 API（如 useDark()、useLocalStorage()）。 | | @vueuse/head | VueUse 的 useHead() 插件，用于动态修改 <head> 标签，如 <title> 和 <meta> 信息。 | | unplugin-auto-import | 自动导入 Vue API（如 ref、computed，无需手动 import）。 | | unplugin-vue-components | 自动注册 Vue 组件，不需要手动 import 组件。 |

🚀 4. CLI & 开发工具

| 依赖 | 作用 | | ----------------------- | ------------------------------------------------- | | inquirer | CLI 交互工具，用于创建 CLI 命令交互。 | | markdown-it-container | Markdown 解析扩展，用于解析 Markdown 代码块。 |

📌 修正后的 `package.json`

{
    "name": "craft-x",
    "private": true,
    "version": "0.0.0",
    "author": "[email protected]",
    "description": "",
    "type": "module",
    "main": "lib/index.umd.js",
    "scripts": {
        "dev": "vite",
        "docs:dev": "vitepress dev docs",
        "docs:build": "vitepress build docs",
        "build": "node scripts/build-lib.js"
    },
    "exports": {
        ".": {
            "import": "./lib/index.es.js",
            "require": "./lib/index.umd.js"
        },
        "./styles": {
            "import": "./lib/index.css",
            "require": "./lib/index.css"
        }
    },
    "files": ["lib", "README.md", "LICENSE"],
    "dependencies": {
        "tinycolor2": "^1.6.0",
        "crypto-js": "^4.2.0",
        "dayjs": "^1.11.13",
        "lodash-es": "^4.17.21",
        "mitt": "^3.0.1",
        "sass": "^1.77.8",
        "semver": "^7.7.1",
        "ssh2-sftp-client": "^11.0.0",
        "vue": "^3.4.29"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.21",
        "vite": "^6.0.2",
        "vitepress": "^1.6.3",
        "@vitejs/plugin-vue": "^5.1.2",
        "@vitejs/plugin-vue-jsx": "^4.0.1",
        "typescript": "^5.2.2",
        "@types/crypto-js": "^4.2.2",
        "@types/lodash-es": "^4.17.12",
        "@types/node": "^20.16.5",
        "@vueuse/core": "^11.0.3",
        "@vueuse/head": "^2.0.0",
        "unplugin-auto-import": "^0.18.0",
        "unplugin-vue-components": "^0.27.3",
        "inquirer": "^12.4.2",
        "markdown-it-container": "^4.0.0"
    }
}

使用

npm

cnpm install conorg-vab-plus-sit

main.ts

import VabPlus from 'conorg-vab-plus-sit'
import 'conorg-vab-plus-sit/styles'
app.use(VabPlus)

html 全量


    <script src="http://vab-ui.conorg.cn/remote-comps/v1.0.1/index.umd.js"></script>

    <link
      rel="stylesheet"
      href="http://vab-ui.conorg.cn/remote-comps/v1.0.1/index.css"
    />

    window.renderElement({
        id: "button-container",
        component: "vab-button",
    });

html 按需

   <script src="http://vab-ui.conorg.cn/remote-comps/v1.0.7/button/index.umd.js"></script>

    <link
      rel="stylesheet"
      href="http://vab-ui.conorg.cn/remote-comps/v1.0.7/button/index.css"
    />
    
    window.renderElement({
        id: "button-container",
        component: "vab-button",
    });