详细Node.js 和 vue.js 安装和配置部署使用

1，下载：https://nodejs.org/en/download/

Windows Installer（.msi）文件是需要安装的文件。

Windows二进制文件.zip文件是免安装文件。

2.安装：

   2.1）我自己是下载的文件（.zip）文件

   2.2）解压：

  2.3）创建两个目录节点全局和节点缓存。

       node-global：npm全局安装位置 , npm install  下载之后的包 都会下这个文件夹下面
       node-cache：npm缓存路径

 2.4 配置环境变量： 

•   配置全局安装的  node-global 的路径，  之后 install 下来的包  输入的命令 都是全局命令
•   配置 node.js 的环境变量

     将node.exe所在的目录添加到路径环境变量，这样我们在使用命令行时就可以在任意路径使用node命令了，同时该目录下有一个npm.cmd文件，打开文件其实就我是将我们的npm命令映射到node.exe npm-cli.js，由于存在该映射所以只要把node.exe所在的目录添加到路径环境变量，也可以在任何目录下执行npm install了。

2.5 配置依赖：

那么node-global：npm全局安装位置，node-cache：npm缓存路径又是怎么与npm发生关系呢？

通过如下命令进行配置：

npm config set prefix  "D:\java\nodejs\node-global"
npm config set cache "D:\java\nodejs\node-cache"

执行npm命令进行测试：npm install webpack -g 会发现 node-global 下 node_modules 中多了 webpack 文件夹 

的WebPack是用来打包的模块，通常我们会在命令行中执行，而的WebPack同样在节点全局中做了映射，所以只需要将节点全局加入路径环境变量即可。此时，就可以使用的Node.js以及NPM和的WebPack进行开发了。

2.6 安装测试成功

node -v //显示node版本

npm -v //显示npm包管理器版本

说明已经安装成功和配置成功

2.7  这里是在 npm install webpack -g   没有安装成功的 可以执行以下操作（安装成功跳过）

由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像---cnpm  这里使用的是淘宝的镜像资源

在cmd 输入   npm install -g cnpm --registry=http://registry.npm.taobao.org  (如果npm 没有装成功,可以执行这个操作)

 

2.8  node 和npm  都安装 成功... 可以开始搭建  vue脚手架构建工具

 执行命令: npm install -g vue-cli   脚手架搭建完成  在    global  会  有  vue  和vue.cmd   以及  vue-cli  文件（在node_modules下）

 

在 cmd   输入     vue -V   测试版本：  

 

注意：  如果以上步骤都正确，但是   vue  或者 vue -V 不是内部命令， 其实包没有安装成功

一般会出现这种情况。。。

解决方法，

•   将  npm  更新  npm install  npm -g  ,然后 再去搭建  vue 脚手架  基本可以解决问题
• 

或者使用  淘宝的  cnpm    去搭建 vue    基本也可以解决问题    

 

由于上面我们配置了 node-global 的路径在环境变量中，所以 在 任意 目录下运行命令：   vue init webpack my-project   

其中，webpack是构建工具、模块打包器，也就是整个项目是基于webpack的。其中，my-project是项目文件夹的名称，这个文件夹会自动生成在vuejs这个工作目录中。(注意：如若创建报错，可能是node版本太低，升级即可)

  上图 只是为了截图  ，  请根据自己的需要 选择 填写

• project name  项目名
• project description   项目说明  （一般与 项目名称一致）
• author   自己定义
• Vue build      yes
• Install  vue-router    这是vue 路由， 所有的 请求分发 都在这里     选择yes
• Use  Eslint to lint your code     一般选择   no
• set up unit tests    yes
• pick  a   test runner   yes
• Setuo e2e              yes
• Should      一般选择  no

 

2.9,安装过程中，需要我们输入项目名称，描述，作者，版本（独立版）,使用ESLint规范等等，此时，我们看到工作目录下已经自动生成了目录  my-project, 如下图。

 

2.10,主要用的包都在package.json中，如下图

2.11.cd到我们的项目文件夹my-project中，运行命令cnpm install 安装包,(注意：使用淘宝镜像  命令使用  cnpm install   )   不是使用淘宝镜像的 使用  npm  install  即可

2.12.安装完之后，我们发现项目文件夹下多了一个node_modules目录，里面就是项目依赖包资源

2.13.安装完依赖包之后，就可以运行整个项目了。 运行项目在项目目录中，运行命令     npm run dev ，会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

 

2.14.访问我们的项目   http://localhost:8080

 

2.15.如果启动过程中出现下方问题，只需要将config目录下的index.js文件中dev端口由8080改为8090(端口冲突)

 

 

一个 vue 的项目从安装----部署---项目---启动-----访问已经搞定了,是不是超级简单~