Vue 组件(.vue 文件)能够被直接引入是因为 Vue CLI 的构建配置默认处理它们为单文件组件,即使没有显式地使用
export
。而对于普通的 JavaScript 文件(.js 文件),你需要显式地导出你想要在其他地方使用的实体。
在 Vue 项目中,组件(.vue 文件)和 JavaScript 模块(.js 文件)的处理方式略有不同。
Vue 组件(.vue 文件)
Vue 组件默认是通过 Vue 单文件组件(Single File Components, SFCs)的方式来定义的,即使你没有在组件中使用
export
语句,Vue CLI(或其他构建工具,如 Vite)在构建过程中会自动将每个.vue
文件视为一个默认导出的模块。这意味着你可以直接在其他地方通过import
语句引入它们,而不需要显式地使用export default
。
例如,即使你的 MyComponent.vue
文件中没有 export default
,你也可以这样引入它:
import MyComponent from './components/MyComponent.vue';
这是因为 .vue
文件被 Webpack(或其他打包工具)处理时,会自动应用默认导出。
JavaScript 模块(.js 文件)
对于普通的 JavaScript 文件(.js 文件),如果你想要在其他文件中使用它们的内容(如变量、函数、类等),则必须显式地使用
export
(对于导出多个实体)或export default
(对于默认导出的单个实体)。
例如,如果你有一个 helper.js
文件,并且想要导出一个函数:
// helper.js
function sayHello() {
console.log('Hello!');
}
export default sayHello; // 显式默认导出
然后你可以在其他文件中这样引入它:
import sayHello from './helper.js';
如果你没有在 helper.js
中使用 export
或 export default
,那么在其他文件中尝试 import
它时,你会得到一个错误,因为没有任何东西被导出供你导入。