V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
songboriceboy
V2EX  ›  程序员

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

  •  1
     
  •   songboriceboy · 2021-02-16 16:00:45 +08:00 · 1558 次点击
    这是一个创建于 1353 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    本项目实战教程配有免费视频教程,配套代码完全开源。手把手从零开始搭建一个目前应用最广泛的 Springboot+Vue 前后端分离多用户社区项目。本项目难度适中,为便于大家学习,每一集视频教程对应在 Github 上的每一次提交。

    项目首页截图

    image

    代码开源地址

    前端 后端

    视频教程地址

    视频教程

    前端技术栈

    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.选择

    上下键移动,空格选择 /取消

    image-20210211143343349image-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-ui
    yarn add axios
    

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

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

    在根目录下 package.json 可以看到添加后的版本号image-20210211151115854

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

    image-20210211152054727

    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

    2 条回复    2021-02-18 04:55:35 +08:00
    brust
        1
    brust  
       2021-02-17 18:01:10 +08:00
    感觉你这项目就只是为了前后分离而分离
    Carole
        2
    Carole  
       2021-02-18 04:55:35 +08:00
    @brust 嘿嘿嘿
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1420 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 37ms · UTC 23:50 · PVG 07:50 · LAX 16:50 · JFK 19:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.