vue如何导入外部js文件(es6)

291 阅读1分钟

也许大家都是使用习惯了es5的写法喜欢直接用《Script》标签倒入js文件,但是很是可惜,这写法。在es6,或则说vue环境下不支持

真的写法是怎样?

首先。我们要改造我们要映入的外部js文件,改成下面这个格式。主要是红色方块内部代码,我们需要将我们的模块“抛出”,让人能获取到

web前端全栈资料粉丝福利(面试题、视频、资料笔记、进阶路线)



代码:

function realconsole(){

alert("hello.thanks use me");

}

export {

realconsole

}

其次,到我们的寄主那里,我们需要导入,仿造其他的文件,写法是这样的:



代码:

<template>显示console</button></div>

</template>

<script src="../../lib/myconsole.js"></script>import { realconsole } from'../../lib/myconsole.js'export default {

methods:{methods1:function(){

realconsole();

}

}}.teslist {

}

注意红色叉的部分,那是我们es5的写法,绿色才是正确的

接着是效果图