如何使用Vue3创建Vue CLI项目

# 如何使用Vue3创建Vue CLI项目

Vue.js 是一个渐进式的前端框架，Vue 3 作为最新主要版本，带来了更好的性能、更小的体积和更强大的组合式 API。本文将详细介绍如何通过 Vue CLI 快速搭建 Vue 3 项目。

## 环境准备

在开始之前，请确保你的开发环境已满足以下要求：

1. **Node.js**  
   需要安装 Node.js 12.x 或更高版本。可通过以下命令检查版本：
   ```bash
   node -v

1. npm 或 yarn
   推荐使用 npm（随 Node.js 安装）或 yarn 作为包管理工具：

   npm -v
   yarn -v
   

2. Vue CLI
   全局安装 Vue CLI（如果已安装旧版本，建议先卸载再安装最新版）：

   npm uninstall -g vue-cli  # 卸载旧版
   npm install -g @vue/cli  # 安装新版
   vue --version            # 验证安装（需 4.5.0+）
   

创建 Vue 3 项目

步骤 1：初始化项目

运行以下命令创建新项目（替换 my-project 为你的项目名）：

vue create my-project

步骤 2：选择预设配置

在交互式界面中： 1. 选择 “Manually select features”（手动选择特性）。 2. 勾选所需功能（如 Babel、Router、Vuex 等）。 3. 确保选择 Vue 3 版本（在 Vue 版本选择步骤中选 “3.x”）。

步骤 3：完成配置

根据提示选择其他配置（如路由模式、CSS 预处理器等），等待依赖安装完成。

项目结构解析

创建完成后，项目目录结构如下：

my-project/
├── node_modules/    # 依赖库
├── public/          # 静态资源
├── src/             # 核心代码
│   ├── assets/      # 图片/字体等
│   ├── components/  # 可复用组件
│   ├── views/       # 页面级组件
│   ├── App.vue      # 根组件
│   └── main.js      # 应用入口
├── .gitignore       # Git 忽略配置
└── package.json     # 项目配置

启动开发服务器

进入项目目录并运行：

cd my-project
npm run serve

访问 http://localhost:8080 即可看到默认页面。

关键文件说明

1. main.js - 应用入口

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

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

Vue 3 使用 createApp 工厂函数替代了原来的 new Vue()。

2. App.vue - 根组件

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

这是应用的根组件，通常包含路由占位符 <router-view>。

添加 Vue 3 新特性

组合式 API 示例

在组件中使用 setup()：

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    return { count, increment }
  }
}
</script>

构建生产环境

运行以下命令生成优化后的代码：

npm run build

输出文件位于 dist/ 目录。

常见问题

1. 版本兼容性问题
   确保所有插件（如 vue-router、vuex）均为支持 Vue 3 的版本：

   npm install vue-router@4 vuex@4
   

2. ESLint 配置
   如需自定义规则，修改 .eslintrc.js 文件。

通过以上步骤，你已经成功创建了一个基于 Vue 3 的项目。接下来可以开始开发你的应用了！ “`

这篇文章涵盖了从环境准备到项目创建的完整流程，并简要介绍了 Vue 3 的特性。如需扩展，可以增加具体功能开发示例或部署相关内容。