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的写法，绿色才是正确的
接着是效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue使用WEB自带TTS实现语音文字互转,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
本文通过实例代码给大家介绍了vue和webpack项目构建过程常用的npm命令,需要的朋友可以参考下2018-06-06
Vue export import 导入导出的多种方式与区别介绍
这篇文章主要介绍了Vue export import 导入导出的多种方式与区别介绍，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
vue的应用状态管理提供了mapState、mapGetters、mapMutations、mapActions四个辅助函数，所谓的辅助函数分别对State、Getters、Mutations、Actions在完成状态的使用进行简化2021-10-10
这篇文章主要介绍了electron-vue开发环境内存泄漏问题汇总，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了vue使用websocket及封装过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
使用Element的InfiniteScroll 无限滚动组件报错的解决
这篇文章主要介绍了使用Element的InfiniteScroll 无限滚动组件报错的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了Vue3计算属性是如何实现的，对于任何包含响应式数据的复杂逻辑，我们都应该使用计算属性，更多相关内容需要的小伙伴可以参考一下2022-08-08
这篇文章主要为大家介绍了Vue-router的嵌套路由，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
路由导航守卫提供了一些钩子函数,可以在路由导航过程中进行拦截和控制,其中,beforeEach 导航守卫可以在每次路由切换前被触发,本文给大家介绍Vue路由守卫详解,感兴趣的朋友一起看看吧2023-10-10
最新评论