node.js配置淘宝镜像及cli脚手架工具安装

1. 首先去node.js官网中下载对应的node.js版本软件

官网下载软件

安装成功后，window+r在运行窗中输入cmd打开命令提示符窗口，输入node -v回车，如出现版本号，则代表安装成功

C:\Users\ttp46>node -v
v14.7.0

如果未安装或者安装失败会出现下图中的代码：

安装出错

2. 安装npm

 1.何为npm？
  -- 在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。
  -- 在新版本中的node.js都是内置npm包管理工具
 2.检查是否已安装npm及npm版本号
  -- 命令提示框中输入npm -v，得到当前npm版本号

C:\Users\ttp46>npm -v
6.14.7

3. 检查当前镜像源及切换至淘宝镜像：

 此处切换淘宝镜像是为了能够快速的下载文件，如不配置会从国外地址下载速度很慢

 1.检查当前镜像源

npm config get registry

 2.在无配置的情况下默认镜像源是：https://registry.npmjs.org
  a.切换至淘宝镜像

npm config set registry http://registry.npm.taobao.org/

  b.检查是否正确切换，参考第1条，显示taobao则成功切换

当前镜像地址

 3.在切换为淘宝镜像后，npm可以被cnpm所取代，cnpm是阿里巴巴的淘宝团队把NMP官网的插件都同步到了在中国的服务器，提供给我们从这个服务器上稳定下载资源。后面运行时的npm都可以改写为cnpm在提高下载速度的同时减少丢包的风险。

4. 安装cli脚手架

 1.首先在命令提示符窗口中输入npm install -g @vue/cli开始下载cli脚手架文件，有的小伙伴会疑惑于刚才不是说可以开始使用cnpm运行指令了么？但是要注意cnpm命令在安装时是无法直接使用的，如直接使用会报以下错误：

运行报错

 2.所以我们需要稍加调试，命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org，安装成功后，在执行cnpm -v命令检查当前版本，如安装正确会显示cnpm当前的版本号，如下图：

cnpm版本号

 3.现在就可以愉快的使用cnpm来取代npm了，接下来开始安装cli脚手架，命令提示符窗口运行指令cnpm install -g @vue/cli，就开始了飞速的安装过程，如使用npm安装没个十分钟怕是搞不定...接下来你会看到很多行的代码在加载，不要慌，等他结束后运行指令vue -V，这里的-V的V是大写的其余小写，如果-V写成小写会显示很多信息，正确输入后会返回当前的vue/cli的版本号，如下图：

cli安装成功

 4.开始创建项目命令提示符窗口中执行vue create myproject，出现一些选项，安装下图选择即可：提示：回车确定，空格用于多选的选定和反选!!!

安装步骤1

安装步骤2

路由是否使用历史设置

安装步骤4

安装步骤5

安装步骤6

是否保存设置

 5.等待配置完毕，命令提示符窗口中执行vue ui，会返回一个地址，这个地址就是你的项目管理器的地址，复制到浏览器中打开即可，然后开始创建项目：配置过程中不能关闭命令提示符窗口!!!!!

创建项目

创建项目

选择需要的插件

大功告成

 6.上面步骤都操作完成后，等待创建完毕项目，至此cli脚手架工具就安装完成了。

 7.接下来启动项目，在我的电脑中找到创建文件夹的位置，进入到文件夹目录中在地址栏输入cmd回车：

启动项目

确认命令提示符地址是项目的位置，输入npm run serve，这样就启动了项目了：

启动成功

启动成功后，会显示两个地址信息，选一个复制到浏览器中打开就可以看到页面了。