SpringBoot + Vue 前后端分离之项目构建

使用Vue-ui构建前端项目

环境准备

安装Node.js

温馨提示 ! ! 有关路径命令按照自己nodejs的安装目录,管理员权限下打开终端执行命令

• 下载nodejs,并配置环境变量

• 自己nodejs目录下新建两个目录"node_cache"、“node_global”

• 命令行输入npm config set prefix “D:\applications\study\nodejs\node_global”

• 命令行输入npm config set cache “D:\applications\study\nodejs\node_cache”

• 命令行输入npm config set registry=http://registry.npm.taobao.org 配置淘宝镜像

• 命令行输入npm config get registry 看镜像配好没有

• 命令行输入npm install npm -g

• 增加环境变量"NODE_PATH"内容是：“D:\applications\study\nodejs\node_global\node_modules”,添加到环境变量

• 添加"D:\nodejs\node_global"到环境变量中

安装Vue.js

• 命令行输入npm install -g @vue/cli

创建项目

• 命令行输入[ vue ui ]启动vue-ui图形化界面创建项目
• 选择项目存放的的地址,点击创建新项目

• 输入项目名,取消初始化git,下一步

• 选择手动,下一步

• 选择Router和Vuex,下一步

• 创建项目

• 创建项目,不保存预览

• 稍等片刻

• 前端项目创建成功

使用idea导入vue前端项目即可

---

使用idea构建SpringBoot后端项目

• 后端就正常构建SpringBoot,只需提供接口即可,无任何前端代码

• 前端只需通过axios调用后端接口即可

---

注意事项 ! !

• idea中运行vue前端项目需要安装vue插件
• idea终端执行[ npm run serve ] 启动vue前端项目
• 前端和后端的端口号不要冲突
• 有的vue前端命令需要管理员权限
• 前端代码属性自动补全，需要下载对应插件，比如使用ElementUI，就需要下载element插件