SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程01---搭建前端工程-阿里云开发者社区

SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程01---搭建前端工程

2023-05-17 176

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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

image-20210211145544208

项目创建成功

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

image-20210211154320612