【9-前端项目的搭建部署、Node安装、VSCode安装】

一.知识回顾

【0.三高商城系统的专题专栏都帮你整理好了，请点击这里！】
【1-系统架构演进过程】
【2-微服务系统架构需求】
【3-高性能、高并发、高可用的三高商城系统项目介绍】
【4-Linux云服务器上安装Docker】
【5-Docker安装部署MySQL和Redis服务】
【6-Git安装与配置过程、Gitee码云上创建项目、IDEA关联克隆的项目】
【7-创建商城系统的子模块并将修改后的信息使用Git提交到Gitee上】
【8-数据库表结构的创建&后台管理系统的搭建】

二.Node下载安装与配置

2.1 Node下载

因为前端的项目用到的技术：Vue+ElementUI，所以我们需要使用Node。
大致步骤:

1. 去官网下载对应的版本
2. 无脑安装
3. 配置环境变量
4. 验证是否成功

好了，这里我就我一个步骤一个步骤介绍了，学到这里，相信大家肯定没有问题了，当然，需要的可以直接点击下面这篇博客，node安装博客

2.2 Node环境变量的配置

配置环境变量

cmd命令窗口使用node -v命令和npm -v命令查看对应的版本信息

2.3 修改npm默认缓存数据的位置

注意：需要我们进行下一步的配置，否则，随着你测试开发各种不同的项目，安装的模块越来越多，这个文件夹的体积就会越来越大，直到占满你的C盘。所以我们要修改npm的配置。

1. 在nodejs文件夹下，创建两个为文件夹： node_global;node_cache
   这是用来放安装过程的缓存文件以及最终的模块配置位置
   

2. 使用下面命令将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录
   npm config set prefix “node_global路径位置”
   npm config set cache “node_cache路径位置”

3. 高级系统设置——环境变量
   新增系统变量：
   变量名填：NODE_PATH
   变量值填：D:\node\node_modules
   

修改完成后测试：
输入命令：node 回车——再输入 require(‘cluster’)
出现下图表示成功。

三.VScode的安装

前端我们就选用Vscode，当然有很多选择，大家选择自己喜欢的就好，不做强制要求。

3.1 VSCode下载

官网下载对应的版本
然后双击运行，无脑安装。

3.2 VsCode所用的前端插件下载

所需要的软件，也不是全部都需要，以后会需要，如果你是前端开发工程师，那么这些肯定都是必须的。

操作步骤

四.Vue前端项目的部署

Vue项目的开始与安装：https://github.com/renrenio/renren-fast-vue/wiki/Getting-started

设置代理镜像

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

初始化

cnpm install

安装中如果出现了sass错误提示

那么通过

cnpm install --save node-sass

然后通过

npm run dev

启动成功

访问的页面