Node.js和VUE环境搭建及一系列问题解决

原因：由于最近技术渐长，于是想把原来的ssm项目改成前后端分离，综合几位大佬的意见决定前端采用vue。

安装体验：极差，几乎碰到了在百度上能看的问题。幸好在百度了一大圈后解决。

接下来我将从node.js安装一直叙述到vue项目的运行,也就是命令行 npm run dev这块。由于本文引用了大量其他博主的资料，所以就不再注明出处了。

一.node.js安装

 

1.Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/。

 点击Windows Installer安装即可，过程中把能勾的都勾上。

2.

安装完后就是测试是否安装成功：在命令行直接运行node -v,出现如下所示，ok一部分

因为node.js需要npm(npm是什么东东？npm其实是Node.js的包管理工具（package manager)),npm已经在Node.js安装的时候顺带装好了。在命令提示符或者终端输入npm -v，应该看到类似的输出：

如果直接输入npm，你会看到类似下面的输出：

那么node.js就安装完成了

二.搭建vue环境

初学者并不需要知道为什么（包括我。。。。），按照步骤来就行

1.搭建vue-cli脚手架工具：

在命令行运行：npm install --global vue-cli。安装过程看网速，2-3分钟。

写在前面：由于后面安装下载问题，所以我都用了cnpm，极力推荐大家使用。因为用npm时老是中断，但是用cnpm又快又稳。

cnpm安装：命令行直接输入即可。下载后即可用cnpm。

 npm install -g cnpm --registry=https://registry.npm.taobao.org

2.创建vue项目

在命令行cd进入你想保存项目的文件夹：

运行

vue init webpack 项目名

这一般不会出错。进行下一步

3.下载项目依赖(至关重要)

cd进入你上一步创建的项目，例如项目名为Test->cd xxxxxx/Test即可，中间xxx则是大家项目不同的路径

输入cnpm install,等待完成即可

cnpm install

 

4.运行项目

在上一步的路径下输入

npm run dev

 

如果成功会显示：

 

到了此步那么本文致力所解决的问题就达到了。

 

 

下来是本人运行npm run dev是的各种错误及解决办法

1.提示 'webpack-dev-server' 不是内部或外部命令

运行：npm install -g webpack-dev-server即可。也 可换为cnpm.......

2.Cannot find module 'webpack'

解决办法：命令行输入一下2条命令

cnpm install webpack-cli -g

 

npm install webpack -g

一般就能解决，（本人输入命令后还是报Cannot find module 'webpack'，最后看了很大博客，试了很大命令才ok）

命令行输入webpack -v 出现版本号webpack就没问题了

3.出现各种Cannot find module 'XXXXX'.

 

 出现这种问题原因是你没有执行第三步，也就是下载项目依赖，我就是因为这样反反复复搞了1小时才发现问题，大家执行第三步即可。

PS：最近看了很多博客，发现有些人说的话难以理解，语意模糊（可能是自己理解能力差了）。每当看见这些博客我都会在其下留：？？？？或说的根本听不懂之类。本意是让作者好好理清顺序。同理，此后我写博客的时候会尽量从头到尾写出原由，为大家提供可靠的解决方法和经验等。

本人是vue新手，如上面出现错误，还望指正，谢谢