一.知识回顾

【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环境变量的配置

配置环境变量

vscode指定node_modules路径 vscode怎么配置node_vue

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

vscode指定node_modules路径 vscode怎么配置node_npm_02

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

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

  1. 在nodejs文件夹下,创建两个为文件夹: node_global;node_cache
    这是用来放安装过程的缓存文件以及最终的模块配置位置
  2. vscode指定node_modules路径 vscode怎么配置node_vscode_03

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

vscode指定node_modules路径 vscode怎么配置node_vue_04

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

修改完成后测试:

输入命令:node 回车——再输入 require(‘cluster’)

出现下图表示成功。

vscode指定node_modules路径 vscode怎么配置node_node_05

三.VScode的安装

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

3.1 VSCode下载

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

3.2 VsCode所用的前端插件下载

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

vscode指定node_modules路径 vscode怎么配置node_vscode_06

操作步骤

vscode指定node_modules路径 vscode怎么配置node_vscode_07

四.Vue前端项目的部署

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

设置代理镜像

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

vscode指定node_modules路径 vscode怎么配置node_vscode_08

初始化

cnpm install

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

vscode指定node_modules路径 vscode怎么配置node_前端_09

那么通过

cnpm install --save node-sass

vscode指定node_modules路径 vscode怎么配置node_vscode_10

然后通过

npm run dev

启动成功

vscode指定node_modules路径 vscode怎么配置node_前端_11

访问的页面

vscode指定node_modules路径 vscode怎么配置node_vscode_12