大家好,欢迎来到IT知识分享网。
豆宝社区项目实战教程简介
本项目实战教程配有免费视频教程,配套代码完全开源。手把手从零开始搭建一个目前应用最广泛的Springboot+Vue前后端分离多用户社区项目。本项目难度适中,为便于大家学习,每一集视频教程对应在Github上的每一次提交。
项目首页截图
![SpringBoot+Vue社区项目实战教程01搭建前端工程插图1 SpringBoot+Vue社区项目实战教程01搭建前端工程](https://yundeesoft.com/wp-content/uploads/2022/11/2022112316405970.jpg)
image
代码开源地址
https://github.com/songboriceman/doubao_community_frontend
https://github.com/songboriceman/doubao_community_backend
视频教程地址
https://www.bilibili.com/video/BV1Wz4y1U7vC
前端技术栈
Vue
Vuex
Vue Router
Axios
Bulma
Buefy
Element
Vditor
DarkReader
后端技术栈
Spring Boot
Mysql
Mybatis
MyBatis-Plus
Spring Security
JWT
Lombok
搭建前端工程
1.创建vue工程
1.创建项目
vue create notepad_blog_frontend
2.选择
上下键移动,空格选择/取消
![SpringBoot+Vue社区项目实战教程01搭建前端工程插图3 SpringBoot+Vue社区项目实战教程01搭建前端工程](https://yundeesoft.com/wp-content/uploads/2022/11/2022112316405970.jpg)
image-
![SpringBoot+Vue社区项目实战教程01搭建前端工程插图5 SpringBoot+Vue社区项目实战教程01搭建前端工程](https://yundeesoft.com/wp-content/uploads/2022/11/2022112316405970.jpg)
image-
大概意思就是说是否使用历史路由,这里为 n ,不使用
![SpringBoot+Vue社区项目实战教程01搭建前端工程插图7 SpringBoot+Vue社区项目实战教程01搭建前端工程](https://yundeesoft.com/wp-content/uploads/2022/11/2022112316405970.jpg)
image-
将配置文件放到各自的文件里 还是 package.json(选择放到各自的文件里)
![SpringBoot+Vue社区项目实战教程01搭建前端工程插图9 SpringBoot+Vue社区项目实战教程01搭建前端工程](https://yundeesoft.com/wp-content/uploads/2022/11/2022112316405970.jpg)
image-047228
**选择 n **
![SpringBoot+Vue社区项目实战教程01搭建前端工程插图11 SpringBoot+Vue社区项目实战教程01搭建前端工程](https://yundeesoft.com/wp-content/uploads/2022/11/2022112316405970.jpg)
image-
进入到项目中 输入 npm run serve
![SpringBoot+Vue社区项目实战教程01搭建前端工程插图13 SpringBoot+Vue社区项目实战教程01搭建前端工程](https://yundeesoft.com/wp-content/uploads/2022/11/2022112316405970.jpg)
image-
项目创建成功
.
![SpringBoot+Vue社区项目实战教程01搭建前端工程插图15 SpringBoot+Vue社区项目实战教程01搭建前端工程](https://yundeesoft.com/wp-content/uploads/2022/11/2022112316405970.jpg)
image-
2.添加框架/依赖
2.1下载
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可以看到添加后的版本号
![SpringBoot+Vue社区项目实战教程01搭建前端工程插图17 SpringBoot+Vue社区项目实战教程01搭建前端工程](https://yundeesoft.com/wp-content/uploads/2022/11/2022112316405970.jpg)
image-
2.2引入
在/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);
![SpringBoot+Vue社区项目实战教程01搭建前端工程插图19 SpringBoot+Vue社区项目实战教程01搭建前端工程](https://yundeesoft.com/wp-content/uploads/2022/11/2022112316405970.jpg)
image-054727
3.实现通知效果
3.1修改 App.vue
将样式删除,将 class=”container” 是Buefy中的一个类,页面会居中对齐,左右会有一定的间隔
<template> <!-- 是Buefy中的一个类,页面会居中对齐,左右会有一定的间隔 --> <div class="container"> <router-view/> </div> </template> <style> </style>
3.2修改router/index.js
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
3.3删除页面
删除 /views/about页面
删除 components/HelloWorld.vue组件
3.4修改Home页面
<template> <div> <!-- 是Buefy中的一个类,页面以白色为背景 --> <div class="box"> {{billboard}} </div> </div> </template> <script> export default { name: 'Home', data() { return { billboard: '版本更新' } } } </script>
3.5启动项目查看效果
# 控制台输入启动命令 yarn serve
![SpringBoot+Vue社区项目实战教程01搭建前端工程插图21 SpringBoot+Vue社区项目实战教程01搭建前端工程](https://yundeesoft.com/wp-content/uploads/2022/11/2022112316405970.jpg)
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/56522.html