vue 加载文件,省略后缀后的加载顺序
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:
里面调用import导入了3个组件:
import { Navbar, Sidebar, AppMain } from './components'
这里,from的路径'./components'就是个文件夹。
于是,按照前面的规则,首先查看文件夹下是否有package.json:
并没有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文件夹:
优先找package.json。不存在。
然后找index.js,不存在。
最后找index.vue,存在。
于是:
export { default as Sidebar } from './Sidebar'
相当于:
export { default as Sidebar } from './Sidebar/index.vue'
这样,Layout.vue就通过加载一个文件夹,获得了3个vue组件。
---------------------
作者:超频化石鱼
来源:CSDN
原文:https://blog.csdn.net/fyyyr/article/details/83657828
版权声明:本文为博主原创文章,转载请附上博文链接!
vue 加载文件,省略后缀后的加载顺序的更多相关文章
- 前自加(++a)与后自加(a++)的差别
自加是自己加1的操作.比如a++ 是a+1 ,变量a变成了 a+1的值. 如果是简单的只做 a++:或者++a的语句,效果是一样的. 但是如果嵌入到复杂的语句中,比如 b = a++: 和 b = + ...
- 如何使用Class和ClassLoader加载文件
很多时候我们都需要在程序中加载各种文件,比如在加载配置文件,加载properties文件,或者只是加载一个文本文件,然后输出其中的内容,我在初学java的时候,就对加载文件非常头疼,今天又遇见了加载文 ...
- Vue中import from的来源--省略后缀与加载文件夹
Vue使用import ... from ...来导入组件,库,变量等.而from后的来源可以是js,vue,json.这个是在webpack.base.conf.js中设置的: module.exp ...
- vue : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\vue.ps1
最近因为电脑太卡,小颖把电脑重装了,重装后再执行 npm install -g @vue/cli 时可能是网络问题,一直不能成功,小颖就把npm指向了淘宝镜像: npm install -g cnpm ...
- vue : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本
问题: 使用命令行安装完成vue/cli后,使用vue ui无法创建demo vue : 无法加载文件 C:\Users\yangx\AppData\Roaming\npm\vue.ps1,因为在此系 ...
- vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)
第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...
- 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件
为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...
- js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...
- 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法 一.CSS和 ...
随机推荐
- c# TcpClient简易聊天工具
说明: TcpClient 链接是一个比较安全稳定的链接,作为聊天或者是数据稳定传输,是比较合适的,下面的代码测试过,如果你吧他放在公网服务器上,也是可以用的 using System; using ...
- C++字符串读入
int read() { ,f=;char ch=getchar(); ;ch=getchar();} +ch-';ch=getchar();} return x*f; } int main() { ...
- codevs4437 YJQ Arranges Sequences
题目描述 Description 神犇YJQ有两个长度均为n的数列A和B,并且A是一个单调不增的数列.他认为这两个数列的优美度为.有一天YJQ很无聊,他把Bi进行重新排列,得到了许多不同的优美度.他想 ...
- codevs——1742 爬楼梯
1742 爬楼梯 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 小明家外面有一个长长的楼梯,共N阶.小明的 ...
- HashMap的工作原理以及代码实现,为什么要转换成红黑树?
原理参考:https://blog.csdn.net/striveb/article/details/84657326 总结: 为什么当桶中键值对数量大于8才转换成红黑树,数量小于6才转换成链表? 参 ...
- Mycat集群方案收集(待实践)
先收集,后续再实践. 我想,市面上开源方案中,涉及到高可用和负载均衡的部署,无论是哪一个产品应用,都基本离不开LVS+Keepalived+HAProxy+Nginx等等. 下面是收集的教程: htt ...
- Servlet处理日期
以下内容引用自http://wiki.jikexueyuan.com/project/servlet/handling-date.html: 使用Servlet的最重要的优势之一是可以使用核心Java ...
- MySQL架构优化实战系列4:SQL优化步骤与常用管理命令
- UVa 340 Master-Mind Hints(猜数字游戏的提示)
题意 猜数字游戏 统计猜的数字有多少个数字位置正确 有多少个数字在答案中出现可是位置不对 每一个字符仅仅能匹配一次 直接匹配每位数 #include<cstdio> #includ ...
- HDD
硬盘 SCSI ★ Host adapter ★ SCSI standard ★ Bus socket ★ Signal fashion ★ SCAM ★ Bus main control ★ Dri ...