vue3-print-nb 组件引用

### 如何在 Vue 3 中引入和使用 `vue3-print-nb` 组件

#### 创建 Vue 3 项目并安装依赖
为了开始，在本地环境中创建一个新的 Vue 3 项目[^1]。一旦项目建立完成，通过 npm 或 yarn 安装 `vue3-print-nb` 插件：

npm install vue3-print-nb --save

或者如果偏好使用 yarn:

yarn add vue3-print-nb

#### 配置插件
接着，在项目的入口文件（通常是 main.js 或者 main.ts），注册此插件以便全局可用。

import { createApp } from 'vue'
import App from './App.vue'
// 导入 vue3-print-nb 并将其作为插件添加到应用实例上
import Print from 'vue3-print-nb'

const app = createApp(App)

app.use(Print)
app.mount('#app')

#### 使用组件
现在可以在任何组件内部利用 `<Print>` 标签来包裹想要打印的内容区域，或是调用 `$print()` 方法指定 DOM 节点进行打印操作[^3]。

下面是一个简单的例子展示了如何定义一个按钮触发打印事件：

<template>
  <div id="printContent">
    <!-- 这里放置需要被打印的具体内容 -->
    <h1>我的申请表格</h1>
    <p>这里是更详细的信息...</p>
  </div>

  <button @click="handlePrint">点击打印</button>
</template>

<script setup>
function handlePrint() {
  this.$print("#printContent") // 打印具有给定 ID 的元素
}
</script>

以上就是关于怎样在 Vue 3 应用程序中集成与运用 `vue3-print-nb` 来达成页面部分内容打印目的的方法介绍[^4]。