豆宝社区项目实战教程简介

本项目实战教程配有免费视频教程,配套代码完全开源。手把手从零开始搭建一个目前应用最广泛的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

SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程01---搭建前端工程的更多相关文章

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

    本节代码开源地址 代码地址 项目运行截图 搭建后端工程 0.导入sql 在数据库导入 /* Navicat Premium Data Transfer Source Server : localhos ...

  2. nginx+vue+uwsgi+django的前后端分离项目部署

    Vue+Django前后端分离项目部署,nginx默认端口80,数据提交监听端口9000,反向代理(uwsgi配置)端口9999 1.下载项目文件(统一在/opt/luffyproject目录) (1 ...

  3. 《Spring Boot 入门及前后端分离项目实践》系列介绍

    课程计划 课程地址点这里 本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 个部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 项目实践开发 ...

  4. vue.js+UEditor集成 [前后端分离项目]

    首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+web ...

  5. vue+uwsgi+nginx部署前后端分离项目

    前后端分离,vue前端提供静态页面,且可以向后台发起get,post等restful请求. django后台提供数据支撑,返回json数据,返回给vue,进行数据页面渲染 后端 创建虚拟环境 解决dj ...

  6. springboot+vue脚手架使用nginx前后端分离

    1.vue配置 /** * * 相对于该配置的nginx服务器请参考nginx配置文件 * */ module.exports = { // 基本路径 publicPath: '/', // 输出文件 ...

  7. linux --- 部署前后端分离项目

    vue + uwsgi +nginx 部署前后端分离项目 准备项目 1.将前端vue项目包和后端django项目包上传服务器,通过lrzsz,直接从windows拖进linux中 2.解压缩操作 前端 ...

  8. docker-compose 部署 Vue+SpringBoot 前后端分离项目

    一.前言 本文将通过docker-compose来部署前端Vue项目到Nginx中,和运行后端SpringBoot项目 服务器基本环境: CentOS7.3 Dokcer MySQL 二.docker ...

  9. Springboot+vue前后端分离项目,poi导出excel提供用户下载的解决方案

    因为我们做的是前后端分离项目 无法采用response.write直接将文件流写出 我们采用阿里云oss 进行保存 再返回的结果对象里面保存我们的文件地址 废话不多说,上代码 Springboot 第 ...

随机推荐

  1. JavaWeb——JSP内置对象request,response,重定向与转发 学习总结

    什么是JSP内置对象 九大内置对象 requestJSP内置对象 request对象常用方法 request练习 responseJSP内置对象 response练习 response与request ...

  2. vulnhub靶场之AI-WEB1.0渗透记录

    在本机电脑上自行搭建了一个练手的靶场,下面是记录渗透过程 目录 一.确认靶机ip 二.端口&目录扫描 三.查看敏感目录 四.sql注入 五.get shell 六.系统提权 确认靶机ip ka ...

  3. jQuery操作CheckBox的方法(选中,取消,取值)详解

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  4. checkAll操作

    //全部勾选 function checkAll(obj) { var cols = document.getElementsByName('cols'); for ( var i = 0; null ...

  5. 华三交换机NTP配置

    clock protocol ntp ntp-service enable ntp-service unicast-server x.x.x.x clock timezone beijing add ...

  6. 5.DHCP新建作用域及添加地址保留(Windows2012)

    1.新建作用域 右键IPv4 点击新建作用域 点击下一步 命名,下一步 填写子网,下一步 在上一步已经预留了,直接点下一步即可. 设置租用期限,建议为3天,下一步. 下一步,配置DHCP选项 配置默认 ...

  7. 天天写同步,5种SpringMvc异步请求了解下!

    引言 说到异步大家肯定首先会先想到同步.我们先来看看什么是同步? 所谓同步,就是发出一个功能调用时,在没有得到结果之前,该调用就不返回或继续执行后续操作. 简单来说,同步就是必须一件一件事做,等前一件 ...

  8. 搭建 mariadb 数据库主从同步

    一.主(master)数据库配置 1. my.cnf 添加配置 [mariadb] log-bin server_id=1 log-basename=master1 binlog-format=mix ...

  9. Vuejs 基础学习教程

    (四)构建基础进阶-env文件与环境设置 我们在实际开发中,我们一般会经历项目的开发阶段,测试阶段,和最终上线阶段,每个阶段对于项目代码的需要可能都有所不同,那我们怎么让它在不同阶段呈现不同的效果呢? ...

  10. 2019牛客暑期多校训练营(第八场)A.All-one Matrices(dp)

    题意:又是最大01矩阵的模型了 这次要找的是极大0/1矩阵的个数 思路:我们像处理最大01矩阵那样处理一下边界 由于我们上左右已经无法再继续扩展 我们只需要用前缀和记录一下是否可以向下扩展(即判断当前 ...