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 相关文章推荐
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
屏蔽Flash右键信息的js代码
Jan 17 Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 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中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
js精度溢出解决方案
2012/12/02 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
python实现文件分组复制到不同目录的例子
2014/06/04 Python
详解Python的Django框架中的通用视图
2015/05/04 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
教师求职自荐信范文
2015/03/04 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
关于的python五子棋的算法
2022/05/02 Python
数据设计之权限的实现
2022/08/05 MySQL