DDR爱好者之家

Vue中import from的来源及省略后缀与加载文件夹问题
站长资源 2024/11/24 佚名
77 1538
DDR爱好者之家 Design By 杰米

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的来源及省略后缀与加载文件夹，希望对大家有所帮助！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米