不灭的焱

想知道的是在 Node.js 环境下，如何基于 ES6 模块化规范来开发 Vue3 项目，并希望能看到具体的示例，这是一个很实用的需求，因为 Vue3 本身就全面支持 ES6+ 特性和模块化。

一、环境准备

首先需要搭建支持 ES6 的 Vue3 开发环境，Vue 官方的脚手架 create-vue 已经默认配置好了 ES6 支持，步骤如下：

1. 初始化 Vue3 项目

确保你的 Node.js 版本 ≥ 16.0.0（Vue3 推荐版本），执行以下命令：

# 安装 create-vue（官方脚手架）
npm install -g create-vue
# 创建项目（命名为 vue3-es6-demo）
create-vue vue3-es6-demo

详情如下：

# create-vue vue3-es6-demo

┌  Vue.js - The Progressive JavaScript Framework
│
◆  请选择要包含的功能： (↑/↓ 切换，空格选择，a 全选，回车确认)
│  ◻ TypeScript
│  ◻ JSX 支持
│  ◻ Router（单页面应用开发）
│  ◻ Pinia（状态管理）
│  ◻ Vitest（单元测试）
│  ◻ 端到端测试
│  ◻ ESLint（错误预防）
│  ◻ Prettier（代码格式化）
└

在创建过程中：

• 选择 TypeScript（可选，不选也不影响 ES6 使用）
• 选择 Vue Router/Pinia（可选，示例中会用到）
• 其余选项按需选择，最终完成项目创建。

2. 进入项目并启动

cd vue3-es6-demo
npm install
npm run dev

二、ES6 特性在 Vue3 项目中的核心应用示例

Vue3 项目的源码默认就是 ES6 模块化（使用 import/export 而非 require），以下是核心 ES6 特性的具体使用场景：

1. 模块化（import/export）—— 项目核心

Vue3 项目的入口文件 src/main.js 是 ES6 模块化的典型应用：

// src/main.js（ES6 模块化导入）
import { createApp } from 'vue' // 导入 Vue3 核心方法（ES6 解构赋值）
import App from './App.vue'     // 导入根组件
import router from './router'   // 导入路由（若启用）
import './assets/main.css'

// 创建并挂载应用
createApp(App)
  .use(router) // 使用路由插件
  .mount('#app')

组件的导出示例（src/components/HelloES6.vue）：

<template>
  <div class="hello-es6">
    <h2>{{ msg }}</h2>
    <p>计算结果：{{ calculate(10, 20) }}</p>
    <p>用户信息：{{ user.name }} - {{ user.age }}</p>
  </div>
</template>

<script setup>
// ES6 特性 1：let/const（替代 var）
const msg = 'Vue3 + ES6 开发示例'
let count = 0

// ES6 特性 2：箭头函数
const calculate = (a, b) => a + b

// ES6 特性 3：解构赋值 + 扩展运算符
const userInfo = { name: '张三', age: 25, gender: '男' }
const { name, age } = userInfo // 解构赋值
const user = { ...userInfo, id: 1 } // 扩展运算符

// ES6 特性 4：Promise（异步处理）
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('模拟接口返回数据（ES6 Promise）')
    }, 1000)
  })
}

// ES6 特性 5：async/await（Promise 语法糖）
const getData = async () => {
  const res = await fetchData()
  console.log(res)
}

// 调用异步函数
getData()

// ES6 特性 6：类（Class）
class Person {
  constructor(name) {
    this.name = name
  }
  sayHi() {
    return `你好，我是${this.name}（ES6 Class）`
  }
}

const person = new Person('李四')
console.log(person.sayHi())
</script>

2. 在 App.vue 中引入该组件

<template>
  <HelloES6 />
</template>

<script setup>
// ES6 模块化导入组件
import HelloES6 from './components/HelloES6.vue'
</script>

三、关键配置说明（确保 ES6 生效）

Vue 脚手架已默认配置好以下关键文件，无需手动修改，但可以了解：

1. package.json 中默认包含 "type": "module"（Node.js 识别 ES6 模块的关键）；
2. vite.config.js（Vue3 基于 Vite）内置对 ES6+ 的编译支持，无需额外配置 Babel；
3. 若需兼容低版本浏览器，可在 vite.config.js 中配置 @vitejs/plugin-legacy 插件。

总结

1. Vue3 项目通过官方脚手架 create-vue 初始化后，默认支持 ES6 模块化和所有 ES6+ 特性，核心是使用 import/export 替代 CommonJS 的 require/module.exports；
2. 在 Vue3 的 <script setup> 语法中，可以直接使用 let/const、箭头函数、解构赋值、Promise/async-await、Class 等 ES6 核心特性；
3. Node.js 环境只需保证版本 ≥ 16.0.0，即可完美兼容 Vue3 项目中的 ES6 模块化和特性使用。

启动项目后，你可以在浏览器控制台看到示例中的日志输出，页面上也能展示 ES6 特性的运行结果，直观感受 ES6 在 Vue3 项目中的实际应用。