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

 

1，下载：

https://nodejs.org/en/download/

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

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

2.安装：

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

   （2）解压：

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

       node-global：npm全局安装位置 
       node-cache：npm缓存路径

3.配置： 
  （1）配置环境变量： 

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

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

通过如下命令进行配置：

npm config set prefix“D：\ node \ node-v8.9.3-win-x64 \ node-global” 
npm config set cache“D：\ node \ node-v8.9.3-win-x64 \ node-cache”

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

的WebPack是用来打包的模块，通常我们会在命令行中执行，而的WebPack同样在节点全局中做了映射，所以只需要将节点全局加入路径环境变量即可。

此时，就可以使用的Node.js以及NPM和的WebPack进行开发了。

4..打开cmd命令

node -v //显示node版本

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

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

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

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

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

 执行命令: npm install -g vue -cli

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

 

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

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

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

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

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

 

14.访问我们的项目

 

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

 

 

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