首页 > 其他分享 >Vue 3 项目中导入外部的 <link> 和 <script> 资源

Vue 3 项目中导入外部的 <link> 和 <script> 资源

时间:2024-11-06 22:44:29浏览次数:4  
标签:文件 Vue script JavaScript link import main

在 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.jsmain.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

相关文章

  • 构建使用 Vite 和 Vue 的项目
    构建一个使用Vite和Vue的项目是一项非常实用且快速的方式,能够帮助开发者迅速搭建起一个现代前端应用的基础架构。以下是根据您提供的信息整理出的一个详细的步骤指南,用于指导如何从零开始创建一个Vite+Vue项目。准备工作确保您的计算机已经安装了Node.js。您可以通......
  • javascript函数
    1.1初识函数1.1.1函数的定义1.函数用于封装一段特定功能的代码作用:提高代码的复用性,降低维护的难度(你将实现一个功能多段重复的代码变为一段代码,降低了维护的难度,你将这段代码用一个函数封装,要使用这个功能的时候就调用函数,即可提高代码的复用性)1.1.2函数的定义与使用1.函......
  • 109 基于springboot+vue校内店铺网上订单小程序
    项目介绍校内店铺网上订单小程序分为客户端和服务端登录模块,客户端主要是用户进行登录,用户在校内店铺网上订单小程序中进行注册、登录,可以修改个人信息,还可以查看商品信息,对商品信息进行收藏、评论、立即订购、加入购物车等操作。管理员在服务端可以修改个人信息和密码,可以......
  • flask基于Vue的校园信息共享系统(毕设源码+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容一、选题背景关于校园信息共享系统的研究,现有研究主要以传统的信息管理系统为主,专门针对基于Vue框架构建校园信息共享系统的研究较少。在校园环境......
  • javascript模块 (Module) 简介
    https://blog.csdn.net/chehec2010/article/details/119804381   随着ES6的出现,js模块已经成为正式的标准了。曾经为了解决js模块问题而发展起来的民间秘籍,requireJs(AMD)、SeaJs(CMD)、Node(CommonJs),已经或者不久的将来会成为历史。了解历史也是很重要的,因为正式标准就是......
  • 基于SpringBoot+Vue的学生档案管理系统(源码+LW+调试文档+讲解)
    背景及意义目的档案信息整合与存储:基于SpringBoot+Vue的学生档案管理系统,目的是将学生的各类档案信息进行整合和存储。包括学生的个人基本信息(姓名、性别、出生日期、民族、籍贯等)、学业信息(入学成绩、每学期各科成绩、考试排名、奖惩情况等)、家庭背景信息(家庭成员、......
  • flask基于Vue框架的养生系统(毕设源码+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容基于Vue框架的养生系统毕业设计说明一、选题背景关于养生系统的研究,现有研究主要以传统养生理念的推广和简单的养生知识分享为主,专门针对基于Vue......
  • 前端自学(5)-使用Vue组件库element书写前端代码
    element是饿了么团队研发的,一套为开发者,设计师和产品经理提供的基于Vue2.0的桌面端组件库。官网:Element-网站快速成型工具有了element组件库,开发人员就可以通过CV(复制粘贴。)制作出精美的前端页面。下面是一个简单页面的示例,我将为大家演示如何制作一个这样的页面。1.首......
  • Vue项目中动态路由与权限控制:router.beforeEach的使用及无token重定向登录页
    在现代前端项目中,权限控制是一个非常重要的环节。VueRouter作为Vue官方的路由管理器,为我们提供了强大的路由管理功能。在本文中,我们将探讨如何在Vue项目中使用router.beforeEach钩子函数来实现动态路由权限控制,并在用户未登录时自动重定向到登录页。步骤一:登录并获取Token首......
  • Ruoyi-Vue后端单表user 的CURD 功能代码和测试
    目录一.创建或导入user表二.添加代码1.User2.UserMapper3.UserService4.HelloController5.UserMapper.mxl编辑三.屏蔽新加接口安全防护策略​编辑四.PostMan测试Get查询Post添加Put修改Delete删除五.实验中遇到的问题及解决方案1."error":"NotFound"2.Requiredreque......