创建Vue项目：使用Vue CLI

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

引言

在使用Vue.js框架进行开发之前，创建一个新的项目是第一步。本文将介绍如何使用Vue CLI（Vue的官方命令行工具）来创建一个新的Vue项目。Vue CLI提供了一个便捷的方式来初始化项目结构，配置开发环境，并安装必要的依赖。

准备工作

在开始创建项目之前，请确保你的计算机上已经安装了以下软件：

• Node.js：JavaScript运行环境，Vue CLI是基于Node.js的。
• npm：Node.js的包管理器，用于安装和管理项目依赖。

可以通过在终端或命令提示符中运行以下命令来检查是否已安装：

node -v
npm -v

如果尚未安装，请访问Node.js官网下载并安装。

安装Vue CLI

如果你的计算机上还没有安装Vue CLI，可以通过npm来全局安装它：

npm install -g @vue/cli

安装完成后，可以通过以下命令来验证Vue CLI的安装：

vue --version

创建新的Vue项目

使用Vue CLI创建新项目非常简单。打开终端或命令提示符，然后执行以下命令：

vue create my-project-name

将my-project-name替换为你想要的项目名称。

选择配置

执行上述命令后，Vue CLI会提示你选择一个预设配置：

• Default ([Vue 2] babel, eslint)：默认配置，适用于大多数项目。
• Default (Vue 3) ([Vue 3] babel, eslint)：默认配置，适用于Vue 3项目。
• Manually select features：手动选择特性，允许你自定义项目配置。

根据你的需求选择合适的配置。如果你是初学者，选择默认配置通常是最快的开始方式。

完成项目创建

按照终端中的提示完成项目的创建过程。Vue CLI会自动创建项目文件和目录结构，并安装所有必要的依赖。

启动开发服务器

项目创建完成后，可以进入项目目录并启动开发服务器：

cd my-project-name
npm run serve

这将启动一个热重载的本地开发服务器，通常可以在http://localhost:8080/访问你的新Vue项目。

结论

通过Vue CLI创建一个新的Vue项目是一个快速且简单的过程。它不仅帮助开发者节省了大量的时间，还确保了项目的结构和配置符合最佳实践。随着Vue生态的发展，Vue CLI也在不断更新，提供了更多的功能和插件支持，以满足不同项目的需求。