您的位置: 首页  >  文章  >  vue如何导入外部js文件（es6）

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

分类: 文章 • 2023-03-07 08:54:27

原文链接：https://blog.****.net/hushilin001/article/details/76301368/


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


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

代码：

[html] view plain copy
  1. function realconsole(){  
  2.     alert("hello.thanks use me");  
  3.   
  4. }  
  5.     export {  
  6.         realconsole  
  7.     }  

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

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

代码：

[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:{methods1:function(){  
  11.         realconsole();  
  12.         }  
  13.     }}  
  14. </script>  
  15. <style>  
  16.     .teslist {  
  17.     }  
  18. </style>  

注意红色叉的部分，那是我们es5的写法，绿色才是正确的

接着是效果图

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


相关推荐