Vue.js import使用方法_vue import-CSDN博客

一、import 的基本用法

1. 基本语法

二、Vue.js 中 import 的常见使用场景

四、使用 Vite 和 ES Modules 的优化

五、总结

一、`import` 的基本用法

1. 基本语法

基本形式如下：

JavaScript

import moduleName from 'module-path';

moduleName：导入的模块名或变量名。
module-path：模块的路径或包的名称。

示例：

JavaScript

// 导入默认导出的模块
import Vue from 'vue';
import MyComponent from './components/MyComponent.vue';

二、Vue.js 中 `import` 的常见使用场景

1. 导入 Vue 的核心功能

在 Vue 项目中，通常需要从 Vue.js 包中引入核心功能。例如：

JavaScript

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

createApp 是 Vue 3 中用来初始化应用实例的函数。
App.vue 是主组件文件（根组件）。

2. 导入组件

在 Vue 中，组件是应用的核心模块。我们可以使用 import 加载其他文件中的组件。

2.1 使用相对路径导入

Vue

<template>
  <div>
    <Header />
    <Footer />
  </div>
</template>

<script>
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';

export default {
  components: {
    Header,
    Footer,
  },
};
</script>

2.2 别名路径导入

Vue 项目通常会通过 Webpack 或 Vite 配置路径别名，例如 @ 代表 src 目录。

JavaScript

import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue';

路径别名通常是通过 Vite 或 Webpack 配置实现的：

Vite 配置（vite.config.js）：

JavaScript

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';

expo