vue安装环境搭配流程

配置npm运行vue环境

一、安装环境

1、本机系统：Windows 10 Pro（64位）
2、Node.js：v6.9.2LTS（64位）

二、安装Node.js步骤

1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/
2、选安装目录进行安装
3、环境配置
4、测试

打开官网下载链接:https://nodejs.org/en/download/ 我这里下载的是node-v6.9.2-x64.msi,如下图：

5，开始安装

中间过程

安装完成–开始配置环境

1.打开CMD

2，输入

node -v

npm -v

如图所示：

安装完后的目录如下图所示：

此处说明下：新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西

五、环境配置

• 说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径 特别是要配置路径，以及数据缓存cache的路径， 这个是需要配置的，*（如果不配置我们执行命令时候会系统默认的路径c盘的摸个文件里面，到时候会导致很多错误信息）打个比如songchang去运行java时候还要找默认的c盘找不到那些文件在哪， 还要一个一个找自己配置的环境要方便！
• 是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。
  例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图：

创建完两个空文件夹之后，打开cmd命令窗口，输入

npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"

接下来设置环境变量，关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，输入【D:\Develop\nodejs\node_global\node_modules】，

将【用户变量】下的【Path】修改为【D:\Develop\nodejs\node_global】 一定要用户变了下面，因为前面讲到是按照环境默认到c盘的所有改动下

如下图：

六：测试安装情况：

配置完后，安装个module测试下，我们就安装最常用的express模块，打开cmd窗口，
输入如下命令进行模块的全局安装：

npm install express -g     # -g是全局安装的意思

如下图：

接下来我们就安装本地仓库 ， 就和后端的maven配置是一样的

npm config set registry=http://registry.npm.taobao.org

输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站

（（（同时也可以像这样安装cnpm

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

刚刚安装的本地仓库是否成功我们来看看显示情况：

输入命令npm config list 显示所有配置信息，我们关注一个配置文件

npm config list

C:\Users\Administrator.npmrc

绿色的显示的文件详情信息：

使用nodepade++来编辑 或者text来打开 ，可以看到刚才的配置信息

可以看到 你的 刚刚设置的

prefix =D：Devolop\nodejs\node_global

cacha=D: Devolop\nodejs\node_cache

registry=http://registry.npm.taobao.org

检查一下镜像站行不行命令1

npm config get registry

检查一下镜像站行不行命令2

Npm info vue 看看能否获得vue的信息

注意，此时，默认的模块D:\nodejs\node_modules 目录

将会改变为D:\nodejs\node_global\node_modules 目录，

如果直接运行npm install等命令会报错的。

我们需要做1件事情：

（注意，一下操作需要重新打开CMD让上面的环境变量生效）

一、测试NPM安装vue.js

命令：npm install vue -g

这里的-g是指安装到global全局目录去

二、测试NPM安装vue-router

命令：npm install vue-router -g

运行npm install vue-cli -g安装vue脚手架

对path环境变量添加D:\nodejs\node_global

win10以下版本的，横向显示PATH的，注意添加到最后时，不要有分号【;】

重新打开CMD，并且测试vue是否使用正常

注意，vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，

他的配置并不全放在根目录下的 webpack.config.js 中。

初始化，安装依赖

运行npm install安装依赖

npm run dev

成功界面，提示打开地址http://localhost:8080

自动打开浏览器http://localhost:8080/#/

npm run build

生成静态文件，打开dist文件夹下新生成的index.html文件

nmp下新建出来的vue01的目录描述：