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

Posted 2020-10-25 莫笑我胡为

 

 

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

真的写法是怎样？

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

 

代码：

[html] view plain copy

 

1. function realconsole(){  
2.     alert("hello.thanks use me");  
3.   
4. }  
5.     export {  
6.         realconsole  
7.     }  

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

代码：

[html] view plain copy

 

1. <template>  
2.     <div class="teslist">  
3.         <button @click="methods1">显示console</button>  
4.     </div>  
5. </template>  
6. <script src="../../lib/myconsole.js"></script>  
7. <script>  
8.     import { realconsole } from \'../../lib/myconsole.js\'  
9.     export default {  
10.         methods:{
11. 　         methods1:function(){  
12.               realconsole();  
13.            }  
14.     }}  
15. </script>  
16. <style>  
17.     .teslist {  
18.     }  
19. </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格式的导出需要注释掉