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 -Snpm install vue-router@3开发环境采用的是VS Code,比较容易配置,安装组件需要在创建项目的目录内

安装示例:在这里插入图片描述

项目搭建

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

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

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

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

gitee的链接https://gitee.com/anxwefndu/springboot-vue2demo01.git

最终效果展示

当前简单的菜单和表格,还没有加上登录与具体各栏目分类在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/472358.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

金融领域先锋!海云安成功入选2024年人工智能先锋案例集

近日,中国人工智能产业发展联盟《2024年人工智能先锋案例集》(以下简称“AIIA先锋案例集”)在中国人工智能产业发展联盟第十三次全体会议上正式发布。该案例集由人工智能产业发展联盟(AIIA)、工业和信息化部新闻宣传中…

基于OpenCV的图片人脸检测研究

目录 摘要 第一章 引言 第二章 基于 OpenCV 的图片人脸检测 2.1 实现原理 2.2 代码实现与分析 2.3 代码详细分析 第三章 实验结果与分析 第四章 OpenCV 人脸检测的优势与局限性 4.1 优势 4.2 局限性 第五章 结论 第六章 未来展望 参考文献 摘要 人脸检测是计算机视…

【计算机毕设】无查重 基于python豆瓣电影评论舆情数据可视化系统(完整系统源码+数据库+开发笔记+详细部署教程)✅

目录 【计算机毕设】无查重 基于python豆瓣电影数据可视化系统(完整系统源码数据库开发笔记详细部署教程)✅ 一、项目背景 二、项目目标 三、项目功能 四、开发技术介绍 五、数据库设计 六、项目展示 七、开发笔记 八、启动步骤文档 九、权威教…

Python学习从0到1 day29 Python 高阶技巧 ⑦ 正则表达式

目录 一、正则表达式 二、正则表达式的三个基础方法 1.match 从头匹配 2.search(匹配规则,被匹配字符串) 3.findall(匹配规则,被匹配字符串) 三、元字符匹配 单字符匹配: 注: 示例&a…

[Python学习日记-67] 封装

[Python学习日记-67] 封装 简介 如何隐藏类中的属性 封装并不是单纯意义的隐藏 封装与扩展性 特性(property) 简介 从封装本身的意思去理解,封装就好像是拿来一个麻袋,把小猫、小狗、小王八和小猪一起装进麻袋,然…

@Autowired 和 @Resource思考(注入redisTemplate时发现一些奇怪的现象)

