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

在Vue开发中，`import` 语句是ES6模块导入的标准语法，它允许我们从不同位置引入所需组件、库或资源。Vue中使用 `import ... from ...` 的方式来导入模块，`from` 关键字后面指定的是模块的来源。在Vue项目中，这个来源可以是JavaScript（`.js`）、Vue单文件组件（`.vue`）或JSON文件（`.json`）。这些文件类型的设定通常在Webpack配置文件（如`webpack.base.conf.js`）中的 `resolve.extensions` 字段进行定义。 例如： ```javascript module.exports = { resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src') } } } ``` 在这个配置中，`.js`, `.vue`, 和 `.json` 是允许省略的文件后缀。这意味着你可以写 `import test from './test'` 而不需要显式地写出文件类型。但是，对于`.json` 文件，你需要始终指定后缀，因为JSON文件不会被自动推断。 在导入时如果存在多个同名文件，例如 `test.vue` 和 `test.js`，Vue会遵循以下优先级进行加载： 1. JavaScript 文件（`.js`） 2. Vue 单文件组件（`.vue`） 如果你试图导入一个文件夹，Vue会按照特定的规则寻找入口文件： 1. 如果文件夹包含 `package.json` 并且 `package.main` 指定的JavaScript文件存在，那么将使用该文件作为入口。 2. 如果没有 `package.json` 或者 `package.main` 指定的文件不存在，Vue会尝试寻找 `index.js`。 3. 如果上述两个条件都不满足，Vue将寻找 `index.vue` 文件。 例如，在Vue-Element-Admin项目中，有这样一个`Layout.vue` 文件，它导入了 `./components` 文件夹中的三个组件： ```javascript import { Navbar, Sidebar, AppMain } from './components' ``` 在这种情况下，Vue会按照之前提到的规则来加载组件。如果 `components` 文件夹下没有 `package.json`，Vue 将查找 `index.js`。假设 `index.js` 存在并且导出了这3个组件，Vue会根据文件名匹配相应的 `.vue` 文件来加载组件。如果没有同名的 `.vue` 文件，Vue将尝试加载同名的 `.js` 文件。如果找不到任何匹配的文件，导入将失败。 在实际开发中，这种导入方式可以帮助我们组织代码，使得组件、服务或数据的导入更加简洁和高效。理解 `import` 语句的工作原理以及Vue的加载策略，能更好地优化项目结构，提高开发效率，并避免潜在的导入错误。掌握这些细节对于成为一名优秀的Vue开发者至关重要。