前言

开发vue项目的时候一般是通过vue-cli脚手架进行开发。之所以成为脚手架就是因为他通过webpack搭建的开发环境直接生成开发所需要的基本模板，我们只需要在模板中进行开发即可。接下来详细记录下在自己的电脑上安装vue-cli脚手架的步骤以及问题。

一.前提

安装vue-cli首先需要在自己的电脑上安装node.js环境，可以通过node -v命令来查看自己的电脑是否安装了node.js。如果出现了node.js的版本信息，则node.js环境安装成功了，如果出现xx 不是内部命令，说明电脑上还没有node环境 ,可以通过node下载地址下载安装。

然后通过npm -v命令查看自己npm的版本信息，

注：vue-cli的安装，需要node.js的版本在6.9以上，npm的版本在 3.10以上。

二.vue-cli的安装

进行命令行工具，输入npm install --global vue-cli命令全局(--g或者--global表示的是全局)安装vue-cli。

注：如果出现vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 13.250.177.223:443，那么是因为github的问题，

解决办法：

1.打开终端（cmd），输入命令：ping 192.30.253.112 发现连接超时；输入命令：ping github.com 显示超时。

2.打开 hosts文件，地址：C:\Windows\System32\drivers\etc  看是否是默认配置，如果不是，还原成默认配置。

3.在终端输入命令：ping github.com 如果还是超时，则打开ping.chinaz.com/

github.com， 搜索github的ip地址

4. 然后在hosts文件中添加：

192.30.253.112 github.com 
  151.101.88.249 github.global.ssl.fastly.net
复制代码

在命令行输入 ping github.com,如果通了，就可以了

这里的安装需要花费一点时间，这时候可以在桌面或者任意位置新建一个文件夹用于后面生成项目文件

等待vue-cli安装成功之后，可以通过vue --version查看vue-cli有没有安装成功，如果安装成功了，cd+vueDemo的路径进入

vueDemo文件夹内，输入命令vue init webpack my-vueproject，格式为vue init webpack +自定义的项目名称。

等模板下载完成之后，开始配置项目

然后通过npm install命令开始下载项目依赖

用sublime或者vscode打开该项目，则项目的模板已经生成了。

根据命令行界面提示的两个命令启动项目首先cd my-vueproject进行项目的文件夹下，然后npm run dev启动项目

然后项目会自动开启一个8080的端口，并且出现如下界面则项目脚手架完成。

注意：如果出现8080端口被占用的情况，可以在config文件夹下的index文件内修改port端口号：