Web开发环境搭建及配置

环境搭建 & 开发工具

一、基本环境搭建（node.js & npm）

1、下载 node.js

下载地址：http://nodejs.cn/

2、安装 node.js

mac

安装之后在控制台检测安装结果

1、检测 node 命令: node -v（打印出版本号即安装成功）

2、检测 npm 命令: npm -v（打印出版本号即安装成功）【nodejs 中有集成 npm，无须独立安装】

windows

1、安装 node（最好改到安装 D 盘，后续演示将以 D 盘为例）

2、安装完成后通过 CMD 终端检测安装结果

2.1、检测 node 命令: node -v（打印出版本号即安装成功）

2.2、检测 npm 命令: npm -v（打印出版本号即安装成功）【nodejs 中有集成 npm，无须独立安装】

3、 到我们安装的 node.js 的根目录新增一下两个文件夹：node_cache、node_global

4、将我们新增的文件夹添加到配置中（运行以下两条命令）

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

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

5、校验我们的配置是否生效，执行命令：npm list -global

6、设置系统环境变量

6.1、增加环境变量 NODE_PATH 内容是：D:\nodejs\node_global\node_modules

6.2、在 path 中新增 D:\nodejs\node_global

二、相关环境准备

基本环境搭建完成之后，可以安装相应的其他开发环境，比如 webpack（打包工具）和 vue-cli

1、webpack 安装

CMD 终端输入以下命令：npm install webpack webpack-cli -g

2、vue-cli 安装

CMD 终端输入以下命令：npm install @vue/cli -g

 

三、开发工具 Visual Studio Code

1、下载 Visual Studio Code （简称 VS Code）并 安装

https://code.visualstudio.com/

2、安装完成后 设置 默认以管理员身份运行

因为项目需要依靠终端来安装依赖并在本地生成文件，部分设备可能会因没有权限而安装失败，所以需要开启默认管理员身份运行。

3、安装前端插件

推荐插件：

1、chinese（中文简体）

2、AutoClost Tag（自动闭合标签）

3、Auto Rename Tag（自动完成另一侧标签的同步修改）

4、Beautify（格式化代码）

5、vetur（vue 代码高亮）

6、Vue2 Snippets（Vue 代码提示）

7、open（可以快捷打开 html）