目錄
一、命令行中重新啟動已搭建好的Vue3工程。(快速上手)
（0）Windows環境下使用命令行從零到一手動搭建Vue3工程教程。
（1）首先找到已建Vue3工程的目錄。
（2）無需再下載依賴包，直接執行npm run dev。
（3）命令行啟動Vue3工程的缺點。
二、使用IDEA(2024)打開、啟動與簡化(初始的)Vue3工程。
（1）打開IDAE，并進入到項目的上級目錄。
（2）刪除不需要的文件。
（3）啟動Vue3工程。
（4）項目"瘦身"。(刪除src下獨自開發時無用代碼或文件)
<1>刪除assets、components目錄下無用文件。
<2>修改views目錄下文件。
<3>刪除router(路由)目錄中的多余、無效路由并簡單修改。
<4>精簡Vue項目入口——App.vue。
<5>刪除main.js中的引入已刪除css文件代碼。(刪除無用導包)
<6>瘦身完成——Vue3工程的最基礎腳手架搭建完成！
三、對Vue3工程基礎腳手架進行全局css樣式添加。
（1）修改Home.vue文件。
（2）assets目錄下新建global.css。(全局樣式)
（3）main.js文件引入新的css樣式。
一、命令行中重新啟動已搭建好的Vue3工程。(快速上手)
（0）Windows環境下使用命令行從零到一手動搭建Vue3工程教程。
- Vue實戰學習（Vue環境配置、快速上手及卸載、下載安裝Node.js超詳細教程(2025)、npm配置淘寶鏡像）(1)-CSDN博客
- 當Vue3基本環境已配置好后，再次使用命令行啟動之前已搭建的Vue3工程的步驟如下。
（1）首先找到已建Vue3工程的目錄。
- d:。（進入到D盤）
- cd D:\Vue\VueCode2025\xmproject\vue0307Night。（進入到項目目錄）
（2）無需再下載依賴包，直接執行npm run dev。
- 這樣成功重新啟動之前已搭建好的《快速上手-Vue3工程》。
- 訪問給出的local地址。http://localhost:5173/
（3）命令行啟動Vue3工程的缺點。
- 配置、啟動方式相對麻煩。（具體可以查看博主上篇博客）
- 當命令行窗口關閉后，整個項目也跟著關閉運行，也就無法在瀏覽器中訪問到該地址。
- 所以將使用工具IDEA打開已經搭建好的Vue工程并啟動。
二、使用IDEA(2024)打開、啟動與簡化(初始的)Vue3工程。
（1）打開IDAE，并進入到項目的上級目錄。
- 到IDEA的主界面。點擊打開。一定選擇的是對應Vue3工程的目錄的上級目錄打開。
- 選擇正確的目錄后，點擊確定即可。
- 點擊信任該項目。
（2）刪除不需要的文件。
（3）啟動Vue3工程。
- src目錄是所有的代碼。
- views目錄是頁面。
- components目錄里是組件。
- assets目錄里面是一些文件。
- 到這一步也是成功獨立的完成了IDEA啟動Vue3工程了。
（4）項目"瘦身"。(刪除src下獨自開發時無用代碼或文件)
<1>刪除assets、components目錄下無用文件。
<2>修改views目錄下文件。
- setup是必備的屬性，它是語法糖。有這個就可以使用Vue3的語法特性！
- 刪除AboutView.vue文件。
- 改名操作：將HomeView.vue名稱改成Home.vue。
精簡后的Home.vue文件如下。
<template><div>歡迎來到hyl的第一個Vue3項目主頁！加油學習吧！</div> </template><script setup></script>
<3>刪除router(路由)目錄中的多余、無效路由并簡單修改。
- 使用：component: () => import('../views/Home.vue')。
- 代替：import HomeView from '../views/Home.vue' + component: HomeView。
- 精簡后的路由如下所示。
import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/', name: 'home', component: () => import('../views/Home.vue')},], })export default router
<4>精簡Vue項目入口——App.vue。
- 讓App.vue只作為項目的入口文件即可。（超級精簡）
- 只保留<RouterView/>即可。全部從頭到尾部刪除干凈。
- 如標簽<script setup>、<style scoped>標簽+內部的所有內容刪除干凈。
<5>刪除main.js中的引入已刪除css文件代碼。(刪除無用導包)
<6>瘦身完成——Vue3工程的最基礎腳手架搭建完成！
- 前往package.json文件：重新啟動運行即可。
- 極簡的Vue3初始工程——最基礎的腳手架。這樣才能基于這個工程完成后面其它的Vue3學習與獨立開發。
三、對Vue3工程基礎腳手架進行全局css樣式添加。
（1）修改Home.vue文件。
- 添加<div>盒子與基礎的css樣式。
<template><div><div style="background-color: cadetblue">歡迎來到hyl的第一個Vue3項目主頁！加油學習吧！</div></div> </template><script setup></script>
- 需要去掉<body>本身的一個margin。
（2）assets目錄下新建global.css。(全局樣式)
body：選擇器。表示這段樣式應用網頁的主體部分（<body>標簽）。
margin: 0;設置<body>標簽的外邊距為0。默認情況下，瀏覽器會為<body>標簽添加一定的外邊距。通過設置使網頁內容能夠緊貼瀏覽器窗口邊緣。
padding: 0;設置<body>標簽的內邊距為0。同樣是為了移除默認的內邊距，防止內容與邊界之間出現不必要的空間。
font-size: 16px;設置網頁中文字的默認字體大小為16像素。這是網頁中文字顯示的基礎大小，其他未單獨設置字體大小的元素會繼承這個值。
color: #333;設置網頁中文字的默認顏色為深灰色。同樣，未單獨設置顏色的元素會繼承這個顏色值。
（3）main.js文件引入新的css樣式。
- 先寫import，在打一個雙引號，選擇@/，后面就可以接css文件的路徑。
- 可以自己設置一些簡單的css樣式豐富自己的頁面。字體大小、字體顏色、字體粗細、背景、字體的形式等待很多。
- 具體可以去菜鳥教程學習簡單的css樣式網址——CSS 教程 | 菜鳥教程
- 到這里就是Vue3工程最基礎的腳手架搭建以及全局的css樣式已經設置完成！
- 后面就需要去學習Vue3的基礎語法和實戰的運用。
- 具體的Vue3網上學習的菜鳥教程網址——Vue3 教程 | 菜鳥教程
)
