使用VueCli快速搭建项目

本文将介绍如何使用Vue Cli来快速搭建一个 Vue 项目。Vue Cli 是一个官方提供的脚手架工具，可以帮助你轻松创建和管理 Vue 项目，同时也支持最新的 Vue 3 版本。在本文中，我们将从安装 Vue Cli 开始，然后创建一个全新的 Vue 3 项目。

安装VueCli

公众号：Code程序人生，个人网站：https://creatorblog.cn

首先，确保你的计算机已经安装了 Node.js 和 npm。如果没有安装，你可以在官网上下载并安装它们：Node.js 官网。

一旦 Node.js 和 npm 安装完成，你可以使用以下命令来全局安装 Vue Cli：

npm install -g @vue/cli
# or
yarn add -g @vue/cli
1
2
3

这将会在你的计算机上安装最新版本的 Vue Cli。

创建新项目

一旦 Vue Cli 安装完成，你可以使用它来创建一个新的 Vue 项目。在命令行中，运行以下命令：

vue create my-vue-project
1

这里的 my-vue-project 是你的项目名称，你可以根据需要进行更改。接下来，Vue Cli 将会提示你选择项目的配置：

• Manually select features：手动选择特性
• Vue 2：使用 Vue 2 版本
• Vue 3：使用 Vue 3 版本
• Default ([Vue 2] babel, eslint)：默认配置，使用 Vue 2，Babel 和 ESLint
• Default ([Vue 3] babel, eslint)：默认配置，使用 Vue 3，Babel 和 ESLint
• …

根据你的需求选择适当的配置。如果你想使用最新的 Vue 3 版本，选择 "Vue 3"。然后，Vue Cli 会根据你的选择安装依赖项并创建项目结构。

运行项目

项目创建完成后，你可以进入项目目录：

cd my-vue-project
1

然后，使用以下命令来运行你的 Vue 项目：

npm run serve
1

这将启动开发服务器，并在浏览器中打开默认的开发页面。你可以在代码编辑器中编辑 Vue 组件，每次保存后，开发服务器都会自动重新加载页面，以便你实时查看更改。

总结

使用 Vue Cli 快速搭建项目是一个非常便捷的方式，尤其是在开始一个新的 Vue 项目时。通过遵循上述步骤，你可以轻松地创建一个基于最新版本的 Vue 3 的项目，并开始编写你的 Vue 应用程序。