vue使用import来引入组件的注意事项
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不可以省略后缀
那么,若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组件。
---------------------
原文:https://blog.csdn.net/fyyyr/article/details/83657828
最新文章
- (temp)catch ip
- shellinabox基于web浏览器的终端模拟器
- C语言小练习一
- 移植SlidingMenu Android library,和安装example出现的问题解决
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- Win7如何快速修复系统
- Java 原始数据类型转换
- css样式-表格优化
- winform的Textbox设置只读之后ForeColor无效的解决方法
- Canvas rotate- 旋转
- 《并行程序设计导论》——Pthreads
- 【R语言系列】作图入门示例一
- C语言检查ip是否合法
- 全球排名第一的开源ERP Odoo v12 最新一键安装体验版正式发布
- pymysql的使用
- MVC模式和Django中的MVT模式
- vue day6 分页显示
- linux权限管理之进程掩码
- Angular4.x 引入第三方 JS
- 【Kafka】Kafka为什么要加入分区的概念
热门文章
- spring4声明式事务--01注解方式
- springsource-tool-suite插件的在线安装
- Word、rss、HTML解析等dll
- SharePoint 2007——内容管理之归档篇
- 数据结构&;堆&;heap&;priority_queue&;实现
- 使用nginx替换Ingress
- ajax执行失败原因
- 多线程之Lock
- 递归计算一个目录的大小【os.wallk()】
- U盘安装咱中国人自己的操作系统UbuntuKylin14.04LST(超具体原创图文教程)