JRD Tour

一个简单的Vue 3组件库，目前包含一个Button组件。

安装

npm install jrd-tour

使用

全局注册

import { createApp } from 'vue'
import JrdTour from 'jrd-tour'

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

按需引入

import { Button } from 'jrd-tour'

export default {
  components: {
    Button
  }
}

在模板中使用

<template>
  <Button>默认按钮</Button>
  <Button type="primary">主要按钮</Button>
  <Button type="success">成功按钮</Button>
  <Button type="warning">警告按钮</Button>
  <Button type="danger">危险按钮</Button>
  <Button disabled>禁用按钮</Button>
</template>

Button Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | type | String | 'default' | 按钮类型：default, primary, success, warning, danger | | disabled | Boolean | false | 是否禁用 |

Button Events

| 事件名 | 说明 | |--------|------| | click | 点击事件 |

开发

npm install
npm run build

Vue 组件渲染底层原理

1. 编译阶段（构建时/运行时编译）

原始模板：

<template>
  <Button type="primary">点击我</Button>
</template>

编译为渲染函数：

function render() {
  return h('Button', { attrs: { type: 'primary' } }, ['点击我'])
}

2. 运行时阶段

执行渲染函数：

// Vue 直接调用编译生成的 render 函数
const vnode = render.call(componentInstance)
// vnode = { type: 'component', tag: 'Button', props: {...}, children: [...] }

// Vue 处理这个 vnode
patch(null, vnode, container)

patch的过程中，包含组件匹配的逻辑：即根据当前组件的名称（tag: 'Button'），匹配当前组件components配置中的组件定义，最终进行组件的完整渲染。如下即寻找组件定义的逻辑—先找局部注册的组件，再找全局注册的组件

function resolveComponent(name) {
  // 在组件实例的 components 选项中查找
  if (instance.components[name]) {
    return instance.components[name]
  }
  
  // 在全局注册的组件中查找
  if (app._context.components[name]) {
    return app._context.components[name]
  }
  
  return name
}

总结

所以组件库中的组件被消费的逻辑：

组件库中的组件和终端项目中普通的.vue组件一样，组件最终被编译的产物，本质是一个包含渲染逻辑的对象。

只不过终端项目中的组件，是一个.vue文件，在对当前模块进行打包构建时，.vue组件在被当前模块导入之前，会先进行处理，转化为js对象。但对于引入的三方组件库里的组件，已经是处理好的js文件，在当前模块打包构建时，无需再进行转化

库项目package.json解析

{
  // 包名【必须】。发布到 npm 后，其他项目通过这个名字安装和引用当前库
  "name": "jrd-tour",
  // 版本号【必须】。每次发布必须递增。
  "version": "1.0.5",
  // 包描述[可选]，有助于 npm 搜索和理解包的用途。
  "description": "A simple Vue 3 component library",
  // CommonJS 入口文件路径【非必须但重要—如果需要支持 require('jrd-tour')】。
  "main": "dist/index.umd.js",
  // ES Module 入口文件路径【非必须但重要—如果需要支持 import from 'jrd-tour'】
  "module": "dist/index.mjs",
  // 为外部项目提供类型支持的入口文件【非必须但重要—如果需要提供ts支持】
  "types": "dist/index.d.ts",
  "exports": {
    // 主路径导出配置。"."即包的主入口、默认入口；当用户写 import xxx from 'jrd-tour' 时，会匹配这个配置，找到对应的文件
    // 类似于main字段和module字段，但不冲突：
    // * 新工具（如 Node.js 12+、Webpack 5、Vite、Rollup）：会优先读取 exports 字段，只有找不到时才会退回 main/module。
		// * 老工具（如 Node.js 10-、Webpack 4-）：只认 main/module，不识别 exports 字段。
    ".": {
      // 指定外部项目使用 ES Module 语法导入 (import) 时，当前库导出的文件
      "import": "./dist/index.mjs",
      // 类似import，指定外部项目使用 CommonJS 语法导入 (require) 时，当前库导出的文件
      "require": "./dist/index.umd.js",
      // 指定外部项目需要类型信息时，提供ts支持的文件
      "types": "./dist/index.d.ts"
    },
    // 子路径导出配置
    // 允许用户通过 import 'jrd-tour/dist/style.css' 的方式引入样式文件
    "./dist/style.css": "./dist/style.css"
  },
  // 指定发布到 npm 的文件/目录【可选但重要】。能防止无关文件被上传。如下，当前库只发布 dist 目录的内容。
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "vite build && tsc --emitDeclarationOnly",
    // tsc --emitDeclarationOnly命令解析
    // 只生成.d.ts类型声明文件，不生成 JavaScript 文件：TypeScript 编译器会分析你的源代码，生成对应的类型声明文件，但不会生成 .js 文件
		// 不进行 JavaScript 编译：因为你的项目使用 Vite 来构建 JavaScript 代码，所以不需要 TypeScript 编译器来生成 JS 文件
		// 分离关注点：Vite 负责构建 JS/CSS，TypeScript 编译器只负责生成类型声明
    "build:types": "tsc --emitDeclarationOnly"
  },
  "peerDependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@types/node": "^24.0.3",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/runtime-core": "^3.5.17",
    "typescript": "^5.8.3",
    "vite": "^4.0.0"
  }
}