韵搜坊(全栈)-- 前后端初始化

文章目录

  • 前端初始化
  • 后端初始化

前端初始化

使用ant design of vue 组件库
官网快速上手:https://www.antdv.com/docs/vue/getting-started-cn

  1. 安装脚手架工具

进入cmd

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli
  1. 创建一个项目
$ vue create antd-demo(你的项目名)
  1. 进行配置,键盘上下切换,空格选择,回车下一项

image.png
image.png

  1. 使用组件

安装
vscode打开项目,在终端输入下面的命令,安装antdesign vue 组件

$ npm i --save ant-design-vue@4.x

注册组件
image.png
在main.ts入口文件中引入下面的代码,记得把之前的代码删去

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
createApp(App).use(Antd).use(router).mount("#app");
  1. 启动项目image.png

启动成功,前端初始化完成
image.png

后端初始化

  1. 拉取SpringBoot后端万能初始化模版(后面补充完善好再补链接,可能会单独出个文章)
  2. 修改数据库配置,根据模版连接数据库,建表
  3. 启动项目

成功启动
image.png

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

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

相关文章

社交媒体数据恢复:默往

如果你在默往社交软件中丢失了重要的数据,不要着急,以下是一些步骤可以帮助你进行数据恢复: 登录账号:首先,你需要登录默往社交软件账号,确保你已经登录了正确的账号,因为如果你登录了错误的账号…

弘君资本策略:股指预计保持震荡上扬格局 关注公用事业、电网设备等板块

弘君资本指出,周一A股商场探底上升、小幅震动收拾,早盘股指低开后震动回落,沪指盘中在3126点附近取得支撑,午后股指企稳上升,盘中电网设备、公用事业、电力以及工程建造等职业体现较好;半导体、互联网以及软…

PXE+Kickstart无人值守安装安装Centos7.9

文章目录 一、什么是PXE1、简介2、工作模式3、工作流程 二、什么是Kickstart1、简介2、触发方式 三、无人值守安装系统工作流程四、实验部署1、环境准备2、服务端:关闭防火墙和selinux3、添加一张仅主机的网卡4、配置仅主机的网卡4.1、修改网络连接名4.2、配IP地址4…

差异基因散点图绘制教程

差异基因散点图绘制教程 本期教程 小杜的生信笔记,自2021年11月开始做的知识分享,主要内容是R语言绘图教程、转录组上游分析、转录组下游分析等内容。凡事在社群同学,可免费获得自2021年11月份至今全部教程,教程配备事例数据和相…

最新版Ceph( Reef版本)块存储简单对接k8s(上集)

当前ceph 你的ceph集群上执行 1.创建名为k8s-rbd 的存储池 ceph osd pool create k8s-rbd 64 642.初始化 rbd pool init k8s-rbd3 创建k8s访问块设备的认证用户 ceph auth get-or-create client.kubernetes mon profile rbd osd profile rbd poolk8s-rbd部署 ceph-rbd-csi c…

快速学习SpringAi

Spring AI是AI工程师的一个应用框架,它提供了一个友好的API和开发AI应用的抽象,旨在简化AI应用的开发工序,例如开发一款基于ChatGPT的对话应用程序。通过使用Spring Ai使我们更简单直接使用chatgpt 1.创建项目 jdk17 引入依赖 2.依赖配置 …

同城组局同城活动找搭子小程序JAVA源码面芽组局的实现方案

功能概述 基于微信小程序开发的一款软件,支持用户动态发布、私信聊天关注、礼物充值打赏、发起活动组局、用户报名参与、支持商家入驻,对接广告功能等。 活动发布:用户可以在平台上发布各种类型的活动,如户外徒步、音乐会观赏、…

AI应用案例:会议纪要自动生成

以腾讯会议转录生成的会议记录为研究对象,借助大模型强大的语义理解和文本生成等能力,利用指令和文本向量搜索实现摘要总结、要点提取、行动项目提取、会议纪要生成等过程,完成会议纪要的自动总结和生成,降低人工记录和整理时间成…

React 第三十章 React 和 Vue 描述页面的区别

面试题:React 和 Vue 是如何描述 UI 界面的?有一些什么样的区别? 标准且浅显的回答: React 中使用的是 JSX,Vue 中使用的是模板来描述界面 前端领域经过长期的发展,目前有两种主流的描述 UI 的方案&#xf…

