韻搜坊(全棧)-- 前后端初始化

文章目錄

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

前端初始化

使用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.pswp.cn/web/11894.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/11894.shtml
英文地址,請注明出處:http://en.pswp.cn/web/11894.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

社交媒體數據恢復:默往

如果你在默往社交軟件中丟失了重要的數據,不要著急,以下是一些步驟可以幫助你進行數據恢復: 登錄賬號:首先,你需要登錄默往社交軟件賬號,確保你已經登錄了正確的賬號,因為如果你登錄了錯誤的賬號…

邦芒簡歷:如何恰當呈現跳槽經歷在簡歷中

在職業生涯中,跳槽往往伴隨著個人的成長與選擇。然而,頻繁或不當的跳槽記錄可能會給HR留下不穩定的印象。因此,在撰寫簡歷時,如何恰當地呈現跳槽經歷就顯得尤為重要。 1、短期工作經歷的處理 對于短期工作經歷(尤其是…

弘君資本策略:股指預計保持震蕩上揚格局 關注公用事業、電網設備等板塊

弘君資本指出,周一A股商場探底上升、小幅震動收拾,早盤股指低開后震動回落,滬指盤中在3126點附近取得支撐,午后股指企穩上升,盤中電網設備、公用事業、電力以及工程建造等職業體現較好;半導體、互聯網以及軟…

掌握社交的這二十個心理技巧

1.自信:這一點說起來容易做起來難,但就算是假裝出來的自信,通過你的肢體語言表現出來。在很大程度也可以幫助你留下很好的第一印象。人們喜歡自信的人。因為他們更可靠,更值得信賴,更具吸引力。 2.當你第一次見到某人…

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…

List集合的復制方式

List集合的復制方式主要有以下幾種: 使用構造器復制 創建一個新的List集合,并將原始List集合作為參數傳遞給它的構造器。例如,List<String> newList = new ArrayList<>(originalList)。這種方式會創建一個新的List對象,并將原始List的所有元素復制到新List中…

快速學習SpringAi

Spring AI是AI工程師的一個應用框架&#xff0c;它提供了一個友好的API和開發AI應用的抽象&#xff0c;旨在簡化AI應用的開發工序&#xff0c;例如開發一款基于ChatGPT的對話應用程序。通過使用Spring Ai使我們更簡單直接使用chatgpt 1.創建項目 jdk17 引入依賴 2.依賴配置 …

同城組局同城活動找搭子小程序JAVA源碼面芽組局的實現方案

功能概述 基于微信小程序開發的一款軟件&#xff0c;支持用戶動態發布、私信聊天關注、禮物充值打賞、發起活動組局、用戶報名參與、支持商家入駐&#xff0c;對接廣告功能等。 活動發布&#xff1a;用戶可以在平臺上發布各種類型的活動&#xff0c;如戶外徒步、音樂會觀賞、…

AI應用案例:會議紀要自動生成

以騰訊會議轉錄生成的會議記錄為研究對象&#xff0c;借助大模型強大的語義理解和文本生成等能力&#xff0c;利用指令和文本向量搜索實現摘要總結、要點提取、行動項目提取、會議紀要生成等過程&#xff0c;完成會議紀要的自動總結和生成&#xff0c;降低人工記錄和整理時間成…

React 第三十章 React 和 Vue 描述頁面的區別

面試題&#xff1a;React 和 Vue 是如何描述 UI 界面的&#xff1f;有一些什么樣的區別&#xff1f; 標準且淺顯的回答&#xff1a; React 中使用的是 JSX&#xff0c;Vue 中使用的是模板來描述界面 前端領域經過長期的發展&#xff0c;目前有兩種主流的描述 UI 的方案&#xf…

Q1季度電飯煲家電行業線上市場(京東天貓淘寶)銷售數據排行榜

鯨參謀監測的2024年Q1季度線上電商平臺&#xff08;天貓淘寶京東&#xff09;電飯煲家電銷售數據已出爐&#xff01; 今年Q1季度&#xff0c;電飯煲銷售成績不如預期。根據鯨參謀數據顯示&#xff0c;今年Q1季度在線上電商平臺&#xff08;淘寶天貓京東&#xff09;電飯煲銷量…

三種有效方法:快速將視頻格式轉換mp4格式

在當今數字化時代&#xff0c;視頻文件的格式多種多樣&#xff0c;而將視頻轉換為MP4格式是一種常見的需求。MP4格式具有廣泛的兼容性&#xff0c;適用于多種設備和平臺&#xff0c;因此經常被選擇作為視頻文件的輸出格式。 無論是為了在移動設備上觀看視頻&#xff0c;還是為…

照妖鏡api接口,查詢旺旺的降權、黑號舉報數據(全網實時更新)

照妖鏡api接口&#xff0c;查詢旺旺的降權、黑號舉報數據&#xff08;全網實時更新&#xff09; 照妖鏡查號功能說明&#xff1a; 1.照妖鏡查號功能的打標信息為商家主動共享&#xff0c;不對相關使用效果或糾紛承擔責任&#xff1b; 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、新建一個虛擬環…

多讀書,多鍛煉,勇敢點,去面對,去解決

這些建議都是非常積極和有益的&#xff0c;它們涵蓋了身心健康和個人成長的重要方面。以下是對這些建議的詳細解釋&#xff1a; 多讀書&#xff1a; 拓寬視野&#xff1a;書籍是知識的海洋&#xff0c;通過閱讀&#xff0c;我們可以接觸到各種各樣的思想、文化和經驗&#xff0…

“webpack-dev-server --config build/webpack.dev.conf.js” 請問這個問題要如何修復

解決方案 修改部署方式&#xff1a; 使用 webpack 來打包你的項目&#xff0c;生成靜態文件。在生產環境中&#xff0c;使用 Nginx 或其他 HTTP 服務器來提供服務&#xff0c;而不是使用 webpack-dev-server。 Dockerfile 調整&#xff1a; 確保 Dockerfile 中使用的命令是用于…

ArcGIS Maps :在Vue3中加載ArcGIS地圖

Vue3中使用ArcGIS Maps SDK for JavaScript的步驟 一、創建 Vue 3 項目 1、新建ArcGISAPIProject文件夾&#xff0c;并用vscode打開 2、打開終端&#xff0c;在終端中輸入npm create vitelatest項目名稱vite-vue3-arcgis,選擇vue框架&#xff0c;并選中JavaScript語音創建項目…