我們已經(jīng)安裝好了我們的vue腳手架，用vscode打開(kāi)工程目錄

要自由自在的開(kāi)發(fā)，首先就需要明白我們文件的具體功能是干什么用的，還是問(wèn)問(wèn)chatgpt比較合適

1 項(xiàng)目目錄及文件的具體作用

1.1 App.vue

在根目錄下邊有一個(gè)App.vue文件，這個(gè)是干什么用的呢？

App.vue作用是什么

App.vue 是 Vue.js 應(yīng)用程序的根組件，它起到了以下幾個(gè)作用：

1. 容器組件：App.vue 是整個(gè)應(yīng)用的容器，在應(yīng)用啟動(dòng)時(shí)，它是第一個(gè)被加載和渲染的組件。所有其他組件都會(huì)作為 App.vue 的子組件嵌套在其中。

2. 布局定義：App.vue 可以定義整個(gè)應(yīng)用的布局結(jié)構(gòu)。通過(guò)在 template 部分編寫(xiě) HTML 結(jié)構(gòu)，可以確定應(yīng)用的整體布局、導(dǎo)航欄、底部欄等固定部分。

3. 路由容器：如果你使用了 Vue Router 進(jìn)行路由管理，App.vue 通常會(huì)包含 組件，用于根據(jù)當(dāng)前路由渲染對(duì)應(yīng)的頁(yè)面組件。

4. 狀態(tài)管理：如果你使用了 Vuex 進(jìn)行狀態(tài)管理，App.vue 可以作為根組件來(lái)管理全局的狀態(tài)。通過(guò)在 script 部分引入 Vuex 并注入全局狀態(tài)，可以在整個(gè)應(yīng)用的各個(gè)子組件中訪問(wèn)和修改共享的狀態(tài)數(shù)據(jù)。

總而言之，App.vue 是 Vue.js 應(yīng)用程序的根組件，負(fù)責(zé)整體布局、路由容器和狀態(tài)管理等關(guān)鍵功能。它在整個(gè)應(yīng)用中起到了承載和協(xié)調(diào)其他組件的作用。

1.2 main.js的作用

main.js起什么作用

main.js 是 Vue.js 應(yīng)用程序的入口文件，它起到了以下幾個(gè)重要作用：

1. 創(chuàng)建 Vue 實(shí)例：在 main.js 中，我們通過(guò)引入 Vue 庫(kù)并創(chuàng)建一個(gè)根 Vue 實(shí)例。這個(gè)實(shí)例將作為整個(gè)應(yīng)用的頂層容器，負(fù)責(zé)協(xié)調(diào)和管理其他組件。

2. 引入和配置插件：在 main.js 中，我們可以引入并配置 Vue.js 的插件，如 Vue Router、Vuex 等。通過(guò)配置插件，我們可以為應(yīng)用添加路由功能、狀態(tài)管理等額外功能。

3. 注冊(cè)全局組件：如果你有一些在整個(gè)應(yīng)用中都會(huì)用到的組件，你可以在 main.js 中進(jìn)行全局注冊(cè)，使得這些組件可以在任何地方使用，而不需要每次在使用時(shí)都進(jìn)行局部注冊(cè)。

4. 掛載應(yīng)用：在 main.js 中，我們還需要使用 render 函數(shù)將根 Vue 實(shí)例掛載到 HTML 文檔中的某個(gè) DOM 元素上。通常情況下，我們會(huì)將應(yīng)用掛載到一個(gè)具有 id 屬性的元素上

總之，main.js 是 Vue.js 應(yīng)用程序的入口文件，負(fù)責(zé)創(chuàng)建 Vue 實(shí)例、配置插件、注冊(cè)全局組件，并將應(yīng)用掛載到 HTML 文檔中的某個(gè) DOM 元素上。

1.3 main.js什么時(shí)候被調(diào)用

main.js什么時(shí)候被調(diào)用

main.js 在 Vue.js 應(yīng)用程序中是在應(yīng)用啟動(dòng)時(shí)被調(diào)用的。

當(dāng)我們通過(guò)引入 Vue 庫(kù)并創(chuàng)建一個(gè)根 Vue 實(shí)例時(shí)，會(huì)在 main.js 中執(zhí)行一些初始化操作，然后將根實(shí)例掛載到 HTML 文檔中的某個(gè) DOM 元素上。

具體來(lái)說(shuō)，main.js 的調(diào)用時(shí)機(jī)如下：

1. 首先，瀏覽器會(huì)加載 main.js 文件。

2. main.js 中的代碼會(huì)在瀏覽器解析到它時(shí)被執(zhí)行。

3. 在 main.js 中，我們可以進(jìn)行一些初始化設(shè)置，如引入和配置插件、注冊(cè)全局組件等。

