如何使用 Vue CLI 创建 Vue 项目？

写在前面

Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面和单页应用程序。Vue CLI 是一个官方的命令行工具，旨在帮助开发者快速、轻松地创建和管理 Vue 项目。在本文中，我们将详细介绍如何使用 Vue CLI 创建一个新的 Vue 项目。

安装 Vue CLI

首先，确保你已经安装了 Node.js 和 npm（Node Package Manager）。然后，打开终端并运行以下命令来安装 Vue CLI：

npm install -g @vue/cli

这将在你的系统上全局安装 Vue CLI。

创建新项目

安装完成后，你可以使用以下命令创建一个新的 Vue 项目：

vue create my-project

这将在当前目录下创建一个名为 my-project 的新目录，并在其中生成一个基本的 Vue 项目结构。

选择项目模板

在创建项目时，Vue CLI 会提示你选择一个项目模板。默认情况下，Vue CLI 提供了两个模板：default 和 manually。如果你选择 default 模板，Vue CLI 将使用预设的配置创建项目。如果你选择 manually 模板，Vue CLI 将引导你逐步配置项目。

在本文中，我们将选择 default 模板。

安装依赖

创建项目后，Vue CLI 将自动安装所有必要的依赖项。这可能需要一些时间，具体取决于你的网络速度和计算机性能。

启动开发服务器

安装完成后，你可以使用以下命令启动开发服务器：

cd my-project
npm run serve

这将在本地启动一个开发服务器，并在浏览器中打开你的 Vue 应用程序。

结构和文件

新创建的 Vue 项目包含以下主要文件和目录：

• src/: 这是你的应用程序的源代码目录。
• public/: 这是你的应用程序的静态资源目录，例如图像、字体和其他媒体文件。
• index.html: 这是你的应用程序的入口 HTML 文件。
• package.json: 这是你的项目的依赖项和脚本配置文件。
• package-lock.json: 这是你的项目的依赖项锁定文件。

在 src/ 目录中，你会找到以下文件：

• main.js: 这是你的应用程序的入口 JavaScript 文件。
• App.vue: 这是你的应用程序的根组件。
• components/: 这是你的应用程序的组件目录。

总结

使用 Vue CLI 创建 Vue 项目非常简单和快速。只需安装 Vue CLI，选择一个项目模板，安装依赖项，然后启动开发服务器即可。Vue CLI 提供了一个良好的起点，帮助你专注于编写代码和构建你的应用程序。