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

在 Vue 中，import 语句可以用于加载其他 JavaScript 模块，以下是详细讲解“Vue中import from的来源及省略后缀与加载文件夹问题”的完整攻略：

1. import from 的来源

在 Vue 中，import 语句的 from 字句需要指定加载目标的来源。来源可以是绝对路径、相对路径或模块名称。

1.1 绝对路径

绝对路径是指从根目录开始的完整路径。在 Vue 中，绝对路径可以用于引用位于 node_modules 文件夹中的模块。例如：

import Vue from '/node_modules/vue/dist/vue.js'

1.2 相对路径

相对路径是指相对于当前模块所在的位置的相对路径。在 Vue 中，相对路径可以用于引用同一文件夹中的模块，或者引用其他文件夹中的模块。例如：

import Foo from './Foo.vue'
import Bar from '../components/Bar.vue'

1.3 模块名称

模块名称是指一个模块的标识符，可以在其他模块中通过该名称进行引用。在 Vue 中，模块名称可以用于引用 node_modules 中的模块。例如：

import Vue from 'vue'

2. 省略后缀与加载文件夹问题

2.1 省略后缀

在 Vue 中，import 语句的文件后缀可以省略，例如：

import Foo from './Foo'

如果省略了文件后缀，Vue 会尝试按照以下顺序搜索文件：.js、.jsx、.ts 和 .tsx。如果都找不到文件，则会抛出一个异常。

2.2 加载文件夹

在 Vue 中，import 语句可以用于加载一个文件夹，例如：

import components from './components'

上述代码将会加载位于 ./components/index.js 文件中的模块。如果 ./components 文件夹中没有 index.js 文件，则会抛出一个异常。

另外，Vue 还支持通过在文件夹中添加 package.json 文件来配置加载方式。例如：

{
  "main": "CustomComponent.vue"
}

上述代码会将 ./CustomComponent.vue 文件作为该文件夹的入口文件。这样，我们就可以使用以下方式来加载该文件夹：

import CustomComponent from './components'