Spring boot + Vue2小项目基本模板

devtools/2024/11/17 7:13:56/

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.ppmy.cn/devtools/134644.html

相关文章

vue2和vue3:diff算法的区别?

Vue 2 和 Vue 3 在 diff 算法方面的主要区别是: Vue 2 使用普通的 diff 算法,它会遍历所有的节点进行比对。 Vue 3 引入了 patch flag 的概念,并且对 diff 算法进行了优化,比如在相同层级的节点间不会去递归比对已经被移除的节点…

服务器数据恢复——Ext4文件系统使用fsck后mount不上的数据恢复案例

关于Ext4文件系统的几个概念: 块组:Ext4文件系统的全部空间被划分为若干个块组,每个块组结构基本上相同。 块组描述符表:每个块组都对应一个块组描述符,这些块组描述符统一放在文件系统的前部,称为块组描述…

使用阿里云远程访问 Synology Web Station 的指南

使用阿里云远程访问 Synology Web Station 的指南 本文将指导如何通过阿里云服务器配置 Nginx 和 FRP,远程访问部署在 Synology NAS 上的 Web Station 服务,同时支持 HTTPS 安全访问。 背景 通过 Synology NAS 的 Web Station,可以部署 Wor…

企业网络链路聚合、数据抓包、远程连接访问实验

前言: 随着信息技术的飞速发展和企业业务的不断扩大,企业网络面临着越来越多的挑战。其中,网络带宽、数据安全和远程访问等问题尤为突出。为了解决这些问题,我们进行了本次企业网络链路聚合、数据抓包和远程连接访问的实验。 链路…

Verilog HDL学习笔记

Verilog HDL(Hardware Description Language)是在一种硬件描述语言,类似于计算机的高级编程设计语言,它具有灵活性高,容易学习和使用等特点,同时Verilog能够通过文本的形式来描述数字系统的硬件结构和功能。…

区块链基础与网络安全

区块链定义 区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链( Blockchain),它本质上是一个去中心化的数据库,是一串使用密码学方法相关联产生的数据块,每一个数据块中包含…

封装el-menu

案例图 数据格式 commonMenu.vue <template><div class"commonMenuStyle"><el-sub-menu v-if"hasChildren" :index"item.MenuId"><template #title><el-icon><location /></el-icon><!-- isColl…

大语言模型通用能力排行榜(2024年10月8日更新)

数据来源SuperCLUE 榜单数据为通用能力排行榜 排名 模型名称 机构 总分 理科 文科 Hard 使用方式 发布日期 - o1-preview OpenAI 75.85 86.07 76.6 64.89 API 2024年11月8日 - Claude 3.5 Sonnet&#xff08;20241022&#xff09; Anthropic 70.88 82.4…