在
Vue 3页面中
引入第三方库有多种常见方法：
### 1. 使用 `npm` 或 `yarn` 安装并
导入
如果
第三方库发布在 `npm` 上，可通过 `npm` 或 `yarn` 进行安装，之后在代码里
导入使用。
例如，安装 `lodash`
库：
```bash
npm install lodash
```
在
Vue 3组件中
导入并使用：
```
vue
<template>
<div>
<!-- 组件内容 -->
</div>
</template>
<script setup>
import _ from 'lodash';
const numbers = [1, 2, 3, 4, 5];
const sum = _.sum(numbers);
console.log(sum);
</script>
```
### 2. 通过 `script` 标签全局
引入
当
第三方库仅提供 `script` 标签
引入方式，且要在全局使用时，可在项目的入口文件（通常是 `index.html`）里添加 `script` 标签。
例如，
引入 `jQuery`：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Vue 3 App</title>
</head>
<body>
<div id="app"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.
js"></script>
<script type="module" src="/src/main.
js"></script>
</body>
</html>
```
在
Vue 3组件中使用：
```
vue
<template>
<div>
<!-- 组件内容 -->
</div>
</template>
<script setup>
// 在组件中使用全局
引入的jQuery
window.$(document).ready(() => {
console.log('jQuery is ready');
});
</script>
```
### 3. 局部
引入第三方库
若
第三方库仅在某一个页面使用，全局
引入会造成资源浪费、页面加载慢，可在需要的组件里局部
引入。
例如，某个组件仅需使用 `moment`
库处理日期：
```bash
npm install moment
```
```
vue
<template>
<div>
<p>{{ formattedDate }}</p>
</div>
</template>
<script setup>
import moment from 'moment';
const formattedDate = moment().format('YYYY-MM-DD');
</script>
```
### 4. 按需
引入
对于一些体积较大的
库，可按需
引入其部分功能，以减少打包体积。
例如，使用 `ant-design-
vue` 组件
库：
```bash
npm install ant-design-
vue
```
按需
引入组件：
```
vue
<template>
<div>
<a-button type="primary">Primary Button</a-button>
</div>
</template>
<script setup>
import { Button } from 'ant-design-
vue';
import 'ant-design-
vue/es/button/style/css';
</script>
```
本文探讨了在优快云和博客园两个平台上文章转载的规范和道德准则，强调了原创作者的权益和尊重知识分享的重要性。文章呼吁读者在转载他人作品时应遵循一定的原则，包括明确标注原文链接、尊重作者版权、不篡改原文内容等，旨在营造一个健康的知识分享环境。
扫一扫
456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
