vue-cli（vue.js脚手架）安装成功记录

Step：

1，安装node.js

2，安装cnpm

3，安装webpack

4，安装vue-cli

5，运行成功

 

一，安装node.js

1，打开https://nodejs.org/en/官网下载node.js

2，安装Node.js，打开下载的文件一直下一步安装成功

3，确认安装成功，执行命令：node -v

 

二，安装cnpm

1，安装完node.js后，npm命令即可以使用了，可执行命令：npm -v 查看版本

2，在这里我们使用国内镜像，提高下载速度，所以安装cnpm，后面需要用到npm命令的，不要交替使用，一律改用cnpm

执行命令： npm install -g cnpm --registry=https://registry.npm.taobao.org 安装cnpm( -g 代表global全局得意思)，安装成功后输入 cnpm -v 查看

 

三，安装webpack

1，执行命令： cnpm install webpack -g 安装，然后输入 webpack -v 查看版本确认成功

2，如果遇到以下提示，请执行命令： cnpm install --g webpack-cli 继续安装，然后再次输入 webpack -v 后，即可看到版本

好，安装vue-cli之前的步骤进行到这里，咱们先总结确认下成果，执行命令：

node -v

cnpm -v

webpack -v

全部出现版本号即表示成果，可以进行下一步。

 

四，安装vue-cli

第一种，在线安装

1.1，建立vue安装目录，然后在cmd里将路径切换为该目录，参考我的：

1.2，执行命令： vue init wepback demo （wepback--模板，demo--项目），一直下一步即可。

1.3，安装完毕后会在D盘demo目录下生成一个目录名称为demo，目录下文件：

1.4，执行命令

cd demo

cnpm run dev

1.5，浏览器里输入url：http://localhost:8080，出现下面页面即表示安装vue-cli成功。

1.6，容易出现的错误：

vue-cli · Failed to download repo vuejs-templates/webpack: connect ECONNREF......，

如果出现这个，找到C:\Windows\System32\drivers\etc中的host文件（win10），打开添加

192.30.253.112 github.com
151.101.88.249 github.global.ssl.fastly.net

保存后重复上面1.1 - 1.5步骤

 

第二种，离线安装

2.1，为了避免一些问题，咱们采用下载模板、离线安装的方式进行，打开https://github.com/vuejs-templates，下载模板到本地

2.2，下载后解压改名为：webpack，放在C:\Users\Administrator\.vue-templates目录下（Administrator为当前使用电脑的用户名）

2.3，建立vue安装目录，然后在cmd里将路径切换为该目录，参考我的：

2.4，执行命令： vue init wepback demo --offline （wepback--模板，demo--项目），一直下一步即可。

2.5，执行命令

cd demo

cnpm run dev

2.6，浏览器里输入url：http://localhost:8080，出现下面页面即表示安装vue-cli成功。