如何啟動vue項目及vue語法組件化不同標簽應對的作用說明

提示：幫幫志會陸續更新非常多的IT技術知識，希望分享的內容對您有用。本章分享的是node.js和vue的使用。前后每一小節的內容是存在的有：學習and理解的關聯性。【幫幫志系列文章】：每個知識點，都是寫出代碼和運行結果且前后關聯上的去分析和說明（能大量節約您的時間）。

所有文章都*不會*直接把代碼放那里，讓您自己去看去理解。我希望我的內容對您有用而努力~

---

---

本文章是系列文章，技術棧內容為：【springboot+vue】【前后分離】
【詳細圖文，實操步驟分享，節約時間版】。最終完成一個商業化項目。內容有：
springboot知識
mybatisPlus知識
vue知識
node.js知識

本小節的內容是：
vue篇章 之 ： 08.啟動vue項目及自行編寫一些標簽和樣式

---

---

每一個文章小節都會把 標題 說的很清楚。前后關聯看，可以快速實現：前后分離。本質上，額外文章鏈接和文章自己標題內容關系不大。

前面小節文章已經實現springboot的創建，springboot關聯前端數據swagger和springboot通過mybatisplus操作數據庫：
【2025年】基于電腦的jdk1.8通過idea創建springboot2.x版本(非常簡潔快速)
【上榜文章，一文搞定】現在springboot是3.x以上版本，jdk版本至少要求17.但是很多時候我們電腦是jdk1.8(求穩定性和安全性)。文本分享本機電腦1.8的jdk。idea如何非常簡潔快速的創建springboot
文章里面也有 為什么只能是jdk17起和地址指定為阿里云報錯的解決辦法

前面小節已經安裝好node.js和分享了一些vue語法，及RESTful風格及swagger的使用：
vue.js基本語法及開發環境準備

---

前言

當前 實現前后分離項目進度：已經創建好了vue項目，也分享了vue項目的工程結構，包括main.js等等核心文件
放在一起 文章太長，且拆分開之后，每個標題專注相關內容。也有一些擴展在對應的文章里面
【從0開始，一文搞定】通過node.js里的NPM來創建vue項目，及項目層級目錄說明

---

一、啟動vue項目

通過命令啟動，注意的是輸入命令的層級位置：在整個vue工程的根目錄

比如我的項目工程在這個位置，就從這個位置開啟終端，輸入命令：
npm run serve

也可以在vsCode里面打開終端,輸入命令(vsCode里面的終端，命令就直接能對應到工程根目錄位置)
菜單欄–>view -->Terminal打開終端輸入命令：npm run serve

輸入命令，回車，等待

顯示成功：

告訴我們 成功之后，對應的網址

輸入網址：地址localhost:8080/

默認的標簽及內容。
其實正好，當我們有一些html基礎之后，可以查看vsCode里面的代碼標簽,也能看出它是怎么運行的:

---

二、分析項目內容及啟動流程

根據第一點.開打網頁之后.
回到vsCode查看對應的代碼:

main.js 是主程序入口。==》 項目啟動之后，它加載的main.js里面的內容
把當前位置的App.vue 文件 導入進來之后，取了一個名字是App
( from ./App.vue)
然后創建了一個App對象 影響id為app的標簽
系列文章內容其實 從來不會 跳躍分享內容，這個main.js和package.json 等等核心文件，在上一小節分享了：如何創建vue工程，工程的所有文件目錄。
系列文章內容其實 從來不會 跳躍分享內容，那個.mount('#app')語法，影響id為app的標簽。前面文章也分享了vue的語法語義，當時文章還沒有vue項目結構和組件化開發的概念。用的html語法來分享的

./App.vue 這個文件在main.js被導入。
xxxx.vue文件是組件化開發的語法。由三個標簽組成(前面文章有詳細分享)，得知：
1.先看script標簽， 引入了當前層級結構的component文件夾里面helloworld.vue文件，在取了一個名字是 HelloWorld
2.在js語法代碼里面，設置了一個標簽名字為：HelloWorld(這個標簽就代表helloworld.vue文件)
3.在template標簽里面，先引入了一個logo圖片，然后使用自定義標簽HelloWorld引用helloworld.vue文件里面的內容
4.在style標簽，寫了當前網頁的css樣式

所以：我們看App.vue的網頁：里面有一個logo圖片img。引用了另一個vue文件的內容(helloworld.vue)。

---

三、根據分析自行修改標簽和樣式

根據第二點：
1.把上一個的【import HelloWorld from ‘./components/HelloWorld.vue’】刪了
不引入這個文件并不取這個名字
`那么現在main.js 打開就是一個光logo圖片了唄

<template><img alt="Vue logo" src="./assets/logo.png"></template><script>export default {name: 'App',components: {}
}
</script>
style沒有截屏，也沒有刪它

2.在`components文件夾里面 創建一個新的vue文件
bbz.vue

3.在新的bbz.vue里面寫上template標簽（這個標簽是 填寫HTML標簽的）
其他js邏輯和樣式，目前暫時沒寫。各位可以自己加上，顏色字體大小…

<template><h1>你好，幫幫志</h1>
</template>
<script>
</script>
<style>
</style>

4.在App.vue里面引入import bangbangzhi from ‘./components/bbz.vue’
5.在App.vue里面的template標簽 里面調用自定義標簽：bangbangzhi
組件化 開發。 您復制多少個bangbangzhi 標簽 logo(img我們沒有刪)下面就就有多少個 bangbangzhi 的內容

<template><img alt="Vue logo" src="./assets/logo.png"><bangbangzhi></bangbangzhi><bangbangzhi></bangbangzhi><bangbangzhi></bangbangzhi><!-- 復制多少個   就多幾個h1  任意調用 -->
</template><script>
import bangbangzhi from './components/bbz.vue'export default {name: 'App',components: {bangbangzhi}
}
</script>

vue推薦的就是組件化開發。 高內聚：三個標簽在一起描述一個模塊(script標簽：js代碼。style標簽：css樣式 。template標簽：這里面的html標簽)
如菜單欄，如某個div顯示欄，然后可以來來回回的復用和調用

---

總結

說明一下：整個這個系列實現前后分離的springboot+vue項目。序號文章一共也就10幾篇，只有核心圖文重點操作步驟來實現這個目標(基本上您邊看邊寫：一個小時或者一上午就能跟著一起手搓一個前后分離項目，然后您可以自行添加功能和內容在您項目里面)

其他擴展細節知識點，本系列省略了(或者有鏈接)如：
vue還有一些案例，但是現在案例基本滿足大部分情況，畢竟當前我們的目的是：快速手搓一個前后分離的全棧。
vue.js的其他功能及使用，管它*現在*用不用的上，內容全部丟進來。各位看官自行消化。那~可能會很多很多了（又耗時）。當前 系列： 手搓出來之后，您可以自行加功能和內容

（會陸續更新非常多的IT技術知識及泛IT的電商知識，可以點個關注，共同交流。?( ′･?･` )比心）
（也歡迎評論，提問。 我會依次回答~）