当前位置：首页 > news >正文

Vue.js Vue CLI 安装与使用

news 2025/6/23 12:23:47

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 还支持插件系统，你可以根据需求安装和配置额外的插件，进一步增强开发体验。

总结