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

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

1. 点击链接下载node：https://nodejs.org/en/download/

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

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

2. 安装：

2.1 如果是下载的文件（.zip）文件

2.2 解压：

2.3 创建两个目录节点全局node-global 和 节点缓存node-cache。

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 vue -V 脚手架搭建完成 在 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 在cmd中 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(端口冲突)

到这里就 结束了！！！