Node.js、npm环境配置与Vue项目创建

一、Node.js、npm简介

1. Node.js

2. npm

3. npm和Node.js的发展

二、Node.js（内置npm）的下载与安装

三、Vue CLI脚手架的安装与项目的创建：

1. 在用Vue构建大型应用时推荐使用npm安装

2. 启动并运行vue项目

3. 在IDEA中运行Vue项目

4. elementUI的安装配置

一、Node.js、npm简介

1. Node.js

Node.js是一个Javascript运行环境(runtime environment)，不是一个js文件，实质是对Chrome V8引擎进行了封装。Node.js 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python 等服务端语言平起平坐的脚本语言。Node.js提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。Node.js是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。

chrome浏览器和Node.js在解析javascript都使用了v8引擎：

2. npm

当一个网站依赖的js代码越来越多，开发过程将变得更加复杂：去 jQuery 官网下载 jQuery；去 BootStrap 官网下载 BootStrap；去 Underscore 官网下载 Underscore等等，于是npm（Node Package Manager，包管理工具）应运而生，这一点和maven、gradle十分相似，只不过maven、gradle是用来管理java jar包的，而npm是用来管理js的。

npm的实现思路和maven、gradle是一样的：
1、有一个远程代码仓库（registry），在里面存放所有需要被共享的js代码，每个js文件都有自己唯一标识。
2、用户想使用某个js的时候，只需引用对应的标识，js文件会自动下载下来。

3. npm和Node.js的发展

npm作者将npm开发完成后发邮件通知 jQuery、Bootstrap、Underscore 作者，希望他们把 jquery、bootstrap、underscore 放到npm远程仓库，但是没有收到回应，于是npm的发展遇到了瓶颈。这时Node.js作者也将Node.js开发完成，但是 Node.js 缺少一个包管理器，于是他和 npm 的作者一拍即合、抱团取暖，最终 Node.js 内置了npm，这也就是现在安装Node.js之后不用另外安装npm就有npm版本的原因，且有时候我们只想单独安装npm，不想安装node.js，这个好像是不行的。后来Node.js被开发者广泛使用之后，大家开始用npm来共享js代码了，于是 jQuery 作者也将 jQuery发布到npm了。所以现在，我们可以使用npm install jquery 来下载 jQuery 代码。现在用 npm 来分享代码已经成了前端的标配。

二、Node.js（内置npm）的下载与安装

2.1 Windows系统

配置js环境（相当于给java配置JVM），在nodejs官网（Node.js 中文网）下载配置node环境，根据电脑或虚拟机系统来选择即可，这里我选择Windows64位安装包（.msi）为例：

安装过程：

安装完成后检查一下版本，“开始”右击开启powershell（管理员）命令窗口，输入node -v检查node环境，npm -v检查相应工具版本：

2.2 Mac OS系统

1.安装Homebrew：在Mac OS系统中有一个管理安装工具包的工具，叫做Homebrew，在安装node.js之前需要先安装Homebrew以方便node.js的下载，首先检查自己的电脑有没有安装Homebrew，在终端输入以下指令：

上图说明还没有安装Homebrew，Homebrew的安装方法如下， Homebrew官网：

The Missing Package Manager for macOS (or Linux) — Homebrew

在官网中可以找到下载命令，输入下载命令下载Homebrew：

在终端输入命令：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

可能会出现下面的错误：

fatal: unable to access 'https://github.com/Homebrew/brew/': LibreSSL SSL_read: error:02FFF03C:system library:func(4095):Operation timed out, errno 60
Error: Fetching /opt/homebrew/Library/Taps/homebrew/homebrew-core failed!
Fetching /opt/homebrew failed!
Failed during: /opt/homebrew/bin/brew update --force --quiet

解决方式：

git config --global --unset http.proxy
git config --global --unset https.proxy

安装成功：

执行brew update更新homebrew；

执行命令行brew install node安装node。执行npm -v即可看到安装好的npm版本，如下：

三、Vue CLI脚手架的安装与项目的创建：

1. 在用Vue构建大型应用时推荐使用npm安装

在powershell（管理员）命令窗口，输入命令 npm install -g @vue/cli（旧版）或 npm install vue（最新版，取自vue官网Vue.js），等待十分钟左右，安装完成（也可以自行百度使用镜像，速度较快）：

表示vue CLI（脚手架）安装完成。

vue --version：查询Vue CLI版本。（如果是在IDEA工程运行过程中安装CLI则需要重启IDEA，其中的Terminals输入框中输入npm指令才能起作用）

可能会出现类似的报错，大概的意思是系统禁止此脚本运行：

vue无法加载文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps1因为在此系统上禁止运行脚本

解决方法：
1、管理员身份运行PowerShell（命令提示符，来源于Linux的命令提示符也叫Shell）

2、执行：set-ExecutionPolicy RemoteSigned （签名或运行这些脚本）即可完成。

2. 启动并运行vue项目

启动vue项目管理器，打开命令行，输入命令vue ui：

将Router和Vuex选中，将Linter\Formatter取消：

打开历史记录：

正在创建：

创建完成：

点击任务，进行测试和热更新，点击运行。测试完成，编译成功：

查看输出结果：

点击本地连接和网络连接:

在命令行关掉（Ctrl +c），随即页面显示已断开连接：

也可以将输出结果呈现出客户端桌面app形式，但需要安装安装桌面程序插件，输入指令vue add electron-builder，选择版本：

接着运行，输入指令npm run electron:serve：

运行完成，随即弹出客户端，理论上可以在结果中的文件路径中找到，但实际上没有.exe文件，不知道是什么问题（？）

3. 在IDEA中运行Vue项目

把JavaScript版本改成高版本：

在Terminals栏输入npm run serve，运行vue页面：

4. elementUI的安装配置

vue中一般会用到组件化开发elementUI，安装element-ui组件（官网Element - The world's most popular Vue UI framework），在Terminal终端中输入：

npm install --save element-ui