SpringBoot+Vue豆寶社區前后端分離項目手把手實戰系列教程01---搭建前端工程

豆寶社區項目實戰教程簡介

本項目實戰教程配有免費視頻教程，配套代碼完全開源。手把手從零開始搭建一個目前應用最廣泛的Springboot+Vue前后端分離多用戶社區項目。本項目難度適中，為便於大家學習，每一集視頻教程對應在Github上的每一次提交。

項目首頁截圖

代碼開源地址

前端
后端

視頻教程地址

視頻教程

前端技術棧

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.選擇

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

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

將配置文件放到各自的文件里 還是 package.json(選擇放到各自的文件里)

**選擇 n **

進入到項目中 輸入 npm run serve

項目創建成功

.

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可以看到添加后的版本號

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);

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