1. 前置知识 Configuration public class RedisConfig {Beanpublic RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory factory) {RedisTemplate<String, Object> template new RedisTemplate<>();template.setConnectionFactory(facto…

MongoDB分布式集群搭建----副本集----PSS/PSA

MongoDB分布式集群 Replication 复制、Replica Set 复制集/副本集 概念 一、 副本集的相关概念 1.概念 “ A replica set is a group of mongod instances that maintain the same data set. ” 一组MongoDB服务器&#xff08;多个mongod实例&#xff09;&#xff08;有不…

五、函数封装及调用、参数及返回值、作用域、匿名函数、立即执行函数

1. 函数基本使用 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style&…

数据分析-48-时间序列变点检测之在线实时数据的CPD

文章目录 1 时间序列结构1.1 变化点的定义1.2 结构变化的类型1.2.1 水平变化1.2.2 方差变化1.3 变点检测1.3.1 离线数据检测方法1.3.2 实时数据检测方法2 模拟数据2.1 模拟恒定方差数据2.2 模拟变化方差数据3 实时数据CPD3.1 SDAR学习算法3.2 Changefinder模块3.3 恒定方差CPD3…

第八节 如何结合AAA实现用户远程登录-路由基础

关于调试设备的登录方式&#xff0c;一共有三种&#xff1a; 第一个&#xff1a;console&#xff1a;需要工程师在现场&#xff0c;进行登录&#xff0c;设备开局的时候使用 第二个&#xff1a;telnet ssh&#xff1a;基于网络互通的前提下进行登录的&#xff0c;远程登录 第三…

【Conda】Windows下conda的安装并在终端运行

下载 在官网下载 https://www.anaconda.com/download/success 安装 双击 一直下一步安装 配置环境变量 为了在终端运行&#xff0c;需配置环境变量 进入到安装conda的目录并复制路径 设置高级环境变量 在终端运行 输入&#xff1a; conda list表明可以正常运行 参考…

LogViewer NLog, Log4Net, Log4j 文本日志可视化

LogViewer 下载 示例&#xff1a;NLog文本日志可视化软件&#xff0c;并且能够实时监听输出最新的日志 nlog.config 通过udp方式传输给LogViewer (udp://ip:port) <?xml version"1.0" encoding"utf-8" ?> <nlog xmlns"http://www.nlog-…

MuMu模拟器安卓12安装Xposed 框架

MuMu模拟器安卓12安装Xposed 框架 当开启代理后,客户端会对代理服务器证书与自身内置证书展开检测,只要检测出两者存在不一致的情况,客户端就会拒绝连接。正是这个原因,才致使我们既没有网络,又抓不到数据包。 解决方式: 通过xposed框架和trustmealready禁掉app里面校验…

Python Web 应用开发基础知识

Python Web 应用开发基础知识 引言 随着互联网的快速发展&#xff0c;Web 应用程序的需求日益增加。Python 作为一种简单易学且功能强大的编程语言&#xff0c;已经成为 Web 开发中广受欢迎的选择之一。本文将深入探讨 Python Web 开发的基础知识&#xff0c;包括常用框架、基…

CSS Module:告别类名冲突,拥抱模块化样式(5)

CSS Module 是一种解决 CSS 类名冲突的全新思路。它通过构建工具&#xff08;如 webpack&#xff09;将 CSS 样式切分为更加精细的模块&#xff0c;并在编译时将类名转换为唯一的标识符&#xff0c;从而避免类名冲突。本文将详细介绍 CSS Module 的实现原理和使用方法。 1. 思…

动力商城-03 Idea集成apifox Mybatis-Plus字段策略

1.Idea下载apifox插件 2.新建令牌放入Idea 3.右键上传到对应接口 4.设置前置url 插件能够自动识别swagger注解 Mybatis-Plus字段策略 1、FieldStrategy作用 Mybatis-Plus字段策略FieldStrategy的作用主要是在进行新增、更新时&#xff0c;根据配置的策略判断是否对实体对…

使用 npm 安装 Yarn

PS E:\WeChat Files\wxid_fipwhzebc1yh22\FileStorage\File\2024-11\spid-admin\spid-admin> yarn install yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&#xff0c;请确保路径正确&#xff0c;然后…

Springboot 使用EasyExcel导出含图片并设置样式的Excel文件

Springboot 使用EasyExcel导出含图片并设置样式的Excel文件 Excel导出系列目录&#xff1a;★★★★尤其注意&#xff1a;引入依赖创建导出模板类逻辑处理controllerservice 导出效果总结 Excel导出系列目录&#xff1a; 【Springboot 使用EasyExcel导出Excel文件】 【Springb…

深入理解 source 和 sh、bash 的区别

1 引言 在日常使用 Linux 的过程中&#xff0c;脚本的执行是不可避免的需求之一&#xff0c;而 source、sh、bash 等命令则是执行脚本的常用方式。尽管这些命令都能运行脚本&#xff0c;但它们之间的执行方式和效果却有着显著的区别。这些区别可能会影响到脚本的环境变量、工作…

CC6学习记录

&#x1f338; cc6 cc6和cc1的国外链其实后半条链子是一样的&#xff0c;但是cc6的不局限于jdk的版本和commons-collections的版本。 回忆一下cc1的后半条链子&#xff1a; LazyMap.get()->InvokerTransformer.transform() 这里我们就结合了URLDNS链的思路&#xff0c;在…