豆寶社群專案實戰教程簡介

本專案實戰教程配有免費影片教程，配套程式碼完全開源。手把手從零開始搭建一個目前應用最廣泛的Springboot+Vue前後端分離多使用者社群專案。本專案難度適中，為便於大家學習，每一集影片教程對應在Github上的每一次提交。

專案首頁截圖

image

程式碼開源地址

https://github.com/songboriceman/doubao_community_frontend

https://github.com/songboriceman/doubao_community_backend

影片教程地址

https://www.bilibili.com/video/BV1Wz4y1U7vC

前端技術棧

VueVuexVue RouterAxiosBulmaBuefyElementVditorDarkReader

後端技術棧

Spring BootMysqlMybatisMyBatis-PlusSpring SecurityJWTLombok

搭建前端工程1.建立vue工程1.建立專案

vue create notepad_blog_frontend

2.選擇

上下鍵移動，空格選擇/取消

image-20210211143343349

image-20210211143756452

大概意思就是說是否使用歷史路由，這裡為 n ,不使用

image-20210211144933627

將配置檔案放到各自的檔案裡 還是 package.json(選擇放到各自的檔案裡)

image-20210211145047228

**選擇 n **

image-20210211145207792

進入到專案中 輸入 npm run serve

image-20210211145544208

專案建立成功

.

image-20210211145717119

2.新增框架/依賴2.1下載

yarn add buefy   -- https://bulma.io/yarn add element-uiyarn add axios

buefy 的官網 https://bulma.io/

element-ui的官網 https://element.eleme.cn/#/zh-CN

在根目錄下 package.json可以看到新增後的版本號

image-20210211151115854

2.2引入

在/src/main.js中引入

// Buefyimport Buefy from 'buefy'import 'buefy/dist/buefy.css'// ElementUIimport ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(Buefy)Vue.use(ElementUI);

image-20210211152054727

3.實現通知效果3.1修改 App.vue

將樣式刪除，將 class="container" 是Buefy中的一個類，頁面會居中對齊，左右會有一定的間隔