java 搭建一个 Spring Boot + SSM + VUE的项目 -- 前端

参考文章 ： java 搭建一个 Spring Boot + SSM + VUE的项目 – 后端
参考文章 : Spring Boot+Vue从零开始搭建系统（一）：项目前端_Vuejs环境搭建
参考文章 : Spring Boot+Vue从零开始搭建系统（二）：项目前端_Vuejs目录结构描述
参考文章 : Spring Boot+Vue从零开始搭建系统（三）：项目前后端分离_实现简单登录demo

用到的技术栈有：

• 开发环境：Windows
• 开发工具：Visual Studio Code
• 框架：node.js

安装node.js

进入Node.js官网：https://nodejs.org/en/ ; 选择下载并安装Node.js。

左边的是稳定版,右边的是快速版.我们下载左边的稳定版就好了
下载完之后一路安装就OK了

验证Node

win+r召唤出运行窗口，输入cmd打开命令行窗口。输入node -v即可得到对应的Node.js版本

更新NPM

win+r召唤出运行窗口，输入cmd打开命令行窗口。输入以下命令npm -g install npm，更新npm至最新版本

安装cnpm

执行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org ,使用npm的国内镜像（npm 国内镜像 https://npm.taobao.org/）cnpm 命令代替默认的npm命令，增加依赖包加载速度且避免资源限制。

cnpm安装脚手架vue-cli

在命令行中运行命令 cnpm install -g vue-cli 安装脚手架。

构建项目

将vue项目建在F盘的vue-workspace文件夹下，利用命令进入此目录。
在cmd中输入盘符F:回车即可进入F盘，
然后执行命令进入F:workspacesvue-workspace路径目录下，
再输入新建项目命令 vue init webpack javalsj-vue，执行后会自动生成vue项目。、
这里的目录不是固定的，自己喜欢就好

安装项目依赖

上面脚手架自动生成的vue项目不能直接运行，需要加载上项目需要的依赖包才能运行。通过在cmd中使用命令先定位到项目所在路径目录下F:workspacesvue-workspacejavalsj-vue，然后输入命令 cnpm install 安装项目所需的依赖包资源。
（博主在下载第三方开源项目运行的时候，有时会遇到奇怪的报错，然后通过先执行cnpm rebuild node-sass，后执行cnpm install解决，此步骤不是必须的。）

运行项目

项目准备完毕后，现在可以运行vue初始项目看效果了。
在cmd中，注意需要使用命令先定位到F:workspacesvue-workspacejavalsj-vue目录下，然后再输入命令npm run dev 来运行项目。
也可以直接在项目文件资源夹中输入cmd回车。可省去在cmd中定位的命令

访问项目

项目运行成功后浏览器访问地址 http://localhost:8080 就可以查看效果啦。

整合项目

1. App.vue

在APP.VUE中修改成首页
这里的话其实是不需要 ; 来结尾的.图中没改

2. main.js

修改main.js,记得这里的URL的IP换成自己的

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

// 引用axios，并设置基础URL为后端服务api地址
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8081/api'
// 将API方法绑定到全局
Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

启动完整项目

1. 启动后端项目

2. 启动前端项目

警告，有些代码不规范。但是不影响程序运行

结果