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

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

一.引入外部CSS样式文件

1. 在app.vue中

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

@import "../static/font/iconfont.css";

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

2.@import改成引入外部样式

二. 引入外部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 })

},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

时间： 2019-01-05

这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font

在开发vue的项目(我使用的是vue2),需要添加js,虽然可以通过npm install 安装插件,但是如果有一些插件并没有开源,这时候我们只有脸上宽面条了.所以我更倾向于在webpack中引入外部js文件. 1.直接引用 Note:(红色标注部分) 位置1:将页面中需要用到的js,引入进来,from 后面是该js所在的文件目录: 位置2:需要用到位置一中定义的变量Swiper; 位置3:为防止eslint严格模式下报错,需要将位置2定义的swiper再次调用一下: 以上这篇webpack+v

最近在碰到有同学问我,vue父组件怎么使用外部对象,具体例子如下: 有组件a:

// componet a ... methods: { onClick(evt) { // doSomething 这里只能拿到 mouseEvent this.outsideClickHandler(evt); // 调用外部处理函数 } } ... 有组件B,引用组件a,并传入outsideClic

vue-cli中已经内置配置好了sass 以及lass的配置.如果需要的话直接下载两个模块就可以了,webpack它会根据 lang 属性自动用适当的加载器去处理. 如果需要使用sass,则安装: npm install node-sass --save-dev npm install sass-loader --save-dev 如果需要使用less,则安装: npm install less --save-dev npm install less-loader --save-dev sass

html

• 

  为Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可) 第一步:在src目录下的main.js,也就是入口文件里面添加下面代码 require('!style-loader!css-loader!less-loader!./common/less/index.less') 在Vue1.0版本中可以这样写,但是2.0版本中就不行,会报错提示解析错误 require('./common/less/index.less') 第二步:在build目录下的webpack.base.c

  今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ,也可以实现绑定,但都不是动态绑定,动态绑定肯定是根据用户的某个操作实现动态的修改样式 先看下面的第一个小实例: 源代码 html 文件: 请看注释

  以前做遮罩层都是写最小高度来占满屏,但是总会出现问题,也没改变,今天一个人在交流群上问这个时,看到一个回答解决了我这一个bug,学到了,现在记录一下样式.

  本文实例讲述了Laravel框架Auth用户认证操作.分享给大家供大家参考,具体如下: (1)生成Auth所需文件 打开phpstorm的命令行: php artisan make:auth 生成成功后,打开web.php, 发现多了如下代码: Auth::routes(); Route::get('/home', 'HomeController@index')->name('home'); 然后访问 localhost/laravel/public/home就可以看到登录页面, 如果样式不正常

  本文实例讲述了Laravel5.1 框架分页展示实现方法.分享给大家供大家参考,具体如下: Laravel为我们提供了一套分页的逻辑,我们无需自己实现分页逻辑,只需要执行几个简单的方法就能实现漂亮的分页. 1 simplePaginate 这是一种只显示上一页下一页的样式分页,我们来看看怎么用: class PostController extends Controller { public function index() { // $posts = Post::simplePaginate(

  本文实例讲述了vue学习笔记之作用域插槽.分享给大家供大家参考,具体如下: Vue.component('child', { data: function () { return { list: [1, 2, 3] } }, template: '
• {{item}}

本文实例讲述了vue路由守卫+登录态管理.分享给大家供大家参考,具体如下: 在路由文件需要守卫的path后面加上meta {path: '/home',component: home,meta:{requireAuth:true}} 在main.js里面加上 //路由守卫 router.beforeEach((to, from, next) => { console.log(to); console.log(from); if (to.meta.requireAuth) { // 判断该路由是否

本文实例讲述了vue.js计算属性computed用法.分享给大家供大家参考,具体如下: 需求:数据msg值为12345,我们现在需要反向显示成54321. 在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.在模板中放入太多的逻辑会让模板过重且难以维护.例如:

&l

本文实例讲述了Zend Framework框架Zend_Db_Table_Rowset用法.分享给大家供大家参考,具体如下: 1. 简介 Zend_Db_Table_Rowset是 Zend_Db_Table_Row对象集合的迭代器.通常来说,你不可以自己实例化Zend_Db_Table_Rowset, 而是通过调用Zend_Db_Table::find()方法或者fetchAll()方法将Zend_Db_Table_Rowset作为 结果数据返回过来.接下来就可以遍历Zend_Db_Table

本文实例讲述了thinkphp5.1框架容器与依赖注入.分享给大家供大家参考,具体如下: 容器----/thinkphp/library/think/Container.php 依赖注入:将对象类型的数据,以参数的方式传到方法中(解决向类中的方法传对象的问题) 绑定一个类到容器: public function bindClass() { //把一个类放到容器中:相当于注册到容器中 \think\Container::set('tmp(别名)','\app\common\Temp(实例)');