学习SpringBoot+Vue前后端分离项目,原项目GitHub地址,项目作者江雨一点雨博客。
创建该项目时采用的vue-cli4,可以在vue官网安装教程中下载安装。
可以使用命令行创建然后在webstorm中导入项目,也可以直接用webstorm创建vue项目,webstorm实际上也是调用的命令行创建项目。项目创建时选择插件选择babel和router这两个插件。
注意事项:项目创建完成后,找到工程目录中的src/router包中的index.js文件(使用cli3创建的直接在总目录下找router.js),检查该文件中路由模式是否为hash模式,如果为history模式可能会导致404,需要在服务器配置如果URL匹配不到任何静态资源,就跳转到默认的index.html。
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
})
如上面所示,如果mode后面的值为’history’,改为’hash’即可
该项目前端中采用的Element-UI,使用前需先安装
在命令行中输入:
npm i element-ui -S
安装完成后可以在package.json中找到element-ui已经添加进来了
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4",
"element-ui": "^2.13.0",
"font-awesome": "^4.7.0",
"vue": "^2.6.11",
"vue-router": "^3.1.5",
"vuex": "^3.1.2"
},
然后在main.js中写入以下内容:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
将App.vue中的默认代码删除只保留router-view
<template>
<div id="app">
<router-view/>
</div>
</template>
在src/views中创建登录页面Login.vue,在template中写上div以便后面测试
<template>
<div>
login
</div>
</template>
回到路由文件router/index.js中将Login.vue的路由添加进来(很重要!!!)
import Login from '../views/Login.vue'//vue-cli4
这里注意一下地址中有两个点,意思是当前目录的上一级,比如说vue-cli4下创建的项目路由文件是src/router/index.js 我们的登录页面是src/views/Login.vue
所以需要从router往上一级变为src,然后再往下找到views,再找到Login.vue。
同理,如果是vue-cli3创建的路由文件直接在src目录下,直接找到views就行了,
一个点就代表当前目录
代码如下:
import Login from './views/Login.vue'//vue-cli3
然后在下面配置路径
routes = [
{
path: '/',
name: 'Login',
component: Login,
}
]
启动项目,在默认端口8080上看到了login,此时注意到如果路由模式是hash模式会多个 #,history模式则没有。