vue文件中如何import引入js文件,并且调用js文件中的方法
vue中引入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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
更多推荐
所有评论(0)