Vue如何基于es6导入外部js文件
更新时间：2020年05月15日 10:51:42 作者：程序猿的日常1
这篇文章主要介绍了Vue如何基于es6导入外部js文件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
也许大家都是使用习惯了es5的写法喜欢直接用《Script》标签倒入js文件，但是很是可惜，这写法。在es6，或则说vue环境下不支持
真的写法是怎样？
首先。我们要改造我们要映入的外部js文件，改成下面这个格式。主要是红色方块内部代码，我们需要将我们的模块“抛出”，让人能获取到
代码：
function realconsole(){
alert("hello.thanks use me");
}
export {
realconsole
}
其次，到我们的寄主那里，我们需要导入，仿造其他的文件，写法是这样的：
代码：
<template>
<div class="teslist">
<button @click="methods1">显示console</button>
</div>
</template>
<script src="../../lib/myconsole.js"></script>
<script>
import { realconsole } from '../../lib/myconsole.js'
export default {
methods:{methods1:function(){
realconsole();
}
}}
</script>
<style>
.teslist {
}
</style>
注意红色叉的部分，那是我们es5的写法，绿色才是正确的
接着是效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文给大家介绍了使用vuex的state状态对象的5种方式，给大家贴出了我的vuex的结构，感兴趣的朋友跟随脚本之家小编一起学习吧2018-04-04
这篇文章主要介绍了 Vue press 支持图片放大功能,本文通过代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于vuex模块获取数据及方法的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了关于全局安装vue-cli遇到的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了详解vuex的简单使用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
vue+element下日期组件momentjs转换赋值问题解决
这篇文章主要介绍了vue+element下日期组件momentjs转换赋值问题,记录下使用momentjs转换日期字符串赋值给element的日期组件报错问题，需要的朋友可以参考下2024-02-02
这篇文章主要介绍了vue-router的钩子函数用法,结合实例形式分析了vue路由钩子分类及vue-router钩子函数相关使用技巧,需要的朋友可以参考下2019-10-10
本文主要介绍了vue调用摄像头进行拍照并能保存到本地的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue 如何开启或关闭热更新，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
require.js 加载 vue组件 r.js 合并压缩的实例
这篇文章主要介绍了require.js 加载 vue组件 r.js 合并压缩的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-10-10
最新评论