win10系统vue-cli环境搭建及创建项目

每天进步一点点，小白学习笔记，自己的学习记录笔记。

首先WIN+R调出cmd管理界面，输入path查看nodejs安装情况

如果目录中没有安装nodejs里面是看不到nodejs的安装路径的。那么可以先从官网下载安装nodejs，官方下载地址（win10环境下载安装Windows 安装包 (.msi) 64位就可以）。
查看nodejs安装版本和npm（nodejs自带的包管理工具，可参考nodejs与npm的关系）安装版本

cmd中键入指令npm set registry https://r.npm.taobao.org -g(链接npm淘宝镜像) 回车，npm install（npm安装）对npm再次进行配置性安装

因为这里是已经安装成功，提示为update成功。这里说一下，因为不少线上资料提供的是使用cnpm镜像，以提高下载速度。如：npm install -g cnpm --registry=https://registry.npm.taobao.org，其他指令中npm使用cnpm替换即可。因为本人在使用cnpm镜像后在包管理过程中出现过一些小麻烦，所以不唠述。cnpm如图

搭建vue-cli脚手架npm install -g @vue/cli

注：2.9.9版本之前的版本使用@vue-cli安装，3.0之后的版本使用@vue/cli安装

安装webpack（JavaScript打包器）npm install -g webpack

这时候cmd中键入vue is查看vue-cli脚手架的安装情况会有Unknown command is（未知命令）的提示，这是因为vue-cli没有进行全局配置
对vue-cli进行初始化和-g全局配置npm install -g @vue/cli-init

到这里就完成了nodejs（环境），npm（包管理器），vue-cli（脚手架工具），webpack（打包工具）的安装以及配置，可以使用vue-cli脚手架工具创建项目了。
切换到项目创建目录，键入vue init webpack 项目名称

根据项目需求进行选择和设置

项目创建成功

键入cd 项目目录
npm run dev（启动项目）

如图项目创建成功。复制http://localhost:8080在浏览器中打开

项目目录