本项目实战教程配有免费视频教程,配套代码完全开源。手把手从零开始搭建一个目前应用最广泛的 Springboot+Vue 前后端分离多用户社区项目。本项目难度适中,为便于大家学习,每一集视频教程对应在 Github 上的每一次提交。
Vue Vuex Vue Router Axios Bulma Buefy Element Vditor DarkReader
Spring Boot Mysql Mybatis MyBatis-Plus Spring Security JWT Lombok
vue create notepad_blog_frontend
上下键移动,空格选择 /取消
大概意思就是说是否使用历史路由,这里为 n ,不使用
将配置文件放到各自的文件里 还是 package.json(选择放到各自的文件里)
**选择 n **
进入到项目中 输入 npm run serve
项目创建成功
.
yarn add buefy -- https://bulma.io/
yarn add element-ui
yarn add axios
buefy 的官网 https://bulma.io/
element-ui 的官网 https://element.eleme.cn/#/zh-CN
在根目录下 package.json 可以看到添加后的版本号
在 /src/main.js 中引入
// Buefy
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
// ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Buefy)
Vue.use(ElementUI);
将样式删除,将 class="container" 是 Buefy 中的一个类,页面会居中对齐,左右会有一定的间隔
<template>
<!-- 是 Buefy 中的一个类,页面会居中对齐,左右会有一定的间隔 -->
<div class="container">
<router-view/>
</div>
</template>
<style>
</style>
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home')
}
]
const router = new VueRouter({
routes
})
export default router
删除 /views/about 页面
删除 components/HelloWorld.vue 组件
<template>
<div>
<!-- 是 Buefy 中的一个类,页面以白色为背景 -->
<div class="box">
🔔 {{billboard}}
</div>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
billboard: '版本更新'
}
}
}
</script>
# 控制台输入启动命令
yarn serve
1
brust 2021-02-17 18:01:10 +08:00
感觉你这项目就只是为了前后分离而分离
|