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

最终效果展示

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

相关推荐
毕设源码_廖学姐18 分钟前
计算机毕业设计springboot招聘系统网站 基于SpringBoot的在线人才对接平台 SpringBoot驱动的智能求职与招聘服务网
spring boot·后端·课程设计
顾北1226 分钟前
MCP服务端开发:图片搜索助力旅游计划
java·spring boot·dubbo
昀贝1 小时前
IDEA启动SpringBoot项目时报错:命令行过长
java·spring boot·intellij-idea
indexsunny2 小时前
互联网大厂Java面试实战:Spring Boot微服务在电商场景中的应用与挑战
java·spring boot·redis·微服务·kafka·spring security·电商
Coder_Boy_3 小时前
基于SpringAI的在线考试系统-相关技术栈(分布式场景下事件机制)
java·spring boot·分布式·ddd
空&白3 小时前
vue暗黑模式
javascript·vue.js
css趣多多4 小时前
一个UI内置组件el-scrollbar
前端·javascript·vue.js
-凌凌漆-5 小时前
【vue】pinia中的值使用 v-model绑定出现[object Object]
javascript·vue.js·ecmascript
韩立学长5 小时前
基于Springboot泉州旅游攻略平台d5h5zz02(程序、源码、数据库、调试部署方案及开发环境)系统界面展示及获取方式置于文档末尾,可供参考。
数据库·spring boot·旅游
摇滚侠6 小时前
在 SpringBoot 项目中,开发工具使用 IDEA,.idea 目录下的文件需要提交吗
java·spring boot·intellij-idea