Vue 3 项目中导入外部的＜link＞和＜script＞资源

CSS 文件单个组件中使用@import语句。全局index.html文件中直接添加<link>标签。JavaScript 文件单个组件中在mounted生命周期钩子中动态加载。全局main.js文件中引入。选择适合你项目需求的方法来导入外部资源。这样可以确保你的 Vue 3 项目能够正确地加载和应用外部 CSS 和 JavaScript 文件。

Channie

4028人浏览 · 2024-10-31 16:53:15

Channie · 2024-10-31 16:53:15 发布

在 Vue 3 项目中，可以通过以下几种方式来导入外部的 <link> 和 <script> 资源：

导入外部 CSS 文件

方法 1：在单个组件中使用 `<style>` 标签

可以在单个 Vue 组件的 <style> 部分使用 @import 语句来导入外部 CSS 文件：

<template>
  <!-- 组件模板 -->
</template>

<script setup>
// 组件逻辑
</script>

<style>
@import url('https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css');
</style>

方法 2：在全局 `index.html` 文件中引入

也可以在项目的 public/index.html 文件中直接添加 <link> 标签：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 App</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
</head>
<body>
  <div id="app"></div>
</body>
</html>

导入外部 JavaScript 文件

方法 1：在单个组件中动态加载

可以在单个 Vue 组件的 mounted 生命周期钩子中动态加载外部 JavaScript 文件：

<template>
  <!-- 组件模板 -->
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://fastly.jsdelivr.net/gh/2308863331/bkyl2d@main/loads.js';
  document.head.appendChild(script);
});
</script>

<style>
@import url('https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css');
</style>

方法 2：在全局 `main.js` 文件中引入

也可以在项目的入口文件 main.js 或 main.ts 中引入外部 JavaScript 文件：

import { createApp } from 'vue';
import App from './App.vue';

// 引入外部 JavaScript 文件
const script = document.createElement('script');
script.src = 'https://fastly.jsdelivr.net/gh/2308863331/bkyl2d@main/loads.js';
document.head.appendChild(script);

createApp(App).mount('#app');

总结

CSS 文件：
- 单个组件中使用 @import 语句。
- 全局 index.html 文件中直接添加 <link> 标签。
JavaScript 文件：
- 单个组件中在 mounted 生命周期钩子中动态加载。
- 全局 main.js 文件中引入。

选择适合你项目需求的方法来导入外部资源。这样可以确保你的 Vue 3 项目能够正确地加载和应用外部 CSS 和 JavaScript 文件。

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

多智能体系统在价值投资中的止损策略：架构师的经验分享

两年实战，我踩了很多坑，总结了5条避坑指南投资是“认知的变现”，而止损是“认知的保护”。多智能体系统不是“魔法”，它只是帮你把“模糊的认知”变成“清晰的决策”——让你在市场恐慌时，不会因为情绪而卖出好公司；在基本面恶化时，不会因为固执而持有垃圾股。如果你是价值投资者，我建议你试试多智能体系统——不是因为它能让你“赚更多钱”，而是因为它能让你“少犯错误”。你有没有过“因为情绪而止损，事后后悔”的经历

2048 AI社区

数据结构——修改单向链表有空头（八）

这里将前节点放在 pWai，后节点放在pNei，设置两个循环，pNei放在内循环，先将第一个节点放在pWai，然后在内循环中判断前节点与后面的节点数据是否重复，有重复的就删除，没有了就进入下一个外循环pWai向后移一位。下标的范围0~stHead.iData，循环定位指定下标前一个节点-->记录，将指定节点扣下来，让前一个节点指向指定节点的下一个节点，然后就可以删除指定节点。void Delete