VUE+SPRING BOOT step by step

安装VUE

安装node.js

略过

检查node.js和npm

检查node.js，npm及更新npm为最新版本

Microsoft Windows [版本 10.0.17134.1610]
(c) 2018 Microsoft Corporation。保留所有权利。

C:\Users\asus>node -v
v12.18.2

C:\Users\asus>npm -v
6.14.5

C:\Users\asus>npm -g install npm

安装cnpm

cnmp代替默认npm，主要是加速及避免资源限制

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

安装脚手架vue-cli

cnpm install -g vue-cli

构建项目

命令：

vue init webpack myprj

安装项目依赖

cd myprj
cnpm install

运行项目

nmp run dev

done.

从后台获取数据

后台API接口

http://192.168.0.21:8888/Poseidon/getCovers

返回：

在ssm框架对应的Controller和方法中，添加注解：

@CrossOrigin

前端代码

安装需要的包

我们前端用的是EasyUI for VUE，所以

cnpm install vx-easyui --save

我们的请求用的是axios，所以

cnpm install axios

导入Easyui js文件

修改main.js文件

// 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'
import 'vx-easyui/dist/themes/default/easyui.css';
import 'vx-easyui/dist/themes/icon.css';
import 'vx-easyui/dist/themes/vue.css';
import EasyUI from 'vx-easyui';
Vue.use(EasyUI);
// 引用axios， 并设置基础URL为后端服务API地址
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8888/Poseidon'
// 将API方法绑定到全局
Vue.prototype.$axios = axios
Vue.config.productionTip = false

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

修改主路由文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import CoverList from '@/components/CoverList'

Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/coverlist',
      name: 'CoverList',
      component: CoverList
    }
  ]
})

新建CoverList.vue

运行测试

在控制台输入：

npm run dev

结果可还行