Vue.js Vue CLI 安装与使用
今天我们来聊聊 Vue CLI 的安装与使用。对于开发 Vue 应用来说，Vue CLI 是一个非常强大的工具，它能帮助你快速创建项目脚手架、配置开发环境、自动化构建流程，从而大大提高开发效率。下面我就和大家一步一步地讲解如何安装和使用 Vue CLI。
什么是 Vue CLI？
Vue CLI 是 Vue.js 的官方脚手架工具，它提供了一个基于命令行的界面，能够让你快速生成一个结构清晰、功能齐全的 Vue 项目。无论你是初学者还是经验丰富的开发者，Vue CLI 都能帮助你减少繁琐的配置工作，让你专注于业务逻辑的开发。
安装 Vue CLI
在开始之前，请确保你已经安装了 Node.js 和 npm。打开终端，输入下面的命令来检查它们是否已安装：
node -v
npm -v
如果显示版本号，就说明安装成功了。接下来，我们就可以全局安装 Vue CLI 了。打开终端，执行以下命令：
npm install -g @vue/cli
安装完成后，你可以输入下面的命令检查 Vue CLI 是否安装成功：
vue --version
如果看到版本号，例如 5.x.x，就表示 Vue CLI 已经安装成功！
创建你的第一个 Vue 项目
安装好 Vue CLI 后，你就可以使用它来创建一个新的 Vue 项目。输入下面的命令：
vue create my-vue-app
这里，“my-vue-app” 是你项目的名称，你可以换成任何你喜欢的名字。接下来，CLI 会让你选择预设配置。对于新手来说，选择默认配置（Default）是一个不错的选择，直接回车即可。CLI 会自动下载依赖并生成项目结构，这个过程可能需要几分钟。
创建成功后，你会看到类似下面的信息：
🎉 Successfully created project my-vue-app.
👉 Get started with the following commands:$ cd my-vue-app$ npm run serve
按照提示进入项目目录并启动开发服务器：
cd my-vue-app
npm run serve
启动后，你可以在浏览器中访问 http://localhost:8080 ，就能看到 Vue 应用的欢迎页面啦！
项目结构简介
进入项目目录后，你会看到 Vue CLI 自动生成的项目结构。主要目录和文件包括：
- node_modules/：存放项目依赖。
- public/：静态资源目录。
- src/：项目源代码目录，主要开发代码都在这里。
- main.js：应用入口文件，负责初始化 Vue 实例并挂载到 DOM 上。
- App.vue：项目的根组件。
- components/：存放各种 Vue 组件。
- package.json：项目配置信息，记录了依赖、脚本等信息。
这种清晰的目录结构能帮助你快速找到需要修改的代码，同时也方便团队协作。
自定义和配置 Vue CLI
Vue CLI 不仅可以快速生成项目骨架，还支持对项目进行灵活配置。例如，你可以通过命令行选择 ESLint、Babel、TypeScript、PWA 等插件。创建项目时选择“Manually select features”选项，可以让你定制项目功能。此外，Vue CLI 还支持插件系统，你可以根据需求安装和配置额外的插件，进一步增强开发体验。
总结
- Vue CLI 是一个非常强大的脚手架工具，可以帮助你快速创建 Vue 项目。
- 安装步骤简单，只需全局安装
@vue/cli并使用vue create命令生成项目。 - 项目结构清晰，默认配置足以满足大多数入门需求，复杂项目可以选择自定义配置。
- 启动项目后，你可以通过
npm run serve进入开发模式，享受热更新等便捷功能。
希望这篇文章能帮助你快速上手 Vue CLI，开始你的 Vue 开发之旅！如果你有任何问题或经验分享，欢迎在评论中讨论哦！