vue文件中如何import引入js文件，并且调用js文件中的方法

vue中引入js文件可以使用 /    ./   ../    这三种方式引入外部js文件。

下面讲解一下这三种的用法。

第一种  /  ：个人理解就是返回到项目根目录，如下图所示。返回到了整个项目的最根部。引入文件就比较繁琐。不过也是可以实现的

第二种  ./  ：这是导入同级目录下的文件，如下图所示

第三种 ../ ：这是导入上一级目录里的文件，如下图

而我此次需要引入文件是上一级的上一级里面的文件，所有只需要重复两次就行 ../../ 这样就可以找到想要的文件了。如下图

这也差不多是整个项目的结构图了。

还有就是vue中js文件中写的方法需要带 export 或者  export default

相同点：

export default 向外暴露的成员，可以使用任意的变量来接收
在一个模块中，export default只允许向外暴露一次
在一个模块中，可以同时使用export default 和 export向外暴露成员

使用export向外暴露成员，只能用{}的形式来接收，这种形式，叫做【按需导出】

export可以向外暴露多个成员，同时，如果某些成员，我们在import的时候不需要，则可以不在{}中定义
使用export导出的成员必须严格按照到处时候的名称，来使用{}按需接收；
如果使用export按需导出的成员想换名称，可以用as进行替换

 导入成组的方法：  import *as tools from './tools'  其中tools.js中有多个export方法

不同点：

 export  导出 ：import {a,b} from './util'  需要加花括号 里面可以是一个或多个（按需导出）

 export default 导出：import a from './util'  不需要加花括号 只能一个一个导入（一个一个的导出）

vue使用：

    Vue.prototype.$tools  = tools

    然后直接调用 this.$tools.method

3.导入css文件

    import 'a.css'

    如果在 .vue文件中那么外面套个style

    <style>

        @import './test.css'

    </style>

4。导入组件

import nam2 from './name2'

import name1 from './name1'

components:{

name1, name2,

}

作者：阿水ovo
链接：https://www.jianshu.com/p/fc8c74ca7ff1
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。