vue.js引入外部CSS样式和外部JS文件的方法

忘是亡心i 2022-02-13 14:23 437阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

学习Vue.js动画时，需要引入一个animate.css，如何全局引入外部文件呢？

**一.引入外部CSS样式文件**

1. 在app.vue中<style>下直接引入对应的路径

![Image 1][]

image

使用@import引入外部css，作用域是全局的，也可在相应的单vue组件引入，import并不是引入代码到<style></style>里面，而是发起新的请求获得样式资源，并且没有加scoped。

<style scoped>
      @import "../static/font/iconfont.css";
    </style>

注：如果有样式时，应该放在\#app上面引入，不然引入不成功！

2.@import改成<style src=""></style>引入外部样式

![Image 1][]

image

**二. 引入外部JS文件**

1. 一个动画需要的JS库（Velocity.js）

var Velocity = function (string) {
    
        // 这里是Velocity的具体实现算法
    
    }

2.因为我们想在Vue组件中想要引入Velocity函数，那么要在Velocity加密算法的js脚本的最后，使用如下代码，将Velocity函数导出：

export {
      Velocity
    }

注：外部脚本js不要放在components文件夹下，否则会一直报错。可以在src文件夹下新建一个js文件夹，然后将外部js脚本放在这个文件夹下，然后就可以在其他Vue组件中引入该js脚本。

3.在组件中使用`import { 函数名 } from 外部脚本名`来从外部js脚本中导入我们需要使用的函数。

import { Velocity } from '../config/velocity.js'

4. 在Vue组件中正常调用Velocity函数

enter: function (el, done) {
          Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
          Velocity(el, { fontSize: '1em' }, { complete: done })
        },

作者：honey缘木鱼  
链接：https://www.jianshu.com/p/3728525c4d19

[Fundebug]: https://www.fundebug.com/
[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，437人围观）

还没有评论，来说两句吧...

相关阅读

相关引入方式之外部样式表(CSS、HTML)

引入方式之外部样式表(CSS、HTML) <!DOCTYPE html> <html lang="en"> <head> <met

我就是我/ 2023年10月03日 12:34/ 0 赞/ 23 阅读

相关 html引入外部样式

html引入外部样式 \方法一：link引入 ![在这里插入图片描述][20210720092400264.png] \方法二：使用@import @im

缺乏、安全感/ 2023年10月03日 11:26/ 0 赞/ 22 阅读

相关 vue.js引入外部css

可以通过在main.js中全局引入css，如 import './static/css/content.scss' 或者是在vue文件中 script中即JS中

秒速五厘米/ 2022年11月21日 04:10/ 0 赞/ 260 阅读

相关 css引入外部字体

.TTF或.OTF，适用于Firefox 3.5、Safari、Opera .EOT，适用于Internet Explorer 4.0+ .SVG，适用于Ch

落日映苍穹つ/ 2022年09月24日 07:24/ 0 赞/ 248 阅读

相关 CSS中外部样式与导入外部CSS样式文件的区别

1）外部样式是CSS样式中较为理想的一种形式。将CSS样式代码单独地放在一个独立的文件中，由页面进行调用，多个网页可以调用一个外部样式文件，因此可以实现代码的最大化使用及网站文

悠悠/ 2022年07月11日 12:24/ 0 赞/ 271 阅读

相关在 .vue文件的样式文件中如何引入外部的样式文件（.css .less）

一般情况下vue开发的时候都是一个组件一个组件进行开发，每个组件都有自己的样式文件，基本结构如下所示： <template> <div class="te

太过爱你忘了你带给我的痛/ 2022年05月10日 02:36/ 0 赞/ 383 阅读

相关 vue引入外部js文件和scss文件

最近在做一个vue项目，已经有一段时间了。之前对在vue项目如何引入外部的js文件和scss文件一片空白。网上百度也是鱼龙混杂,很少有用的东西。后来自己通过一个线上项目学习到了

￡神魔★判官ぃ/ 2022年04月18日 02:38/ 0 赞/ 452 阅读

相关 vue.js引入外部CSS样式和外部JS文件的方法

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

忘是亡心i/ 2022年02月13日 14:23/ 0 赞/ 438 阅读

相关 vue-引入外部js文件的方法和常量

1、方法调用 a: js文件（static/js/public.js） <table> <tbody> <tr> <td> <p>1</p> <p>2

野性酷女/ 2022年01月16日 11:07/ 0 赞/ 534 阅读

相关 vue.js 引入外部的js文件

js源码： import Vue from 'vue'; let v = new Vue(); function 方法一名称(message) \{ v.$al

Love The Way You Lie/ 2021年11月11日 20:34/ 0 赞/ 499 阅读