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 相关文章推荐
超级退弹代码
Jul 07 Javascript
javascript控制frame,iframe的src属性代码
Dec 31 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
如何用JavaScript学习算法复杂度
Apr 30 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 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
JavaScript基础重点(必看)
2016/07/09 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Pyhton中防止SQL注入的方法
2015/02/05 Python
详解Python self 参数
2019/08/30 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
详解python datetime模块
2020/08/17 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
幼儿教育感言
2014/02/05 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
全国文明单位申报材料
2014/05/31 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
起诉书范文
2015/05/20 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书