Windows安装VueJs环境

1、安装node.js

node.js的官方地址为：https://nodejs.org/en/download/；然后下载对应版本，安装nodejs。

检查是否安装成功（打开）：

    D:\nodejs>node --version 或者 node -v 

    v6.11.4

    D:\nodejs>npm -version 或者 npm -v 

    3.10.10

2.设置global和cache路径

（1）在nodejs的安装目录下，新建node_global和node_cache两个文件夹，如安装目录为“D:\nodejs\”

（2）或者用命令设置global和cache：

    D:\nodejs>npm config set prefix "D:\nodejs\node_global"

    D:\nodejs>npm config set cache "D:\nodejs\node_cache"

    

    设置成功后，后续用命令npm install -g XXX安装，模块就在D:\nodejs\node_global\node_modules里。

3.设置环境变量

说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径。

（1）新增系统变量NODE_PATH：设置成“D:\nodejs\node_global\node_modules”。

（2）修改用户变量PATH：找到node.exe的路径"D:\nodejs\node.exe"，把"D:\nodejs"添加加到PATH后面(用英文分号";"分隔)。

环境变量如何打开：计算机(右键) -> 属性 -> 高级系统设置 -> 环境变量

 

4.安装国内优秀镜像

基于node.js,利用淘宝npm镜像安装相关依赖。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像（http://npm.taobao.org/）

cmd命令行中输入:

    D:\nodejs>npm install -g cnpm --registry=http://registry.npm.taobao.org

5.安装vue (安装在nodejs下面)【可以略过】; 

在用 Vue.js 构建大型应用时推荐使用 NPM 安装，NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

    D:\nodejs>npm install vue

如果报错：

        npm WARN enoent ENOENT: no such file or directory, open 'D:\nodejs\package.json'

        npm WARN nodejs No description

        npm WARN nodejs No repository field.

        npm WARN nodejs No README data

        npm WARN nodejs No license field.

解决方案：

    在命令行切换到安装nodejs文件下的nodejs\node_modules\npm  后执行npm install cheerio   

     

    D:\nodejs>cd node_modules\npm

    D:\nodejs\node_modules\npm>npm install vue

6. 安装vue-cli脚手架构建工具

    D:\nodejs>npm install -g vue-cli

    至此，我们需要的环境及工具已经准备好了。接下来，我们使用vue-cli来构建项目。

7.建一个基于 webpack 模板的新项目

首先，进入到E我们的工作目录为 E:\VueJS。此目录需先建好，目前是空的，这个工作目录以后会添加各个项目目录。

在VueJs目录下，运行命令

    E:\VueJS>vue init webpack MyfirstVue

    

    其中，webpack是构建工具、模块打包器，也就是整个项目是基于webpack的。其中，firstVue是项目文件夹的名称，这个文件夹会自动生成在vuejs这个工作目录中。

    如果提示 "vue不是内部或外部命令，也不是可运行的程序或批处理文件"

    解决方法：

      1.在电脑内搜索vue.cmd

      2.将vue.cmd的路径加入Path环境变量中，即可。如我的路径是“D:\nodejs\node_global”(用英文分号";"隔开)。    

8.安装过程中，需要我们输入项目名称，描述，作者，版本（独立版）,使用ESLint规范等等。

此时，我们看到工作目录下已经自动生成了目录firstVue。

主要用的包都在package.json中

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

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

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

注: 如果卸载重装，更换安装目录后，需重新执行步骤二并修改里面配置的路径

可以借鉴：http://www.cnblogs.com/RexSheng/articles/6934413.html

Vue.js安装文档：https://cn.vuejs.org/v2/guide/installation.html