Vue笔记——在Vue项目中引入外部js文件

在普通的项目中,我们可以通过<script src="index.js"></script>来引入外部的js文件,但是在Vue项目中,就不可以使用这种方式了,需要使用ES6语法来引入,同时还要对已有的js文件做相应的修改。
一般情况下,我们引入外部js文件,是要调用js文件中的函数。在Vue项目中,我们首先要使用export命令将这个函数抛出,然后才能在其他的Vue组件中使用import命令引入。同时还要注意外部js脚本的存放位置,不能放在components文件夹下。

一、修改外部js脚本

比如有一个实现MD5加密算法的js脚本文件,代码如下:

var MD5 = function (string) {

    // 这里是MD5的具体实现算法

}

如果我们在其他的Vue组件中想要引入MD5函数,那么要在MD5加密算法的js脚本的最后,使用如下代码,将MD5函数导出:

export {
  MD5
}

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

二、在Vue组件中引入js组件

在组件中使用import { 函数名 } from 外部脚本名来从外部js脚本中导入我们需要使用的函数。比如我们要从md5.js脚本中导入MD5函数,使用以下代码:

import { MD5 } from '../js/md5'

这样,我们就可以在这个Vue组件中正常调用MD5函数了,代码如下:

created: function () {
    console.log(MD5("66666"));
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容...
    忘川慕白阅读 5,968评论 7 113
  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 23,176评论 8 124
  • 她叫于子墨,一个长的再平凡不过的女生,不管在谁的眼中都是那么不起眼,害羞是她最大的特点,只要站在别人面前讲话就会...
    〤twinkle繁夏阅读 278评论 0 0
  • 文/目客 1. 和马拉松结缘是在2014年,当时社区有几十个名额的迷你跑3.5公里的指标,社区就随便找了几十个和我...
    目客阅读 693评论 15 21
  • 9月28日七组作业 8418小雅 别让坏习惯把我们毁了 https://www.jianshu.com/p/c94...
    乱琉璃阅读 117评论 0 0