Vue.js 利用 Vue CLI 创建项目：快速上手指南

假如想用 Vue.js 开发一个项目，最推荐的方式就是利用 Vue CLI。Vue CLI 是 Vue.js 官方提供的一款脚手架工具，它可以帮你快速搭建项目结构，省去很多重复劳动。本日我会带你从零开始，用 Vue CLI 创建你的第一个 Vue 项目，简单、高效、零压力！
一、什么是 Vue CLI？

Vue CLI 的全称是 Vue Command Line Interface，简单来说就是一个命令行工具。它的主要功能是帮助我们快速初始化一个 Vue.js 项目，包括以下优点：

• 自动天生项目结构，开箱即用。
  
• 提供一系列开发工具，比如热更新、打包优化。
  
• 支持插件扩展，比如路由、状态管理、PWA 等。
  
• 让开发过程更加高效！
  

一句话，Vue CLI 是你用 Vue 开发项目的好帮忙。
二、安装 Vue CLI

1. 安装 Node.js

利用 Vue CLI 的条件是安装 Node.js。你可从前去 Node.js 官方网站 下载并安装最新的稳定版。安装完成后，打开终端（或命令提示符），输入以下命令来查抄是否安装成功：

1. node -v
2. npm -v

复制代码

假如能看到版本号，那说明安装成功了。
2. 全局安装 Vue CLI

在终端中运行以下命令来安装 Vue CLI：

1. npm install -g @vue/cli

复制代码

安装完成后，可以用以下命令确认是否安装成功：

1. vue --version

复制代码

假如显示版本号，比如 @vue/cli 5.x.x，那就大功告成了！
三、用 Vue CLI 创建项目

现在让我们动手创建一个 Vue 项目！只需简单几步就能完成。
1. 运行创建命令

在终端中运行以下命令：

1. vue create my-vue-app

复制代码

my-vue-app 是你的项目名称，你可以换成任何名字，比如 hello-world 或 my-first-project。
2. 选择配置方式

运行命令后，Vue CLI 会让你选择项目的配置方式。通常有两种选择：

• Default ([Vue 3] babel, eslint)：这是默认配置，适合新手，快速上手。
  
• Manually select features：假如你有履历，可以选择自己定制配置，比如是否利用 Vue Router、Vuex，乃至测试框架。
  

我们这里选择默认配置，输入回车即可。
3. 等待安装完成

Vue CLI 会自动下载依靠包并天生项目文件。这可能需要几分钟，具体取决于你的网络速度。
安装完成后，你会看到雷同如下的信息：
[code]