4. 最后，通過(guò)調(diào)用 new Vue({…}) 創(chuàng)建根 Vue 實(shí)例，并使用 render 函數(shù)將實(shí)例掛載到 HTML 文檔中的指定 DOM 元素上。

總之，main.js 在 Vue.js 應(yīng)用程序中是在應(yīng)用啟動(dòng)時(shí)被調(diào)用的，負(fù)責(zé)進(jìn)行初始化設(shè)置和創(chuàng)建根 Vue 實(shí)例。

1.4 npm run serve干了什么事情

當(dāng)你在命令行中運(yùn)行 npm run serve 命令時(shí)，它會(huì)執(zhí)行項(xiàng)目中的 package.json 文件中定義的 scripts 部分的 serve 腳本。

通常情況下，npm run serve 的目的是啟動(dòng)一個(gè)開(kāi)發(fā)服務(wù)器，用于在開(kāi)發(fā)過(guò)程中實(shí)時(shí)預(yù)覽和調(diào)試你的應(yīng)用程序。

具體來(lái)說(shuō)，npm run serve 做了以下幾件事情：

1. 檢查項(xiàng)目中是否已經(jīng)安裝了相應(yīng)的依賴(lài)項(xiàng)。如果沒(méi)有安裝依賴(lài)項(xiàng)，則可能在運(yùn)行之前會(huì)自動(dòng)執(zhí)行 npm install 命令來(lái)安裝所需的依賴(lài)項(xiàng)。

2. 執(zhí)行 serve 腳本，該腳本在 package.json 文件中定義。通常，它會(huì)調(diào)用一個(gè)構(gòu)建工具（如 webpack）來(lái)編譯和打包應(yīng)用程序。

3. 構(gòu)建工具會(huì)讀取配置文件（如 webpack.config.js），根據(jù)配置文件的設(shè)置對(duì)項(xiàng)目進(jìn)行編譯和打包。這可能包括處理 JavaScript、CSS、圖片等資源文件，并將它們轉(zhuǎn)換為瀏覽器可以識(shí)別和加載的格式。

4. 啟動(dòng)一個(gè)本地開(kāi)發(fā)服務(wù)器，在指定的端口上提供應(yīng)用程序。這個(gè)服務(wù)器支持熱重載，即當(dāng)你修改代碼時(shí)，它會(huì)自動(dòng)重新編譯和刷新瀏覽器，以便你可以即時(shí)看到修改的效果。

總之，npm run serve 的主要作用是啟動(dòng)一個(gè)開(kāi)發(fā)服務(wù)器，用于實(shí)時(shí)預(yù)覽和調(diào)試你的應(yīng)用程序，并提供熱重載功能，以提高開(kāi)發(fā)效率。

1.5 package.json的作用

package.json 文件是 npm 用來(lái)管理依賴(lài)關(guān)系和版本的文件。它記錄了項(xiàng)目中所有依賴(lài)包的詳細(xì)信息，包括版本號(hào)、下載地址等，以及它們之間的依賴(lài)關(guān)系。這樣，在其他開(kāi)發(fā)人員或機(jī)器上重新安裝項(xiàng)目時(shí)，就能保證所有依賴(lài)包的版本一致。

2 安裝UI框架

好了，了解了vue工程的項(xiàng)目目錄以及一些工作機(jī)制，我們就開(kāi)始搭建首頁(yè)了?，F(xiàn)在前端開(kāi)發(fā)當(dāng)然不是從基礎(chǔ)的html、css寫(xiě)起，我們是需要借助UI框架的。因?yàn)槲覀冞x擇了Vue3，所以我們的UI框架選擇element-plus

2.1 安裝命令

打開(kāi)我們的vs code ，在頂部的菜單欄點(diǎn)擊Terminal，新建一個(gè)Terminal

在命令行里輸入如下命令

npm install element-plus --save

包安裝好之后，它是放在當(dāng)前工程的node_modules里

而且package.json的依賴(lài)項(xiàng)里會(huì)多一個(gè)element-plus的項(xiàng)目，還顯示當(dāng)前的版本號(hào)

2.2 全局引入

我們的包下載好了之后需要讓vue知道包在哪里，打開(kāi)main.js修改為如下配置

import { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import App from './App.vue'
const app = createApp(App)app.use(ElementPlus)app.mount('#app')

3 啟動(dòng)工程

在命令行窗口輸入

npm run serve

看工程啟動(dòng)的時(shí)候是否報(bào)錯(cuò)，如果不報(bào)錯(cuò)，且給出了訪問(wèn)地址說(shuō)明UI框架已經(jīng)安裝好了。

總結(jié)

我們本篇和chatgpt了解了vue工程目錄文件的具體作用，引入了element-plus框架，主要是需要學(xué)會(huì)按需引入自己的包。一般提供包的第三方會(huì)在文檔里寫(xiě)明如何安裝，如何引入，我們只需要按照指引照做就可以。