如何在 3 分钟内启动 Vue.js 项目

言归正传，我直接开始吧：本指南将展示如何使用 Vue CLI 快速开始 Vue.js 开发。如果你想尝试 Vue.js 一段时间，并且有“如何轻松入门？”之类的疑问，我希望这篇文章能帮助你更轻松地开始使用 Vue.js。

设置 Vue CLI

为了节省大量时间，让Vue 命令行界面为您完成所有工作。Vue CLI 只是一个 npm 包，它全局安装以提供vue命令。您可以使用npm或yarn安装它：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

注意：Vue CLI 需要 Node.js 8.9 或更高版本

要验证安装是否成功，请尝试以下操作：

vue --version
# 4.0.5

现在一切准备就绪，可以设置您的项目了。

创建新项目

导航到您想要启动新项目的目录并运行以下命令：

vue create my-vue-app

请注意，这my-vue-app是您的项目的标题，请选择您喜欢的任何标题。

现在 Vue CLI 开始交互式功能选择，让我们看看这里有什么：

此时，您可以选择预设（上图的前两个选项是我之前保存的预设），也可以选择默认配置，或者手动选择功能。目前，您可以使用箭头键导航到默认设置Enter，然后点击。

结果应该与此类似：

看起来 Vue CLI 确实忙得不可开交。让我们看看它具体做了什么（不一定按顺序）：

• 创建package.json包含一些用于生产和开发的依赖项的默认值
• 安装依赖项（节点模块）
• 创建项目文件和目录
• 初始化 Git 存储库
• README.md使用一些基本命令创建来开发您的项目

项目文件结构如下：

热腾腾

现在你已经对 Vue CLI 为你创建的内容有了大致的了解，可以启动开发服务器来查看结果了。运行以下命令：

yarn serve

这将编译项目并使用localhost:8080热重载功能。因此，无论何时进行任何更改（例如，调整第 4 行的欢迎消息App.vue），您都无需在浏览器中重新加载页面，它会自动更新。

现在就开始尝试 Vue.js 吧！这篇文章很短，也不是很完整——它只是为那些 Vue.js 入门者提供一个起点。别忘了看看文档，它们真的很棒 😎

如果您想了解更多详细信息，请在评论中告诉我！

最初发布于：2019 年 11 月 1 日，Medium