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 相关文章推荐
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
基于JavaScript实现随机点名器
Feb 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输出表格的实现代码(修正版)
2010/12/29 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
详解javascript遍历方式
2015/11/11 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
微信小程序实现表单校验功能
2020/03/30 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
wxPython窗口中文乱码解决方法
2014/10/11 Python
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
python实现梯度下降法
2020/03/24 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
运动会入场式解说词
2014/02/18 职场文书
施工安全责任书范本
2014/07/24 职场文书
运动会加油稿100字
2014/09/19 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
初三毕业感言
2015/07/31 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书