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 相关文章推荐
收集的10个免费的jQuery相册
Feb 26 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
Nuxt.js实战和配置详解
Aug 05 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使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
jquery 分页控件实现代码
2009/11/30 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
Sea.JS知识总结
2016/05/05 Javascript
javascript事件模型介绍
2016/05/31 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
Python栈类实例分析
2015/06/15 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
简单谈谈Python流程控制语句
2016/12/04 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
python中def是做什么的
2020/06/10 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
最新的咖啡店创业计划书
2013/12/30 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
个人思想政治总结
2015/03/05 职场文书
孔子观后感
2015/06/08 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python