下载安装包 & 安装

打开 NodeJS 的官网，默认提供Windows版本的下载链接，现在版本是 10.16.3 LTS 版，LTS代表长期支持版本，一般新手建议使用这个版本，因为这个版本使用的人最多，出问题能找到解决方案的概率较大。如下图所示：

下载完成后双击下载好的 node-v10.16.3-x64.msi 文件开始安装，点击next进入下一步，勾选同意协议，然后一直点下一步，全部都是默认选项即可。

安装完毕后点击finish结束安装进程，然后按win键+R 输入cmd后敲回车，在打开的命令行界面，依次输入命令：

配置NodeJS和NPM

上面看到我们已经安装好了node和npm，但是现在还不能直接去使用，如果直接运行npm命令会报错，因为默认情况下，NPM安装的模块并不会安装到NodeJS的程序目录，我们用个示例来看一下：

我们安装node的时候 默认是 C:\Program Files\nodejs 目录，但是上图显示 C:\Users\gaoshuo1\package.json这个文件或者目录，我们看到默认把cluster目录装到了这个目录下面，这就说明，如果不修改npm的模块安装目录，那么它默认情况下都会安装到这里，随着你测试开发各种不同的项目，安装的模块越来越多，那么这个文件夹的体积会越来越大，直到占满你的C盘。这就是为什么要修改npm的配置的原因。

为了让nodejs正确地调用对应的模块，我们需要做以下两步操作：

修改NPM的缓存目录和全局目录路径

在C盘nodejs目录下创建两个目录，分别是node_cache和node_global，这是用来放安装过程的缓存文件以及最终的模块配置位置。配置完成后，执行下面这两个命令：

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

然后我们打开cmd命令行界面，在使用命令安装刚才的cluster模块，命令如下：

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

如果出现下面的提示

operation not permitted 应该是windows系统下的权限错误。
使用win+x,选择命令提示符（管理员），在里面运行命令就好了。

安装成功后 会在C:\Program Files\nodejs\node_global\node_modules目录下找到cluster目录。

配置npm和nodejs的环境变量

然后我们来配置npm的环境变量和nodejs的环境变量。在计算机图标上点右键，选属性，然后点击高级系统配置，弹出来的新窗口右下角有个环境路径，点击去，就能看到环境路径的配置界面，我们点击新建。然后在弹出来的窗口里，变量名填：NODE_PATH 变量值填：C:\Program Files\nodejs\node_modules\
填写好后点确定，然后就能看到我们配置好的NPM环境路径。

此时还需要修改一些nodejs默认的模块调用路径，因为模块的安装位置变了，如果nodejs的命令还到原来的位置去找，肯定是找不到安装的模块了。我们在环境变量窗口，选择Path，然后点击右下角的编辑，然后选择npm那个。点击右边的编辑，将其修改为：C:\Program Files\nodejs\node_global\

然后点确定，保存这个配置。

这个时候所有的配置工作才算完成了，然后打开一个新的cmd窗口。先输入命令：node
进入nodejs的交互式命令控制台，然后输入：require('cluster')

如果能正常输出cluster模块的信息，说明上面的所有配置就算生效了。

指定下载仓库地址

我们还需要做的最后一个工作是，将npm的模块下载仓库从默认的国外站点改为国内的站点，这样下载模块的速度才能比较快，只需要一个命令即可，命令是：

npm --registry https://registry.npm.taobao.org install cluster

上面的命令是临时使用国内一家npm源的地址来安装cluster模块。从下面图中可以看到，速度非常快。

如果想一直使用这个源的地址，那么可以使用下面这个命令来配置。

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

如果不想安装cnpm，可以需要手动指定镜像npm install --registry=https://registry.npm.taobao.org

如何创建vue项目

安装vue cli命令项目

安装完node后，我们还要安装 cli 命令工具：npm install -g @vue/cli @vue/cli-init
说明：（-g 意思是全局安装 这羊Vue会安装到 安装node 的文件夹下 否则会安装到 当前目录）
安装成功后，使用 vue -V 命令，查看版本号；

创建项目

创建一个基于 webpack 模板的新项目，使用 vue init webpack my-project 构建一个名为 my-project 的项目：
Vue 依然使用询问的方式，让我们对项目有一个初始化的信息

• Project name：项目名
• Project description: 项目描述
• Author: 作者
• Vue build：
  • 第一种：配合大部分的开发人员
  • 第二种：仅仅中有runtime
• Install vue-router? 是否安装vue-router
• Use ESLint to lint your code?是否使用ESLint来验证我们的语法。
• Pick an ESLint preser:使用哪种语法规范来检查我们的代码：
  • Standard: 标准规范
  • Airbnb: 爱彼迎规范
• Set up unit test: 设置单元测试
• Setup e2e tests： 设置端对端测试
• Should we run ‘npm install’:要不要帮忙你下载这个项目需要的第三方包 ，你也可以最后自己安装
  • 使用npm来下载
  • 使用yarn来下载

安装完成后，你可以在文件目录下看到这些文件

其中node-modules是依赖安装后出现的，没安装依赖以前是没有node_modules文件夹的

启动项目

cd my-project
npm run dev   // 使用命令启动项目

如上图显示，说明启动成功了，你可以访问 http://localhost:8080 开始你的项目啦

打包项目 & 项目部署

npm run 命令是启动了一个http web服务，可以直接使用 http://localhost:8080 访问项目
但是项目部署时，我们还要对项目进行打包操作，如下：

npm run build

看到上图的提示，就说明打包完成了，我们会在项目根目录看到新建一个dist目录，nginx将网站根目录配置到dist就可以直接访问了。

安装vue-element-admin

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

# 安装拓展
cnpm install

# 启动服务
npm run dev

然后浏览器访问 http://localhost:9527 就ok啦

参考文献：
https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html