window10 使用NPM安装运行第一个VUE程序 (非CNPM)

一. 下载并安装Node.js

1.下载

JavaScript是脚本语言，需要解析器才能运行。在html文档中编写的js，浏览器就是它的解析器。而对于需要独立运行的JS，nodejs就是它的解析器。下载Node.js

官网界面：

可在首页点击版本包进行下载。

也可点击DOWNLOADS按钮，在其中选择合适的安装包就行下载。

２.安装

笔者下载的是msi格式的安装包（这个随个人喜好），下载完后安装初始界面如下图：

点击【Next】进入下一步：

选择安装位置：笔者这里目录选择的是D盘（默认安装到C:\Program Files），不建议安装到C盘，因为以后使用 NPM 安装模块会增加C盘容量。选择完后点击【Next】进入下一步：

默认选择，点击【Next】进入下一步：

可自行选择是否自动安装必要的工具（非必需），点击【Next】进入到下一步：
PS: 如果勾选了此处，安装完成后会弹出一个命令行界面，接着会下载大约3GB的工具文件。命令行窗口界面在下面的步骤中可以看到。

点击【 Install 】开始安装：

点击【 Finish 】，安装完成！

如果安装时勾选了自动下载必要的工具，在点击【 Finish 】后会弹出如下命令行窗口（按任意键即可开始下载）：

完成安装后，按住【 win + r 】，输入cmd 打开命令行窗口。

输入 node -v     显示 node.js 版本
输入 npm -v      显示 npm 版本

PS: npm 随安装程序自动安装，作用就是对Node.js依赖的包进行管理

二、环境变量配置

1. 设置nodejs prefix（全局）和cache（缓存）路径

在 nodejs 程序的安装目录中创建两个文件夹, 分别命名为：
node_cache，node_global

在命令行中输入以下命令：

npm config set cache "D:\nodejs\node_cache"     设置缓存文件夹
npm config set prefix "D:\nodejs\node_global"   设置全局模块存放的文件夹

设置成功后，之后用命令npm install XXX -g安装以后模块就在D:\nodejs\node_global文件夹中。

2. 配置环境变量

打开环境变量窗口的两种方法：

1. Windows10系统可在开始菜单右侧的搜索栏中输入【 环境变量】点击【编辑系统环境变量】进行打开。
2. 右击此电脑，选择属性 -> 在弹出的界面中点击 【高级系统设置】进行打开。
   
   
   点击环境变量进入到环境变量的配置界面：
   
   修改用户变量，选择 Path 后点击编辑：在弹出的编辑界面中，点击【新增】，添加 node_global 文件夹路径。
   
   接着新增系统环境变量：
   
   
   在之前打开的环境变量窗口，点击【确定】按钮，完成添加。

由于npm运行缓慢，配置国内淘宝镜像源：

在终端输入下面的命令进行设置：
npm config set registry=http://registry.npm.taobao.org

配置完后，可输入： npm config get / npm config list 查看配置信息（此处两条命令都可以达到相同的效果）

三. 安装vue

在终端输入 npm install vue -g 即可安装到 node_global 全局目录中。

当你再次打开node.js 安装目录 进入到 【node_global 】目录中，你会发现目录中多了一个 node_modules 的文件夹：

点击进入到 node_modules 目录中，就可以看到刚刚安装的 vue 模块了，如此 vue 就安装成功了。

接下来，我们安装 vue-cli 脚手架工具。（ 此工具也会安装到上面的 D:\nodejs\node_global\node_modules 目录中，后续通过 npm install xxx -g 命令安装的模块都会在此文件夹中 ）

命令行工具输入：  npm install vue-cli -g

四. 创建项目并运行

以上的步骤操作完以后，就到了我们创建项目的时候了，首先可自行建立一个文件夹，用于存放vue项目。笔者在这里在D盘中创建了一个文件夹。创建完后使用命令行工具进入到此文件夹中：

windows 系统中需先进行盘符的切换，然后才可进入到盘符对应的文件夹中。
d:
cd D:\encoding\project\vue

构建项目：

vue init webpack 项目名

选项说明：

选项	说明
Project name	项目名称
Project description	项目描述
Author	项目作者
Vue build	项目构建 （推荐选择第一个：运行+.编译）
Install vue-router?	是否安装路由 (Y/n)
Use ESLint to lint your code?	使用ESLint管理代码 (Y/n)
Set up unit tests	安装单元测试 (Y/n)
Setup e2e tests with Nightwatch?	安装 e2e 测试 （Y/n)
Should we run npm install for you after the project has been created? (recommended)	在项目创建之后，我们是否应该为您运行“npm install”？（推荐）

等待安装，安装结束显示如下界面：

黄色字体告知如何运行项目

使用以上命令运行：
前往浏览器，输入 http://localhost:8080 ，显示项目成功界面。
如此，vue的安装和运行就完成了。

最后

希望本篇博客对大家有所帮助。如果大家有碰到和笔者不一样的情况或是在其过程中碰到了一些问题，也欢迎大家留言，探讨学习。
PS：笔者看了其它的一些安装vue的教程，发现大多数都是用 cnpm 进行的安装，笔者本篇文章并未用到 cnpm ，使用的是 npm 并成功创建并运行了项目。