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

也许大家都是使用习惯了es5的写法喜欢直接用《Script》标签倒入js文件，但是很是可惜，这写法。在es6，或则说vue环境下不支持真的写法是怎样？首先。我们要改造我们要映入的外部js文件，改成下面这个格式。主要是红色方块内部代码，我们需要将我们的模块“抛出”，让人能获取到代码：[html] viewplain copy

Jarvan大熊

5647人浏览 · 2018-01-29 18:47:13

Jarvan大熊 · 2018-01-29 18:47:13 发布

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

真的写法是怎样？

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

代码：

[html]view plain copy 
   
 function realconsole(){  
     alert("hello.thanks use me");  
   
 }  
     export {  
         realconsole  
     }  

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

代码：

[html]view plain copy 
   
 <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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^