也许大家都是使用习惯了es5的写法喜欢直接用《Script》标签倒入js文件，但是很是可惜，这写法。在es6，或则说vue环境下不支持
真的写法是怎样？
首先。我们要改造我们要映入的外部js文件，改成下面这个格式。主要是红色方块内部代码，我们需要将我们的模块“抛出”，让人能获取到
代码：
- function realconsole(){
- alert("hello.thanks use me");
- }
- export {
- realconsole
- }
其次，到我们的寄主那里，我们需要导入，仿造其他的文件，写法是这样的：
代码：
- <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的写法，绿色才是正确的
接着是效果图
二.直接引入的 不能用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格式的导出需要注释掉