Vue2项目架构搭建（一）——npm、webpack安装及配置

        此系列博文为搭建Vue2项目架构，使用知识涉及npm安装第三方库、webpack项目管理、vue-cli安装Vue全家桶、vue-router 2.0路由跳转、axios获取API数据，从基础工具开始到项目打包。

NPM安装及配置

        NPM是随NodeJs一起安装的包管理工具，因此只需要安装nodeJs即可，npm允许从NPM服务器下载别人编写的第三方包到本地使用，前端人员不用再满世界的找库文件了，只需一行命令搞定。

        NodeJs安装包下载地址：https://nodejs.org/en/download/。下载完成后，只需要下一步下一步傻瓜式安装就好（建议安装目录不要装在系统盘下，记住自己的安装路径，后续会用到），完成后，测试安装是否成功。（注：node会自动配置环境变量）

运行 cmd     执行 node -v 

再执行 npm -v

显示了当前安装的Node版本号和NPM的版本号，证明已经安装成功。

全局文件和全局缓存配置

        在使用npm安装第三方包时，有些会作为全局使用，类似全局变量一样，就是你在全局安装了，在不同的项目中都可以调用该包，因此最好是单独配置出来。缓存也是，当然你可以选择不管，直接使用也可以。

进入目录（我的Node安装路径：D:\node）

        方法一：打开cmd，执行“d:”进入D盘，再执行"cd D:\node"进入安装目录

        方法二：直接在node（D:\node）文件夹上Shift + 右键  选“在此处打开命令窗口”或者按下“W”，两种方法都行，至于选哪种，你开心就好。

   

创建全局文件和缓存文件夹

        创建全局文件夹： 在安装目录的命令窗口下执行“mkdir node_global”

        创建全局文件夹： 在安装目录的命令窗口下执行“mkdir node_cache”,当然也可以在D盘的node下直接新建这两个名字的文件夹。

配置文件路径

        配置全局文件路径：npm config set prefix "D:\node\node_global”

        配置全局缓存路径：npm config set cache "D:\node\node_cache"，先别急着检测是否配置成功，缓存和全局文件修改了，环境变量还没配置，因此还要去配置环境变量。

配置Node环境变量
     系统变量设置：新建系统变量 NODE_PATH

     用户变量设置：修改PATH

设置完保存后，执行

npm list -g

说明已经设置全局文件目录已经修改成功

webpack安装及环境变量配置

       npm安装好了webpack安装就很方便了，直接全局安装就好：

执行     npm install webpack -g

安装好之后需要配置环境变量，直接执行webpack会报“webpack不是内部或者外部命令”

webpack环境变量设置

     只需要新建一个用户环境变量NODE_PATH就好

配置完成后执行

webpack -v

显示webpack的版本号证明配置成功了。

本人才疏学浅，如果哪位小伙伴发现问题或者有更好的优化，希望能留言我好及时修改和优化，大家一起学习一起进步，免得被不合理或者错误的东西误导后续看到此博文的小伙伴。