Q1季度电饭煲家电行业线上市场(京东天猫淘宝)销售数据排行榜

鲸参谋监测的2024年Q1季度线上电商平台(天猫淘宝京东)电饭煲家电销售数据已出炉! 今年Q1季度,电饭煲销售成绩不如预期。根据鲸参谋数据显示,今年Q1季度在线上电商平台(淘宝天猫京东)电饭煲销量…

三种有效方法:快速将视频格式转换mp4格式

在当今数字化时代,视频文件的格式多种多样,而将视频转换为MP4格式是一种常见的需求。MP4格式具有广泛的兼容性,适用于多种设备和平台,因此经常被选择作为视频文件的输出格式。 无论是为了在移动设备上观看视频,还是为…

照妖镜api接口,查询旺旺的降权、黑号举报数据(全网实时更新)

照妖镜api接口,查询旺旺的降权、黑号举报数据(全网实时更新) 照妖镜查号功能说明: 1.照妖镜查号功能的打标信息为商家主动共享,不对相关使用效果或纠纷承担责任; 2.本功能于查询互联网用户防止电信诈骗&…

NSS【web】刷题

[SWPUCTF 2021 新生赛]jicao 类型&#xff1a;PHP、代码审计、RCE 主要知识点&#xff1a;json_decode()函数 json_decode()&#xff1a;对JSON字符串解码&#xff0c;转换为php变量 用法&#xff1a; <?php $json {"ctf":"web","question"…

YOLOV8实战-和平精英敌我检测

YOLOV8实战&#xff0c;从环境配置、数据准备、数据标注、模型训练、模型导出到源码分享 前言&#xff1a;效果展示图片展示视频展示 简介&#xff1a;**【YOLOV8是啥&#xff1f;】****【YOLOV8能干啥&#xff1f;有啥应用场景&#xff1f;】** 一、环境准备1、新建一个虚拟环…

Linux中的网络隔离功能 netns

Network Namespace&#xff08;netns&#xff09; 是Linux内核提供的一项实现网络隔离的功能&#xff0c;它能隔离多个不同的网络空间&#xff0c;并且各自拥有独立的网络协议栈。通过 namespace 可以隔离容器的进程 PID、文件系统挂载点、主机名等多种资源&#xff0c;它可以为…

vscode调试Electron+ts

调试Electronjs 调试Electronjs: https://www.electronjs.org/zh/docs/latest/tutorial/debugging-vscode 调试Electronts 首先看一下&#xff0c;我的目录结构。目录结构决定了launch.json中的路径部分。我将在项目根目录下进行调试&#xff0c;项目根目录下包含electron代码…

数据可视化(十一):Pandas餐饮信息表分析——交叉表、离群点分析,多维分析等高级操作

Tips&#xff1a;"分享是快乐的源泉&#x1f4a7;&#xff0c;在我的博客里&#xff0c;不仅有知识的海洋&#x1f30a;&#xff0c;还有满满的正能量加持&#x1f4aa;&#xff0c;快来和我一起分享这份快乐吧&#x1f60a;&#xff01; 喜欢我的博客的话&#xff0c;记得…

golang创建式设计模式------单例模式

目录导航 1.单例模式1)什么是单例模式 2)使用场景3)实现方式1.懒汉式单例模式2.饿汉式3.双重检查式4.sysc.Once式 4)实践案例5)优缺点分析 1.单例模式 1)什么是单例模式 单例模式(Singleton Pattern)是一种常用的设计模式。单例模式的类提供了一种访问其唯一对象的方法&#…

【数据结构】线性表--顺序表(二)

文章目录 1、什么是线性表2、线性表的基本操作3、顺序表3.1、顺序表的定义3.2、顺序表的实现方式&#xff1a;静态分配3.3、顺序表的实现方式&#xff1a;动态分配3.4、顺序表的特点3.5、顺序表的初始化与插入操作3.6、顺序表的删除与查询 1、什么是线性表 ​ 线性表是具有相同…

通过EXCEL控制PLC启停电机的一种方法

概述 本例将介绍用微软EXCEL电子表格控制西门子S7-1200 PLC实现电机启停的一种方法。 第1步&#xff1a; 添加PLC设备&#xff0c;选择西门子S7-1214C CPU&#xff0c;设置IP地址&#xff1a;192.168.18.18&#xff0c;子网掩码&#xff1a;255.255.255.0。 第2步&#xff1a…