Vue项目中如何引入外部js文件，并使用其中定义的函数

  Vue项目中如何引入外部js文件，并使用其中定义的函数

  一些常用的功能函数，我们希望将其封装起来放入一个外部JS文件中，好方便我们在需要的时候使用。vue可以使用import指令引入外部文件引入外部js文件，但是作为新手，在使用过程中难免会导致很多错误，这里就将我遇到的一些问题做一下总结

  编写外部js文件

  这个比较简单，就正常将我们需要使用的功能函数安装js格式写入js文件即可

  需要注意的是，当我们希望在vue项目中使用其中的函数时，我们需要在js文件中将我们的功能函数用export抛出，下面是一个简单的案列：

  function sayMsg(msg){

  console.log(msg);

  }

  export { //关键

  sayMsg

  }

  VUE中引入外部js

  使用import from引入你写好的js文件，这个时候需要注意import后面跟的是我们需要使用的函数，必须放在{ }中引入外部js文件，不放在{ }内会提示找不到该函数。函数名字必须和你在js文件中定义和export{}抛出的名字一致。

  import {sayMsg} from '../../common/sayMsg.js'

  1

  如何使用该函数

  前面我们已将sayMsg函数从js文件中导入vue项目中，这个时候使用它直接调用即可，像下面这样：(函数前面不需要加this,通常在vue项目中定义的函数在调用时要在前面加上this,但是这里不需要，加上会报错)

  sayMsg('Hello World!');

  1

  问题总结

  一个就是在js文件中没有用export{}抛出函数

  在引用时没有使用{}将函数名括起来

  在使用的时候在前面加上了this