当前位置：首页 > news >正文

ES6 import语法

news 2025/11/9 10:11:41

from 和 import 是 ES6 模块系统的语法，用于导入和导出 JavaScript 模块。让我详细解释这些语法在 Vue 中的各种用法。

📦 基本导入语法

1. 命名导入 (Named Imports)

// 从 Vue 中导入特定的 API
import { ref, reactive, computed } from 'vue'// 从 Vue Router 中导入
import { useRouter, useRoute } from 'vue-router'// 从工具库中导入
import { debounce, throttle } from 'lodash-es'

2. 默认导入 (Default Import)

// 导入 Vue 组件（.vue 文件通常使用默认导出）
import HelloWorld from './components/HelloWorld.vue'
import App from './App.vue'// 导入第三方库的默认导出
import axios from 'axios'
import _ from 'lodash'

3. 混合导入

// 同时导入默认导出和命名导出
import Vue, { createApp } from 'vue'
import axios, { isCancel } from 'axios'

🎯 在 Vue 组件中的实际应用

组合式 API (Composition API)

<template><div><p>{{ count }}</p><p>{{ doubled }}</p><button @click="increment">增加</button></div>
</template><script setup>
// 从 Vue 导入需要的 API
import { ref, computed, onMounted } from 'vue'
// 导入其他工具
import { useRouter } from 'vue-router'
import { apiClient } from '@/utils/api'// 使用导入的 API
const count = ref(0)
const doubled = computed(() => count.value * 2)
const router = useRouter()const increment = () => {count.value++
}onMounted(() => {console.log('组件挂载完成')
})
</script>

选项式 API (Options API)

<script>
// 导入需要的功能
import { apiService } from '@/services/api'
import { validationMixin } from '@/mixins/validation'export default {// 注册混入mixins: [validationMixin],data() {return {message: 'Hello Vue!'}},methods: {async fetchData() {// 使用导入的 API 服务const data = await apiService.getData()return data}}
}
</script>

🔧 常见的导入路径模式

1. 相对路径导入

// 同一目录下的文件
import MyComponent from './MyComponent.vue'
// 上级目录
import Utils from '../utils/helpers.js'
// 深层嵌套
import Config from '../../../config.js'

2. 绝对路径导入（需要配置）

// 使用 @ 别名（通常指向 src 目录）
import HelloWorld from '@/components/HelloWorld.vue'
import store from '@/store'
import router from '@/router'// 使用 ~ 别名
import styles from '~/assets/styles/main.css'

3. 包导入

// 从 node_modules 导入
import Vue from 'vue'
import axios from 'axios'
import { createPinia } from 'pinia'

⚙️ 路径别名配置

Vite 配置 (vite.config.js)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'export default defineConfig({plugins: [vue()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url)),'~': fileURLToPath(new URL('./src', import.meta.url)),}}
})

Vue CLI 配置 (vue.config.js)

const { defineConfig } = require('@vue/cli-service')
const path = require('path')module.exports = defineConfig({configureWebpack: {resolve: {alias: {'@': path.resolve(__dirname, 'src'),'~': path.resolve(__dirname, 'src')}}}
})

🔄 动态导入

1. 懒加载组件

<template><div><Suspense><template #default><AsyncComponent /></template><template #fallback><div>加载中...</div></template></Suspense></div>
</template><script setup>
import { defineAsyncComponent } from 'vue'// 动态导入组件（懒加载）
const AsyncComponent = defineAsyncComponent(() =>import('./components/AsyncComponent.vue')
)
</script>

2. 条件导入

// 根据条件动态导入
const loadPlugin = async () => {if (condition) {const { pluginA } = await import('./plugins/pluginA.js')return pluginA} else {const { pluginB } = await import('./plugins/pluginB.js')return pluginB}
}

📁 索引文件导入模式

使用 index.js 统一导出

// src/components/index.js
export { default as Button } from './Button.vue'
export { default as Input } from './Input.vue'
export { default as Modal } from './Modal.vue'// 然后在组件中导入
import { Button, Input, Modal } from '@/components'

批量导入

// 批量导入所有模块
const modules = import.meta.glob('./components/*.vue')// 或者立即导入
const modules = import.meta.glob('./components/*.vue', { eager: true })

🛠️ 实际项目示例

完整的组件导入示例

<template><div class="user-dashboard"><Header /><Sidebar /><main><UserProfile :user="user" /><ActivityFeed :activities="activities" /></main><NotificationCenter /></div>
</template><script setup>
// 从 Vue 导入组合式 API
import { ref, reactive, onMounted, computed } from 'vue'// 从路由库导入
import { useRoute, useRouter } from 'vue-router'// 从状态管理导入
import { useUserStore } from '@/stores/user'// 导入工具函数
import { formatDate, debounce } from '@/utils/helpers'// 导入子组件
import Header from '@/components/layout/Header.vue'
import Sidebar from '@/components/layout/Sidebar.vue'
import UserProfile from '@/components/user/UserProfile.vue'
import ActivityFeed from '@/components/activity/ActivityFeed.vue'
import NotificationCenter from '@/components/notification/NotificationCenter.vue'// 使用导入的功能
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()const user = ref(null)
const activities = ref([])// 计算属性
const userName = computed(() => user.value?.name || '游客')// 生命周期
onMounted(async () => {await loadUserData()
})
</script>