Vue中import from的来源及省略后缀与加载文件夹问题

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组件。

总结

以上所述是小编给大家介绍的Vue中import from的来源及省略后缀与加载文件夹，希望对大家有所帮助！

赞 (0)

相关推荐

  • Python import用法以及与from...import的区别

    在python用import或者from...import来导入相应的模块.模块其实就是一些函数和类的集合文件,它能实现一些相应的功能,当我们需要使用这些功能的时候,直接把相应的模块导入到我们的程序中,我们就可以使用了.这类似于C语言中的include头文件,Python中我们用import导入我们需要的模块. eg: 复制代码 代码如下: import sys print('================Python import mode==========================

  • python中import与from方法总结（推荐）

    一.模块&包简介 模块:所谓模块就是一个.py文件,用来存放变量,方法的文件,便于在其他python文件中导入(通过import或from). 包(package): 包是更大的组织单位,用来组织区别管理多个模块文件. import 用来导入模块 from 用于从模块中导入方法(全部或部分),也可用as 重命名导入的方法 二.import&from使用方法 1. import使用方法: *import 模块 [as  别名模块] *import 包.[N包].模块; 注:import 导入

  • python中from module import * 的一个坑

    但还有另外一个问题 - 你以为你修改了某个变量,其实,被from module import *后的那个并没有被更新,非常危险,因为程序有可能还可以正常运行, 只不过结果错了,到了production才被发现就比较惨了. 举个例子: 你定义了一些变量在base模块中: # reference data type class Demo: def __init__(self, name): self.name = name demo = Demo('Demo') # primitive type f

  • Python import与from import使用及区别介绍

    下面介绍下Python import与from import使用,具体内容如下所示: Python程序可以调用一组基本的函数(即内建函数),比如print().input()和len()等函数.Python本身也内置一组模块(即标准库).每个模块都是一个Python程序,且包含了一组相关的函数,可以嵌入到你的程序之中,比如,math模块包含了数学运算相关的函数,random模块包含随机数相关的函数,等等. 一.import语句 在开始使用一个模块中的函数之前,必须用import语句导入该模块.

  • 详解Python中的from..import绝对导入语句

    相对或者绝对import 更多的复杂部分已经从python2.5以来实现:导入一个模块可以指定使用绝对或者包相对的导入.这个计划将移动到使绝对的导入成为默认的细节在其他版本的python中. 我们假设你有一个包目录,像下面这样: pkg/ pkg/__init__.py pkg/main.py pkg/string.py 上面定义了一个包称为 pkg 包含 pkg.main 和pkg.string 两个子模块.考虑在'main.py'中的代码,什么事情会发生如果我们执行语句 import str

  • Vue中import from的来源及省略后缀与加载文件夹问题

    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是

  • Vue import from省略后缀/加载文件夹的方法/实例详解

    目录 简介 省略后缀 说明 官网网址 详解 文件名相同的处理流程 加载文件夹 简介 说明 详解 实例 1. 路由配置中导入layout文件夹 2.layout/index.vue引入目录 3.components/index.js引入各个组件 简介 本文介绍Vue在import时省略后缀以及import文件夹的方法. 省略后缀 说明 可以配置省略后缀,比如:test.js,只用test即可. 官网网址 解析(Resolve) | webpack 中文文档 详解 配置文件:webpack.base

  • C#中调用DLL时未能加载文件或程序集错误的处理方法(详解)

    C#中调用DLL时未能加载文件或程序集错误的处理方法(详解)

    在加载DLL时,出现了如下的异常:未能加载文件或程序集"DMC3000, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"或它的某一个依赖项. 试图加载格式不正确的程序. 经上网查询后,其原因是x64和x86不兼容的问题.即DLL是x64的,但是VS默认生成的目标平台是x86的,因此,两者的不一致导致异常的出现. 其解决办法如下: 项目->属性->生成->目标平台->x64(与dll平台一致) 以上这篇

  • 在Spring Boot中从类路径加载文件的示例

    资源加载器 使用Java,您可以使用当前线程的classLoader并尝试加载文件,但是Spring Framework为您提供了更为优雅的解决方案,例如ResourceLoader. 您只需要自动连接ResourceLoader,然后调用getResource(„somePath")方法即可. 在Spring Boot(WAR)中从资源目录/类路径加载文件的示例 在以下示例中,我们从类路径中加载名为GeoLite2-Country.mmdb的文件作为资源,然后将其作为File对象检索. @Se

  • 在vue中import()语法不能传入变量的问题及解决

    目录 import()语法不能传入变量 解决办法 问题 动态引入import()变量失效 import()语法不能传入变量 解决办法 一定要用变量的时候,可以通过字符串模板来提供部分信息给webpack: 例如import(`./path/${myFile}`), 这样编译时会编译所有./path下的模块,但运行时确定myFile的值才会加载,从而实现懒加载. import(`./path/${myFile}`), 问题 可以用 const cc = () => import('./aa.vue

  • vue中如何简单封装axios浅析

    vue中如何简单封装axios浅析

    把axios注入到Vue中 import axios from 'axios'; Vue.prototype.$axios = axios; import axios from 'axios' axios.defaults.timeout = 5000; //响应时间 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //配置请求头 axios.defaults.withCredenti

  • 详解VUE中常用的几种import（模块、文件）引入方式

    1 引入第三方插件 import echarts from 'echarts' 2 引入工具类 第一种是引入单个方法 import {axiosfetch} from './util'; 下面是写法,需要export导出 export function axiosfetch(options) { } 第二种  导入成组的方法 import * as tools from './libs/tools' 其中tools.js中有多个export方法,把tools里所有export的方法导入 vue中

  • vue中eslintrc.js配置最详细介绍

    本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /** * 参考文档 * [eslint英文文档]https://eslint.org/docs/user-guide/configuring * [eslint中文文档]http://eslint.cn/docs/rules/ */ /** * eslint有三种使用方式 * [1]js代码中通过注释

  • Vue中建立全局引用或者全局命令的方法

    Vue中建立全局引用或者全局命令的方法

    如何在Vue中建立全局引用或者全局命令,具体内容如下 1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到相同模块(或者插件).我们不想每个文件都import 一次模块. 如果是基于vue.js编写的插件我们可以用 Vue.use(...) main.js 2 但是如果想添加一个全局命令,同时又让每个vue的文件都能用到怎么办? 第一步:最好建立一个全局的命令文件例如:directive/directive.js 第二步:利用Vue.directive()建立一个全局

  • 简述vue中的config配置

    在webpack.base.conf文件中配置别名以及扩展名 resolve: { extensions: ['.js', '.vue', '.json', '.styl'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'src': path.resolve(__dirname, '../src'), 'common': path.resolve(__dirname, '../src/common'), 'compo

随机推荐