[TOC] >[success] # VueCLI 的使用和单文件组件 本章了解一下 **Vue** 的 **脚手架工具** ，同时了解一下 **Vue** 的 **单文件组件** 。 >[success] ## VueCLI 脚手架 在 **真正开发大型项目时** ，实际上并不能通过一个 **index.html** 的方式去编写一个比较大型的项目，所以我们要学习使用 **Vue** 的一个 **工具** 来进行大型项目的开发，这个工具就叫 **VueCLI （脚手架）工具** 。 1. **安装 node** 我们在做真实 **Vue 项目开发** 时，要借助 **node** 的 **环境** ，然后去使用我们的 **VueCLI （脚手架）** 去开发大型的项目，首先打开 **[Node.js 官网](https://nodejs.org/en/)** ，点击图片中带有 **LTS 字样，长时间维护比较稳定的版本** 的 **node** ，把它 **下载** 下来，傻瓜式的安装时即可。  安装完成 **node** 后，到 **命令行** 中，输入指令 ~~~ node -v ~~~ 来查看 **node 版本号** ，我们学习的是 **Vue3** ， **Vue3** 的 **脚手架（VueCLI）** 要求 **node 版本** 是 **10.0** 版本以上， **至少是 8.0 版本以上** 。 2. **安装 nrm** 其实安装好 **node** 之后，会连带着 **node** 一起安装另外一个工具，叫 **npm** ，输入指令 ~~~ npm -v ~~~ 查看 **npm 版本号** ，**npm** 是 **包管理器** ，我们可以通过 **npm** 去下载网络上别人的插件等等。 接下来我们用 **npm** 来安装一个 **nrm** ， 输入指令 ~~~ npm install nrm -g ~~~ **nrm** 是一个 **npm源管理器** ，意思就是说 **npm 包来源的网址**，对它进行管理。比如你用了 **淘宝镜像**，那么你就可以用 **nrm** 来切换，**npm服务器是在国外的 ，下载安装包是很慢，可能会出现卡顿的现象**，这时你就可以把地址切换到 **淘宝镜像地址** 了，毕竟服务器在国内，下载安装包速度就快了。 安装完成 **npm** 后，输入指令 ~~~ nrm ls ~~~ 如果报错了请看[这里](https://blog.csdn.net/S_aitama/article/details/113706339)，如果未报错会出现下面这样的界面