二、Node.js、Vue安装及环境配置

安装的版本号：

Node.js 14.17.4 LTS
node v14.17.4
npm 6.14.14
@vue/cli 4.5.13

1. Node.js安装和配置（Windows10)

1.官网https://nodejs.org/en/选LTS

一路next 安装完成后
2.查看node以及npm版本号
最新版的node在安装时同时也安装了npm,执行npm -v查看npm版本

3.默认情况下，我们在执行npm install -g XXXX时，下载了一个全局包，这个包的默认存放路径位C:\Users\Administrator\AppData\Roaming\npm\node_modules下，可以通过CMD指令npm root -g查看

4. 一部分常用的命令，如下

npm -v：查看npm安装的版本。
npm init：会引导你创建一个package.json文件，包括名称、版本、作者等信息。
npm list：查看当前目录下已安装的node包。
npm ls：查看当前目录下已安装的node包。
npm install moduleNames：安装Node模块到本地目录node_modules下。
npm install < name > -g：将包安装到全局环境中。
npm install < name > --save：安装的同时，将信息写入package.json中，项目路径中如果有package.json文件时，直接使用npm install方法就可以根据dependencies配置安装所有的依赖包，这样代码提交到git时，就不用提交node_modules这个文件夹了。
npm install < name> --save-dev：安装的同时，将信息写入package.json中项目路径中如果有package.json文件时，直接使用npm install方法就可以根据devDependencies配置安装所有的依赖包，这样代码提交到git时，就不用提交node_modules这个文件夹了。

2. npm的环境配置

注：这里的环境配置以及创建空白文件夹，主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，因为以后在执行类似：npm install express [-g] 的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间，所以才进行的配置，如果C盘容量足够，可省略这一步，不影响node使用。

① 打开安装的目录（D:\nodejs）

② 在安装目录下新建两个文件夹【node_global】和【node_cache】

③ 再次打开cmd命令窗口，输入npm config set prefix “你的路径\node_global”（“你的路径”默认安装的情况下为 C:\Program Files\nodejs）

④ npm config set cache “你的路径\node_cache” 可直接复制刚刚新建的空文件夹目录

⑤ 安装最开始的方法，打开系统属性-高级-环境变量，在系统变量中新建 变量名：NODE_PATH,变量值： D:\nodejs\node_global\node_modules

⑥ 编辑用户变量（环境变量）的 path，将默认的 C 盘下 APPData\Roaming\npm 修改为 D:\nodejs\node_global，点击确定


⑦ 测试，配置完成后，安装个module测试下，我们就安装最常用的express模块，打开cmd窗口，输入如下命令进行模块的全局安装：
npm install express -g
需要注意的是，要以管理员身份打开cmd窗口，否则会失败！！

补充 :配置淘宝镜像源

查看npm下载源 npm config get registry

npm工具在国内网络比较慢，所以建议走cnpm 镜像来download。现在用的都是淘宝镜像源（https://registry.npm.taobao.org），
装镜像cnpm，在cmd中输入:npm install -g cnpm --registry=https://registry.npm.taobao.org

验证是否成功的方式为cnpm config get registry 或 cnpm config list

3. 安装Vue及脚手架

1. Vue Cli 官网介绍

https://cli.vuejs.org/zh/guide

2. 卸载旧版本

卸载2.x版本 npm uninstall vue-cli -g
卸载3.x版本 npm uninstall @vue/cli -g

3. 安装最新版 Vue CLI

1.安装
npm install @vue/cli –g
2.检查版本号
用vue --version或者vue -V命令来检查其版本：

4. 创建一个基于 webpack 模板的新项目（创建基于脚手架的Vue项目）

1.在目录VueDemo下面创建一个vue项目hello

执行命令 vue init webpack hello

说明： Vue build ==> 打包方式，回车即可；

Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；
至此模板项目创建成功（如下图所示）

2.进入项目并运行
cd hello
npm run dev

3. 访问网址 http://localhost:8080
成功了！ ！