前后端分离项目环境搭建

1. 使用到的技术和工具

• springboot + vue项目的搭建

• 工具

  • idea，maven
  • nodejs

2. 后端框架搭建

利用maven创建springboot项目

3. 前端项目搭建

1. 安装相关工具

1. nodejs：
   • 一个开源、跨平台的 JavaScript 运行时环境，可以理解成java当中需要安装的jdk；
   • 官网：https://nodejs.org/en
2. npm
   • JavaScript依赖包管理工具，全世界都可以用它来共享javascript包，负责前端项目的打包，插件下载等，可以理解成java中的maven
   • 官网：https://www.npmjs.com/
3. vite
   • 快速构建前端Vue项目的脚手架，可以理解为开发Spring Boot的Spring Initializr快速构建工具
   • 官网：https://cn.vitejs.dev/

1. 安装node.js

1. 下载：https://nodejs.org/en/download

2. 安装：解压即完成安装(.zip版本)

3. 在安装目录下（node.exe所在的目录）创建以下俩个文件夹

   • node_global （依赖库）
   • node_cache （缓存）

4. 在安装目录下cmd进入dos窗口，执行

   • npm config set prefix “E:\worktool\node\node_global” 【这里的路径要改为自己的文件路径】

   • npm config set cache “E:\worktool\node\node_cache” 【这里的路径要改为自己的文件路径】

5. 可以查一下，看看有没有设置成功：

   • npm config get prefix
   • npm config get cache

6. 配置环境变量

   • 在path中添加 nodejs的安装路径 和 node_global文件夹所在的路径。如：
     • E:\worktool\node
     • E:\worktool\node\node_global
   • 在任意目录打开dos窗口进行测试：
     • node -v
     • npm -v

2. 安装 npm

• 新版的Node.js已经自带npm，安装Node.js时就已经安装npm，所以不需要再安装npm，只需要配置一下npm仓库源即可

• dos下查看目前的npm仓库源（位置）：

  npm config get registry
  

  可以更换npm的仓库源，提高下载速度

  //设置淘宝源
  npm config set registry https://registry.npmmirror.com/
  

• 安装一个模块（js依赖库）测试一下看看：

  npm install axios -g  #其中-g是全局安装的意思；
  

  全局安装就会把axios模块安装到前面创建的node_global目录下，如果不加-g就会安装到了当前执行命令所在的目录下：C:\Users\Administrator

3. 安装vite

• vite是vue.js的脚手架，用于自动生成vue.js的项目模板（项目基础骨架）。之前比较流行的是 Vue-cli

• 创建vue工程

  npm create vite@latest 
  

  • npm是Node Package Manager的缩写，是Node.js的一个包管理工具。
  • create是一个npm的命令，用于创建新的npm包。
  • vite是一个基于Vue.js的静态网站生成器，
  • @latest表示使用最新版本的vite，即npm create vite@latest为创建一个使用最新版本vite的npm包；

• VUE 报错 ＜npm ERR! EPERM: operation not permitted, open ‘路径‘ ＞erron -4048

  • 原因：我们在安装node.js的时候将 node_cache、node_global 文件夹查询配置到了其他盘下面，导致无权限访问
  • 解决方案：在本地将这个文件夹赋予权限即可
    • 

2. 搭建前端项目

1. 右击刚才创建好的后端项目，点击open in选项，点击explorer来到该项目在磁盘中的真实路径

2. 在此处输入cmd，通过命令 npm create vite@latest 创建前端工程

   1. 输入前端项目的名称

      

   2. 选择该项目使用的框架（这里我使用的是vue）

      

   3. 选择该项目使用的编程语言（js）

      

   至此，前端项目搭建完成

4. vue项目工程结构

上面我们通过了vite脚手架创建了vue工程，以下是该工程的结构

1、node_modules/ 项目依赖的各种js依赖包；

2、public/ 公共的静态文件，一个网站图标；

3、src/ 源代码，我们前端写的源代码都会在这个文件夹下；

4、gitignore 提交git时忽略哪些文件；

5、index.html 项目的首页，访问入口文件；

6、package.json 整个项目对js依赖库的配置，还包括了启动、构建项目命令等；（类似maven的pom.xml）

7、package-lock.json 锁定各个js依赖包的来源和版本；

8、README.md 项目的使用帮助文档；

9、vite.config.js vite的配置文件；

5. 启动Vue项目工程

在idea中点击package.json里面的绿色箭头运行。

命令等；（类似maven的pom.xml）

7、package-lock.json 锁定各个js依赖包的来源和版本；

8、README.md 项目的使用帮助文档；

9、vite.config.js vite的配置文件；

5. 启动Vue项目工程

在idea中点击package.json里面的绿色箭头运行。

• 需要在idea中进行配置：settings ==》 搜索 ”node.js“ ==> 配置 node interpreter的值为 node.exe的安装路径