Vue如何基于es6导入外部js文件


Posted in Javascript onMay 15, 2020

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

真的写法是怎样?

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

Vue如何基于es6导入外部js文件

代码:

function realconsole(){
alert("hello.thanks use me");
}
export {
realconsole
}

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

Vue如何基于es6导入外部js文件

代码:

<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如何基于es6导入外部js文件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
浅谈vue路径优化之resolve
Oct 13 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
JavaScript onclick事件使用方法详解
May 15 #Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 #Javascript
用Angular实现一个扫雷的游戏示例
May 15 #Javascript
Node.js API详解之 dns模块用法实例分析
May 15 #Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 #Javascript
js实现简单贪吃蛇游戏
May 15 #Javascript
Javascript执行流程细节原理解析
May 14 #Javascript
You might like
一个简单的PHP验证码实现代码
2014/05/10 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
Three.js基础学习教程
2017/11/16 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
layui表格数据重载
2019/07/27 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
Python使用爬虫猜密码
2016/02/19 Python
Python实现计算最小编辑距离
2016/03/17 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
Python字符串及文本模式方法详解
2020/09/10 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
少儿节目主持串词
2014/04/02 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
庆祝儿童节标语
2014/10/09 职场文书
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技