Node.js + Vue.js 的下载安装以及配置启动教程（超详细）

什么Node.js？

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。

    Node对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。Node是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。（来源百度百科）

下载安装Node.js

首先先下载Node.j，下载链接请点击这里 Node.js的下载链接 ，点击之后会进入以下页面，选择相应的版本下载即可

安装Node.js

下载之后，双击运行程序，点击next

打钩，点击next

改路径，点击next

默认点击next

next

install

finish

Win+R 打开 cmd 输入 node --version 或者 node -v（注意：version前面有两个 – ）验证是否安装成功

安装后的目录如下所示

配置环境

配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）
如：

输入以下命令配置一下，我的是在虚拟机里面安装的，所以路径是在C盘，大家可以设置在其他盘

npm config set prefix "D:\node\node_global"
npm config set cache "D:\node\node_cache"

右击计算机，点击属性，点击高级系统设置

点击环境变量

新建NODE_PATH变量名，输入node_modules所在的路径

点击用户变量，点击path，修改一下

修改为node_global的路径

什么是Vue.js？

    Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。（来源百度百科）

安装Vue组件

安装express

输入以下指令

npm install express -g

全局安装vue-cli，vue-cli可以帮助我们快速构建Vue项目。

安装命令：

npm install -g vue-cli

如果下载太慢，可以使用淘宝镜像

//切换淘宝镜像
npm config set registry https://registry.npm.taobao.org

验证是否已经切换
npm config get registry

安装webpack，它是打包js的工具

安装命令：

npm install -g webpack 

在开始创建项目之前还需要安装Vue

命令为：

npm install vue

再输入 npm install 安装包

输入vue验证vue是否安装成功
可以看到有关vue的相关用法，其中vue init就是生成一套vue模板

这个时候就可以创建项目了，打cmd输入命令如下：

vue init webpack 项目名

这个时候我们就可以看到vuecode文件夹下生成的vue模板

启动Vue项目

接下来我们启动一下我们生成的项目，输入以下指令

npm run dev

启动成功，在浏览器中输入localhost:8080即可访问到项目

如果访问不到页面而且也没报错的，有以下原因

• 一种是浏览器的问题，笔者使用IE8的时候是无法访问到页面的，换了一个谷歌浏览器访问之后就可以了
• 另一种是把localhost改为你的电脑IP地址，端口改为9090，修改方法如下：

（1）点击你的项目下的config文件夹

（2）点击index,js进行修改，打开文件之后点击编辑查找进行修改即可

修改之后再访问即可访问到你的项目

关注我的公众号，共同进步