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

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

真的写法是怎样？

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

代码：

[html] view plain copy

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

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

代码：

[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中的代码这样写：

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

原文地址：https://www.cnblogs.com/moxiaowohuwei/p/8462371.html