vue+elementui+springboot构建简单的前后端分离框架项目

相关文章链接：

Win10安装Node.js

Eclipse与IDEA创建一个Maven的Java Web项目

观前提示：

本文所使用的IDEA版本为ultimate 2019.1，JDK版本为1.8.0_141。

1.安装node.js

参考文章：Win10安装Node.js

2.安装cnpm

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以我们要安装淘宝镜像的cnpm。

执行命令

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

执行命令

cnpm -v

可以查看cnpm的版本

3.安装vue-cli

执行命令

cnpm install -g @vue/cli

执行命令

vue -V

可以查看安装的版本

4.创建Vue项目

执行命令

vue create 项目名

选择默认即可


进入项目中cd vuedemo

执行命令

npm run serve

访问一下

项目创建成功。

5.安装相关组件

5.1 安装element-ui

cnpm install element-ui --save

5.2 安装axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js中。可以理解为ajax。

详情链接网址：axios

执行以下命令安装axios

cnpm install axios --save

5.3 安装vue-router

Vue Router 是 Vue.js 官方的路由管理器。

详情链接网址：Vue Router

执行以下命令安装vue-router

cnpm install vue-router --save

5.4 安装qs

qs可将对象序列化，防止传输到后台的数据接收不到。

执行以下命令安装qs

cnpm install qs --save

5.5 安装Vuex

Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式进行更改。

详情链接网址：Vuex

执行以下命令安装Vuex

cnpm install vuex --save

6.IDEA安装Vue.js插件

点击File->Settings…

选择Plugins -> 搜索框输入vue -> Install -> OK -> 重启IDEA使插件生效。

这里由于我已经安装过Vue.js插件了，所以显示Installed。

点击File -> Settings… -> Languages & Frameworks -> JavaScripts -> 在JavaScript language version选择ECMAScript 6 -> OK

7.IDEA新建一个空项目

选择Empty Project->Next

填写项目名称->Finish

8.引入新建的vue项目

在Project Structure中引入新建好的vue项目。

选择好项目后->默认第一项Create module from existing sources-Next

一直Next到Finish即可。

查看一下package.json文件，发现相关组件也是正常安装的。

运行项目

9.新建springboot项目

在Project Structure新建一个Springboot的Module

参考文章：Eclipse与IDEA创建一个Maven的Java Web项目第2.2.1章节

10.简单的前后端交互实现

10.1 编写vue项目

目录结构如下

编写 main.js，引入element-ui控件，router。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
//引入element-ui控件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
//使用use命令后才起作用
Vue.use(ElementUI)

new Vue({
   
  router,
  render: h => h(App),
}).$mount('#app')

编写 App.vue。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>

  export default {
    name: 'App',
  }
</script>

<style>
  #app {
    font-fami