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 相关文章推荐
js判断url是否有效的两种方法
Mar 04 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
用JS实现选项卡
Mar 23 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 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中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
Python 文件操作实现代码
2009/10/07 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
python编程实现归并排序
2017/04/14 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
教师评优的个人自我评价分享
2013/09/19 职场文书
历史系毕业生自荐信
2013/10/28 职场文书
团支书的期末学习总结自我评价
2013/11/01 职场文书
教师校本培训方案
2014/02/26 职场文书
机关会计岗位职责
2014/04/08 职场文书
感恩节活动策划方案
2014/05/16 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python