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

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

    在做压测的时候常常需要统计测试成功率,简单的例子如下: count = 89i = 100print("測試次數:%d"%count)print("測試成功率:%.2f% ...

  2. 大型面试现场:一条update sql执行都经历什么?

    导读 Hi,大家好!我是白日梦!本文是MySQL专题的第 24 篇. 今天我要跟你分享的MySQL话题是:"从一条update sql执行都经历什么开始,发散开一系列的问题,看看你能抗到第几 ...

  3. GJ项目技术代码相关总结

    第一次实习公司的GJ项目快要结束,自己总结了一些工作中的代码,留到记录学习. 根据下拉条件,进行查询,展示出不同的表单选项:并在鼠标进入到指定区域时显示部分内容,鼠标移出内容区域时,隐藏内容. 焦点移 ...

  4. (转)pip和easy_install使用方式

    easy_install 跟 pip 都是 Python 的套件管理程式,有了它們,在使用 Python 開發程式的時候會帶來不少方便. easy_install 和 pip 有什麼不一樣?據 pip ...

  5. StringTable---字符串常量池的垃圾回收跟踪案例

    引言 很多人认为jvm字符串常量不会被回收的,其实这个说法的有误区的,我们通过一些jvm参数可以看到StringTable的垃圾回收. 案例说明 参数说明 参数 说明 -Xmx10m 堆空间大小 -X ...

  6. 软件测试漫谈(web测试,自动化测试,Jmeter)

    软件测试,就是一个过程或一系列过程,用来确定计算机代码完成了其应该完成的功能不执行其不该有的操作. 简单说就是找bug的过程. 测试分类 (1)按测试方式分类:静态测试.动态测试 (2) 按测试方法分 ...

  7. AtCoder Beginner Contest 176

    比赛链接:https://atcoder.jp/contests/abc176 A - Takoyaki #include <bits/stdc++.h> using namespace ...

  8. gym101002K. Inversions (FFT)

    题意:给定一个仅含有AB的字母串 如果i有一个B j有一个A 且j>i 会对F(j-i)产生贡献 求出所有发Fi 题解:好像是很裸的FFT B的分布可以看作一个多项式 同理A也可以 然后把B的位 ...

  9. Kubernets二进制安装(12)之部署Node节点服务的kube-Proxy

    kube-proxy是Kubernetes的核心组件,部署在每个Node节点上,它是实现Kubernetes Service的通信与负载均衡机制的重要组件; kube-proxy负责为Pod创建代理服 ...

  10. java中string,stringBuffer和StringBuider

    最近学习到StringBuffer,心中有好些疑问,搜索了一些关于String,StringBuffer,StringBuilder的东西,现在整理一下. 关于这三个类在字符串处理中的位置不言而喻,那 ...