使用Vue CLI搭建一个Vue程序

Vue程序搭建

1、Vue.js介绍

Vue是一套用于构建用户界面的渐进式框架。与其他的大型框架不同的是，Vue被设计为自底向上逐层应用。Vue的核心只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2、使用Vue-CLI搭建Vue项目

Vue CLI是基于Vue.js进行快速开发的完整系统，其提供：

• 通过@vue/cli实现的交互式项目脚手架
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具
• 一套完全图形化的创建和管理Vue.js项目的用户界面

2.1、搭建Node.js环境

2.1.1、下载Node.js安装包

Vue CLI 需要配置 Node.js环境（推荐V10以上）。

进入官网后，界面如下。

网页中有两个绿色的按钮，一个是LTS版，一个是current版。前者是长期维护版，后者是当前版。建议选择长期维护版。（你要挑战新特性也不是不可以。）
但是，上面两个版本是Node.js里Windows64位的版本。如果想选择其他版本，请点击上面的downloads按钮。

点击后，将进入下面的界面。

注意： Node.js一般奇数版每年10月发布，而偶数版则是第二年4月发布。如果奇数版发布后，最近一个偶数版将会进入LTS维护计划，一直持续18个月。

2.1.2、Node.js安装

首先，找到我们刚刚下载好的安装包。安装包如下。

找到后，我们点击打开。

因为本人的Node.js环境已经搭建好，所以安装被阻止了。

Node.js安装好的样子如下。

安装好后，我们打开cmd，输入node -v或npm -v，如果安装没有出现问题的话，将会显示相对应的版本号。

2.2、安装Vue CLI

安装好后，我们打开cmd使用下面的命令安装Vue CLI包。

npm install -g @vue/cli

出现下面的界面就是在搭建Vue CLI环境。

升级
如果需要升级全局的包，请运行：

npm updata -g @vue/cli

2.3、创建一个项目

创建项目时，我们用cmd打开想要创建项目的文件夹。

---

注意：
教一招：从文件资源管理器用cmd打开对应的路径。
在路径前输入cmd，点击向右的箭头，将直接从cmd打开对应路径。

---

接着输入下列命令，开始创建Vue CLI项目。

vue create hello-world
hello-world 可以是别的名字，这个名字只是你要创建的Vue CLI项目文件夹的名字

输入完命令后，来到下面的界面。我们选择第一个，因为Vue 2现在是稳定版，想要尝试Vue 3的小伙伴当我没说。

点击了回车键后，来到下面的界面。我们静候安装完成。

在等待过后，出现下面的界面，说明Vue CLI项目搭建完成了。

2.4、运行CLI服务

下面两个蓝色字体的指令就是提示我们运行我们的新Vue CLI项目的指令。

我们按着指示输入我们需要输入的指令。

出现下面的界面后，说明我们的CLI服务已经开启了。

我们打开浏览器，输入下面的网址

http://localhost:8080/

我们将看到下面的界面。

当我们出现这个界面后，说明我们的Vue CLI程序搭建完成了。