vue3引入多个js文件

Vue 3 引入多个 JavaScript 文件通常是为了模块化项目结构和代码复用。在 Vue.js 中，你可以通过以下几种方式导入并使用多个文件：

1. **ES6 模块化** (推荐)：
使用 `import` 和 `export` 关键字来组织模块。例如，在 `main.js` 或 `App.vue` 中引入其他组件或库：

   // 引入外部库
   import axios from 'axios';
   
   // 导出自定义组件
   export default {
     components: {
       CustomComponent
     }
   };

   // 或者在需要的地方导入并使用
   const MyComponent = import('./MyComponent.vue');

2. **CommonJS 标准** (适用于第三方库):
如果第三方库采用 CommonJS 规范，可以使用 `require` 函数：

   // 引入其他 .js 文件
   const axiosInstance = require('axios');

   // 或者导入导出
   const MyModule = require('./MyModule.js');

3. **混合模式 (Webpack 配置)**：
Webpack 可以处理多种模块导入格式。在配置文件中设置 `resolve.modules` 来指定查找模块的位置。

4. **动态导入**:
对于大文件或异步加载，可以使用 `async` 和 `await`：

   // 动态导入大文件
   const lazyLoadData = async () => {
     const data = await import('./bigData.js');
     // 使用数据
   };

无论哪种方式，都要确保在Vue项目的构建工具（如Webpack）支持下工作，并注意管理依赖和避免全局变量污染。