Vue How to Import external JS files (ES6)

Perhaps everyone is used to use the es5 of the writing like to directly use the "Script" tag into the JS file, but it is a pity, the wording. In Es6, or in the Vue environment.

What's the real writing?

First of all. We want to transform the external JS file that we want to enter, and change it to the following format. mainly red block internal code, we need to "throw" our module, so that people can get to

Code:

[HTML]View PlainCopy

1. function Realconsole () {
2. Alert ("Hello.thanks use Me");
4. }
5. Export {
6. Realconsole
7. }

Secondly, to our host, we need to import, imitate other documents, the wording is this:

Code:

[HTML]View PlainCopy

2. <template>
4. <div class="teslist">
6. <button @click="METHODS1"> Show console</button>
8. </div>
10. </Template>
12. <script src=". /.. /lib/myconsole.js "></script>
14. <script>
16. Import {Realconsole} from '. /.. /lib/myconsole.js '
18. Export Default {
20. methods:{
22. Methods1:function () {
24. Realconsole ();
26. }
28. }}
30. </Script>
32. <style>
34. . teslist {
36. }
38. </style>

Pay attention to the Red fork part, that is our es5, green is correct

Followed by

Two. Direct introduction of the cannot be downloaded with NPM

Introduction of SWIPER.CSS and Swiper.js files in View.vue

The code in View.vue is written like this:

1234567891011121314151617181920212223242526272829

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

Note that it is necessary to change the code in the Swiper.js, the last side of the change to export the swiper with exports, and the code of the original AMD format of the export needs to comment out

Vue How to Import external JS files (ES6)