vue如何导入外部js文件（es6）

 

 

也许大家都是使用习惯了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的写法，绿色才是正确的

接着是效果图

 

 

 

二.直接引入的 不能用npm下载的

在view.vue中引入swiper.css和swiper.js文件

在view.vue中的代码这样写：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<template> ... </template> <script> import swiper from './swiper.js' import common from '../common.vue' export default {     data(){         return{         }     },     mounted:function(){         this.swippertab();     },     methods:{         swippertab(){              var swiper = new Swiper('.swiper-container', {                 pagination: '.swiper-pagination',                 slidesPerView: 3,                 paginationClickable: true,                 spaceBetween: 30             });         },     }  } </script> <style scoped> @import './swiper.css'; </style>

注意一下的就是在swiper.js中需要改一下代码，在最后面改成用export导出Swiper,并且代码原有的amd格式的导出需要注释掉