Vue中import from的来源及省略后缀与加载文件夹问题


Posted in Javascript onFebruary 09, 2020

Vue使用import ... from ...来导入组件,库,变量等。而from后的来源可以是js,vue,json。这个是在webpack.base.conf.js中设置的:

module.exports = {
 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   '@': resolve('src')
  }
 }
...
}

这里的extensions指定了from后可导入的文件类型。

而上面定义的这3类可导入文件,js和vue是可以省略后缀的:

import test from './test.vue'

等同于:

import test from './test'

同理:

import test from './test.js'

等同于:

import test from './test'

json不可以省略后缀:

import test from './test.json'

省略为:

import test from './test'

则编译出错。

那么,若test.vue,test.js同时存在于同一个文件夹下,则import的导入优先级是:

js>vue

from后的来源除了文件,还可以是文件夹:

import test from './components'

该情况下的逻辑是:

if(package.json存在 && package.main字段存在 && package.main指定的js存在) {
  取package.main指定的js作为from的来源,即使该js可能格式或内容错误
} else if(index.js存在){
  取index.js作为from的来源
} else {
  取index.vue作为from的来源
}

因此若from的来源是文件夹,那么在package.json存在且设置正确的情况下,会默认加载package.json;若不满足,则加载index.js;若不满足,则加载index.vue。

注意加载文件夹的形式,与上面省略后缀的形式是完全相同的。所以一个省略后缀的from来源,有可能是.vue,.js,或者文件夹。

例:

查看Vue-Element-Admin的源码,其中有个Layout.vue:

Vue中import from的来源及省略后缀与加载文件夹问题

里面调用import导入了3个组件:

import { Navbar, Sidebar, AppMain } from './components'

这里,from的路径'./components'就是个文件夹。

于是,按照前面的规则,首先查看文件夹下是否有package.json:

Vue中import from的来源及省略后缀与加载文件夹问题

并没有package.json。

package.json不存在,那么查找index.js。index.js是存在的,于是加载。

打开index.js:

export { default as Navbar } from './Navbar'

export { default as Sidebar } from './Sidebar'

export { default as AppMain } from './AppMain'

可以看到3个export,都没有后缀,所以其类型vue,js和文件夹都是有可能的。

同一级目录下,存在AppMain.vue和Navbar.vue,没有同名js,所以可以判断出这两个都是加载的vue文件,即:

export { default as Navbar } from './Navbar.vue'

export { default as AppMain } from './AppMain.vue'

而Sidebar只有一个文件夹,所以是加载的文件夹。打开Sidebar文件夹:

Vue中import from的来源及省略后缀与加载文件夹问题

优先找package.json。不存在。

然后找index.js,不存在。

最后找index.vue,存在。

于是:

export { default as Sidebar } from './Sidebar'

相当于:

export { default as Sidebar } from './Sidebar/index.vue'

这样,Layout.vue就通过加载一个文件夹,获得了3个vue组件。

总结

以上所述是小编给大家介绍的Vue中import from的来源及省略后缀与加载文件夹,希望对大家有所帮助!

Javascript 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
如何在 Vue 中使用 JSX
Feb 14 Vue.js
如何基于javascript实现贪吃蛇游戏
Feb 09 #Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 #Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 #Javascript
jQuery实现简单聊天室
Feb 08 #jQuery
jquery实现点击弹出对话框
Feb 08 #jQuery
jQuery实现简易聊天框
Feb 08 #jQuery
jquery添加div实现消息聊天框
Feb 08 #jQuery
You might like
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
PHP chop()函数讲解
2019/02/11 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
分享Python开发中要注意的十个小贴士
2016/08/30 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
linux环境下Django的安装配置详解
2019/07/22 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
Python自动化操作实现图例绘制
2020/07/09 Python
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
党员活动日总结
2014/05/05 职场文书
公司担保书范文
2014/05/21 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
培训感想范文
2015/08/07 职场文书
清洁工工作总结
2015/08/11 职场文书
终止合同协议书范本
2016/03/22 职场文书