Spring boot + Vue2小项目基本模板

Spring boot + Vue2小项目基本模板

基本介绍

复制代码
项目来源哔哩哔哩的青戈,跟着学习搭建自己的简单vue小项目;看别人的项目总觉得看不懂,需要慢慢打磨
这里目前只简单的搭建了菜单导航和表格页面,还未搭建登录页面,待补充

视频链接

基本环境安装

复制代码
需要安装node.js(自带npm),然后配一下镜像
	npm config set registry https://registry.npm.taobao.org

安装Vue@cli,Vue的脚手架进行项目的创建
	npm install -g @vue/cli

采用Vue create demo01,进行项目的基本创建,这里采用的是Vue2版本

这个项目里面使用了基本的组件,包括路由、element-ui,安装如下:
	npm i element-ui -S
	npm install vue-router@3

开发环境采用的是VS Code,比较容易配置,安装组件需要在创建项目的目录内

安装示例:

项目搭建

复制代码
安装好环境,创建了基本模板后,需要修改(替换)一下原有内容

vue.config.js的内容(增加一句 lintOnSave: false(对组件名称定义不进行限制))

javascript 复制代码
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false
})

替换自动生成的public和src目录

复制代码
gitee的链接
	https://gitee.com/anxwefndu/springboot-vue2demo01.git

最终效果展示

当前简单的菜单和表格,还没有加上登录与具体各栏目分类

相关推荐
无心水15 小时前
【分布式利器:腾讯TSF】2、腾讯微服务框架TSF实战指南:Spring Boot零侵入接入与容器化部署全流程
java·spring boot·分布式·微服务·springcloud·分布式利器·腾讯tsf
weixin_5841214315 小时前
vue3+elementui+js自定义穿梭框布局
javascript·vue.js·elementui
梵得儿SHI15 小时前
Pinia 状态管理从入门到精通:基础 / 核心特性 / 多 Store / 持久化全实战(Vue2/Vue3 适配)
javascript·vue.js·ecmascript·pinia·态持久化存储方案·实战避坑指南·ue2/vue3项目开发
苏小瀚15 小时前
[JavaEE] Spring Boot 日志
java·spring boot·后端
木子江L15 小时前
SpringBoot集成RabbitMQ消息中间件
java·spring boot·rabbitmq·java-rabbitmq
Gao_xu_sheng15 小时前
IDEA恢复删除模块pom文件
java·spring boot·idea
计算机毕设指导615 小时前
基于微信小程序的直播带货商品数据分析系统【源码文末联系】
java·spring boot·微信小程序·小程序·tomcat·maven·intellij-idea
小二·1 天前
前端监控体系完全指南:从错误捕获到用户行为分析(Vue 3 + Sentry + Web Vitals)
前端·vue.js·sentry
+VX:Fegn08951 天前
计算机毕业设计|基于springboot + vue在线音乐播放系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
+VX:Fegn08951 天前
计算机毕业设计|基于springboot + vue律师咨询系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·课程设计