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
vue使用import来引入组件的注意事项的更多相关文章
- 【Vue.js】vue引入组件报错:该组件未注册?
[Vue warn]: Unknown custom element: <QuestionnaireOption> - did you register the component cor ...
- vue 各种 import 引入
vue 各种 import 引入: https://www.jianshu.com/p/784e51ec68ce 阮一峰:http://es6.ruanyifeng.com/#docs/module
- script标签引入vue方式开发如何写组件
title: script标签引入vue方式开发如何写组件 date: 2020-05-08 sidebarDepth: 2 tags: vue 组件 script 标签 categories: vu ...
- 发布自己第一个npm 组件包(基于Vue的文字跑马灯组件)
一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...
- vue脚手架使用swiper /引入js文件/引入css文件
1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...
- vue中的单文件组件
之前都是在html文件中写组件的css,组件的js,组件的模板来演示vue组件的语法,下面介绍以.vue结尾的单文件组件.vue-loader是一个Webpack的loader,可以将单文件组件转换为 ...
- Vue.js父与子组件之间传参
父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...
- vue+elementui按需引入
转载自以下网址,仅作备忘之用:https://www.cnblogs.com/lwj820876312/p/9169457.html 基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 ...
- vue - vue-cli脚手架项目中组件的使用
在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...
随机推荐
- linux面试总结
一.填空题:1. 在Linux系统中,以 文件 方式访问设备 .2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统.3. Linux文件系统中每个文件用 i节点 来标识. ...
- (1)构造方法和方法重载 (2)this关键字 (3)方法的传参和递归调用
1.构造方法和方法重载如: Person p = new Person(); - 声明Person类型的引用p指向Person类型的对象 p.show(); - 调用名字为show()的成员方法 1. ...
- Python成员运算符
Python成员运算符 其他语言没有,是否包含运算符,主要应用在字符串或者集合中 测试实例中包含了一系列的成员,包括字符串,列表或元组. #使用场景01:字符串是否包含另外一个字符串? str01 = ...
- Eclipse Debug Daemon Thread
Daemon Thread ["http-bio-8080"-exec-2] (Suspended (exception RuntimeException)) ThreadPool ...
- shell基础--shell特殊变量
一.变量列表 二.实验 系统:centos 7 1.特殊变量 [root@~_~ day2]# cat p.sh #!/bin/bashecho '$0:'$0echo '$*:'$*echo '$@ ...
- [luogu3943] 星空
题面 这个题目大意上是这样的:给定一个长度为n的01串, 其中只有k个0, 每次操作时, 从给定的m种长度中选择一种, 选择序列上长度为这种的进行反转操作, 求至少需要多少次操作使得整个串全变为1 ...
- Node.js框架之Egg.js
Node.js是我前段时间接触的一个JavaScript的服务端语言,感觉还是挺有意思的. 也许有人说,你学这么多,学的过来吗?或者说学的太多,专而不精,有必要这样吗? 其实,我个人认为,自从我进入I ...
- java基础二 java的跨平台特性
一:java跨平台的特性: 1.生成不平台无关系的字节码. 2.通过和平台有关的jvm即java虚拟机来执行字节码.jvm不跨平台. 图示: 疑问:1.为什么我们不直接写字节码? 因为字节码只有jvm ...
- 将本地项目托管到github 并预览
本地文件上传到github的步骤 1.先在github上建立一个仓库 2.将此仓库download 3.在此文件夹中git bash here 4.进行如下git操作 git git init git ...
- python logging模块按天滚动简单程序
简单日志按天滚动,加入apsheduler,用crontab模式按小时运行测试: import logging from logging.handlers import TimedRotatingFi ...