如果想用 Vue.js 开发一个项目，最推荐的方式就是使用 Vue CLI。Vue CLI 是 Vue.js 官方提供的一款脚手架工具，它可以帮你快速搭建项目结构，省去许多重复劳动。今天我会带你从零开始，用 Vue CLI 创建你的第一个 Vue 项目，简单、高效、零压力！
一、什么是 Vue CLI？
Vue CLI 的全称是 Vue Command Line Interface，简单来说就是一个命令行工具。它的主要功能是帮助我们快速初始化一个 Vue.js 项目，包括以下优点：
- 自动生成项目结构，开箱即用。
- 提供一系列开发工具，比如热更新、打包优化。
- 支持插件扩展，比如路由、状态管理、PWA 等。
- 让开发过程更加高效！
一句话，Vue CLI 是你用 Vue 开发项目的好帮手。
二、安装 Vue CLI
1. 安装 Node.js
使用 Vue CLI 的前提是安装 Node.js。你可以前往 Node.js 官方网站 下载并安装最新的稳定版。安装完成后，打开终端（或命令提示符），输入以下命令来检查是否安装成功：
node -v
npm -v
如果能看到版本号，那说明安装成功了。
2. 全局安装 Vue CLI
在终端中运行以下命令来安装 Vue CLI：
npm install -g @vue/cli
安装完成后，可以用以下命令确认是否安装成功：
vue --version
如果显示版本号，比如 @vue/cli 5.x.x，那就大功告成了！
三、用 Vue CLI 创建项目
现在让我们动手创建一个 Vue 项目！只需简单几步就能完成。
1. 运行创建命令
在终端中运行以下命令：
vue create my-vue-app
my-vue-app 是你的项目名称，你可以换成任何名字，比如 hello-world 或 my-first-project。
2. 选择配置方式
运行命令后，Vue CLI 会让你选择项目的配置方式。通常有两种选择：
- Default ([Vue 3] babel, eslint)：这是默认配置，适合新手，快速上手。
- Manually select features：如果你有经验，可以选择自己定制配置，比如是否使用 Vue Router、Vuex，甚至测试框架。
我们这里选择默认配置，输入回车即可。
3. 等待安装完成
Vue CLI 会自动下载依赖包并生成项目文件。这可能需要几分钟，具体取决于你的网络速度。
安装完成后，你会看到类似如下的信息：
🎉 Successfully created project my-vue-app.
👉 Get started with the following commands:$ cd my-vue-app$ npm run serve
4. 进入项目并启动开发服务器
按照提示，输入以下命令：
cd my-vue-app
npm run serve
运行后，你会看到终端输出一些信息，比如：
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.x.x:8080/
打开浏览器访问 http://localhost:8080/，恭喜！你已经成功运行了第一个 Vue.js 项目！🎉
四、项目结构解析
进入项目文件夹后，你会发现 Vue CLI 已经帮你生成了完整的项目结构：
my-vue-app/
├── node_modules/ # 项目依赖
├── public/ # 静态资源
├── src/ # 项目源代码
│ ├── assets/ # 资源文件（如图片、样式）
│ ├── components/ # Vue 组件
│ ├── App.vue # 根组件
│ ├── main.js # 项目入口文件
├── .gitignore # Git 忽略文件配置
├── package.json # 项目配置文件
├── README.md # 项目说明
重点关注 src/ 文件夹，这是你主要开发的地方。特别是 App.vue，它是整个项目的根组件。
五、修改项目内容
我们可以尝试修改项目来体验 Vue 的魅力。打开 src/App.vue 文件，你会看到默认的代码如下：
<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
}
</script>
你可以修改 <HelloWorld> 组件的内容，或者直接把它换成一句简单的文字：
<template><div id="app"><h1>欢迎来到我的第一个 Vue 项目！</h1></div>
</template>
保存文件后，浏览器会自动刷新页面，显示最新的内容。
六、安装插件扩展功能
Vue CLI 提供了很多插件，可以通过以下命令安装，比如 Vue Router（路由管理）：
vue add router
按照提示选择设置后，Vue CLI 会自动为你的项目添加路由支持。
七、总结
今天我们学习了如何用 Vue CLI 创建项目：
- 安装 Node.js 和 Vue CLI。
- 使用
vue create命令生成项目。 - 启动开发服务器查看项目效果。
- 修改项目内容，感受 Vue 的动态性。
Vue CLI 是一个强大的工具，它让我们能专注于编写代码，而不用担心复杂的配置问题。如果你还没有试过，赶紧动手试一下吧！
