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 相关文章推荐
JQuery 学习笔记 选择器之一
Jul 23 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 Javascript
如何基于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记录日志的实现代码
2011/08/08 PHP
PHP排序算法的复习和总结
2012/02/15 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
Vue中使用vux的配置详解
2017/05/05 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
python调用cmd命令行制作刷博器
2014/01/13 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
物流经理自我评价
2013/09/23 职场文书
写给女生的道歉信
2014/01/14 职场文书
公司前台辞职报告
2014/01/19 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
洗手间标语
2014/06/23 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
抗洪救灾标语
2014/10/08 职场文书
永不妥协观后感
2015/06/10 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python