SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程01搭建前端工程 |
您所在的位置：网站首页 › springboot系列教程 › SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程01搭建前端工程 |
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
项目创建成功 . buefy 的官网 https://bulma.io/ element-ui的官网 https://element.eleme.cn/#/zh-CN 在根目录下 package.json可以看到添加后的版本号 在/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);
将样式删除，将 class="container" 是Buefy中的一个类，页面会居中对齐，左右会有一定的间隔 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页面 ???? {{billboard}} 3.5启动项目查看效果 # 控制台输入启动命令 yarn serve
|
【本文地址】
今日新闻 |
推荐新闻 |