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和 ...
随机推荐
- 安装 asp.net core 出错
I received the same error message on a fresh Windows 10 install, with a fresh Visual Studio 2015 ins ...
- TCP传输的三次握手四次挥手策略
为了准确无误地数据送达目标处,TCP协议采用了三次握手策略.用TCP协议把数据包送出去后,TCP不会对传送后的情况置之不理,它一定会向对方确认是否成功送达.握手中使用了TCP的标志:SYN和ACK 发 ...
- safepoint与UseCountedLoopSafepoints
safepoint: JIT编码时,会在代码中所有方法的返回之前,以及所有非counted loop的循环(无界循环)回跳之前放置一个safepoint(counted loop则没有放置safepo ...
- 【04】AJAX接收服务器返回的数据
AJAX接收服务器返回的数据 readyState 和 status 属性 readyState 属性保存有 XMLHttpRequest 对象的交互状态,从 0 到 4 变化: 0 :未初始化(还没 ...
- C51 使用端口 个人笔记
使用整个端口的8个引脚: 八个引脚,需要8位2进制,2位十六进制 #define P0 led led = 0x3f; //led = ~0x3f; 使用某个端口的某一个引脚 sbit led = P ...
- C51 中断 个人笔记
总架构图 IE寄存器 控制各个中断源的屏蔽与允许 TCON寄存器 各个中断源的请求标志位&有效信号的规定 中断源及其优先级 中断号写程序的时候要用 CPU处理中断三原则 1.CPU同时接收到几 ...
- LA3263 一笔画
题目大意:依次给定多个点(要求第一个点和最后一个点重叠),把前后两个点相连求最后得到的图形的面的个数 根据欧拉定理: 设平面图的顶点数为V,边数为E,面数为F,则V+F-E = 2 这里的E是指如果一 ...
- [K/3Cloud] 创建一个操作校验器
概念: 定义了一个校验器对象,通常是添加到业务单据操作服务插件,用于对操作的合法性进行校验.继承自校验器抽象对象AbstractValidator. 示例: 新建一个类,继承自AbstractVali ...
- mysql 之 Workbench的使用
mysql 之 Workbench的使用 (1)简介 MySQL Workbench是一款专为MySQL设计的ER/数据库建模工具.它是著名的数据库设计工具DBDesigner4的继任者.你可以用My ...
- [bzoj1978][BeiJing2010]取数游戏 game_动态规划_质因数分解
取数游戏 game bzoj-1978 BeiJing-2010 题目大意:给定一个$n$个数的$a$序列,要求取出$k$个数.假设目前取出的数是$a_j$,那么下次取出的$a_k$必须保证:$j&l ...