在 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 文件。
标签:文件,Vue,script,JavaScript,link,import,main From: https://blog.csdn.net/2301_76541209/article/details/143406333