1.檢查node.js和npm/pnpm的安裝

這里我使用的是pnpm

node -v
pnpm -v

2.構(gòu)建一個(gè) Vite + Vue 項(xiàng)目

其中cxr_kfc是我的項(xiàng)目名稱

運(yùn)行需要指定工作空間，在自己的目錄下打開(kāi)

pnpm create vite cxr_kfc --template vue

運(yùn)行成功

2.1 執(zhí)行提示的命令

會(huì)在項(xiàng)目文件中增加一個(gè)文件，不要亂動(dòng)，不然可能報(bào)錯(cuò)

運(yùn)行成功

3.使用HBuilderX導(dǎo)入項(xiàng)目

4.使用 Vite 和 Vue 3 構(gòu)建 SPA

4.1項(xiàng)目結(jié)構(gòu)

Vite 會(huì)自動(dòng)創(chuàng)建一個(gè)基本的項(xiàng)目結(jié)構(gòu)，包括 src 目錄下的組件、路由和狀態(tài)管理等文件。

• src: 包含源代碼
  • App.vue: 根組件
  • main.js: 應(yīng)用程序入口
  • router: Vue Router 配置
  • store: 狀態(tài)管理（如使用 Pinia，這里我暫時(shí)沒(méi)有用到）

4.2 增加路由

可以輕松地在單頁(yè)面應(yīng)用（SPA）中實(shí)現(xiàn)頁(yè)面間的導(dǎo)航和視圖的動(dòng)態(tài)加載

pnpm add vue-router@4

路由安裝成功

4.3 安裝組件Element Plus

安裝成功

4.4 配置路由

4.4.1 創(chuàng)建兩個(gè)文件為后續(xù)跳轉(zhuǎn)做準(zhǔn)備

先在src創(chuàng)建一個(gè)目錄pages,在目錄中創(chuàng)建兩個(gè)vue文件

再兩個(gè)文件中放入測(cè)試數(shù)據(jù)

4.4.2 創(chuàng)建路由：router/index.js文件中，聲明路由表（注冊(cè)所有vue文件）

在src中創(chuàng)建一個(gè)router目錄，在router目錄中創(chuàng)建一個(gè)index.js文件，在文件中聲明路由，文件中代碼如下：

import { createWebHashHistory, createRouter } from 'vue-router'

// 注冊(cè)自定義的vue文件
import Order from '../pages/Order.vue'
import Billing from '../pages/Billing.vue'

// 路由表
const routes = [
  { path: '/', component: Order },
  { path: '/Billing', component: Billing },
]

// 創(chuàng)建路由對(duì)象
const router = createRouter({
  history: createWebHashHistory(),
  routes,
})


//聲明：導(dǎo)出
export default router

其中，路由表中

• path: 這是指定的 URL 路徑。當(dāng)用戶在瀏覽器地址欄中輸入這個(gè)路徑或者通過(guò) Vue Router 的 <router-link> 或編程式導(dǎo)航 (this.$router.push()) 導(dǎo)航到這個(gè)路徑時(shí)，對(duì)應(yīng)的組件將會(huì)被渲染。

• component: 這是與指定路徑關(guān)聯(lián)的 Vue 組件。當(dāng)路徑匹配時(shí)，這個(gè)組件將被加載并顯示在 <router-view> 占位符的位置上。

4.4.3 改造App.vue,設(shè)定RouterView

將App.vue文件中的內(nèi)容替換：

<template>
	<router-link to="/">點(diǎn)餐</router-link> 
	<router-link to="/billing">結(jié)賬</router-link> 
	
	<router-view></router-view>

</template>

4.4.4 在整個(gè)項(xiàng)目中使用路由，在main.js中注冊(cè)

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

//引入路由index.js,導(dǎo)入js文件
import router from './router/index.js'

const app = createApp(App)
app.use(router)
app.mount('#app')

4.4.5 再次運(yùn)行 pnpm run dev

成功，實(shí)現(xiàn)跳轉(zhuǎn)

5.美化頁(yè)面

6.總結(jié)

6.1 App.vue vue文件特點(diǎn)

由3部分組成：template 寫(xiě)html代碼、script js腳本vue3+ setup語(yǔ)法方式、style css樣式，scoped限定只在本片段中生效，每個(gè)組件都應(yīng)該有一個(gè)清晰的職責(zé)和數(shù)據(jù)流，

沒(méi)有順序關(guān)系

6.2<div id="app">的作用

<div id="app"></div> 這個(gè)元素是 Vue 實(shí)例掛載點(diǎn)的標(biāo)識(shí)。

當(dāng)你啟動(dòng)項(xiàng)目并在瀏覽器中打開(kāi)它時(shí)，Vue 會(huì)查找這個(gè)特定的 DOM 元素，并將其作為 Vue 實(shí)例的掛載點(diǎn)。

createApp(App) 創(chuàng)建了一個(gè) Vue 應(yīng)用程序?qū)嵗?，其?nbsp;App 是你的應(yīng)用程序的根組件，通常定義在 App.vue 文件中。.mount('#app') 方法則將這個(gè)應(yīng)用程序?qū)嵗龗燧d到頁(yè)面上帶有 id="app" 的 DOM 元素上。

所以我們不會(huì)直接修改 index.html 文件中的 #app 元素內(nèi)容，而是通過(guò) Vue 組件和模板語(yǔ)法來(lái)動(dòng)態(tài)生成這部分內(nèi)容。

6.3 Vue Router和Element Plus

Vue Router 是 Vue 官方的客戶端路由解決方案。

客戶端路由的作用是在單頁(yè)應(yīng)用 (SPA) 中將瀏覽器的 URL 和用戶看到的內(nèi)容綁定起來(lái)。當(dāng)用戶在應(yīng)用中瀏覽不同頁(yè)面時(shí)，URL 會(huì)隨之更新，但頁(yè)面不需要從服務(wù)器重新加載。

Vue Router 基于 Vue 的組件系統(tǒng)構(gòu)建，你可以通過(guò)配置路由來(lái)告訴 Vue Router 為每個(gè) URL 路徑顯示哪些組件。

Element Plus 是 Element UI 的升級(jí)版，是一個(gè)基于 Vue 3 的現(xiàn)代化 UI 組件庫(kù)，它提供了一系列豐富且風(fēng)格統(tǒng)一的組件，幫助開(kāi)發(fā)者快速構(gòu)建美觀、響應(yīng)式的界面。Element Plus 遵循了 Material Design 和 iOS 的設(shè)計(jì)原則，適用于構(gòu)建桌面和移動(dòng)設(shè)備上的應(yīng)用程序。

6.4 Vue框架開(kāi)發(fā)單頁(yè)面開(kāi)發(fā)SPA

它和傳統(tǒng)開(kāi)發(fā)不一樣的（asp/jsp/php/h5 多頁(yè)面）

怎么去把其他內(nèi)容（home首頁(yè)、about關(guān)于…）怎么存儲(chǔ)，展現(xiàn)它通過(guò)路由工具Vue-router進(jìn)行跳轉(zhuǎn)

RouterLink 類似a標(biāo)簽，鏈接

RouterView 類似展現(xiàn)的地方，它可以接收路由跳轉(zhuǎn)

6.5 為什么使用Vite

1.現(xiàn)實(shí)問(wèn)題

基于 JavaScript 開(kāi)發(fā)的工具就會(huì)開(kāi)始遇到性能瓶頸：通常需要很長(zhǎng)時(shí)間（甚至是幾分鐘?。┎拍軉?dòng)開(kāi)發(fā)服務(wù)器，即使使用模塊熱替換（HMR），文件修改后的效果也需要幾秒鐘才能在瀏覽器中反映出來(lái)。如此循環(huán)往復(fù)，遲鈍的反饋會(huì)極大地影響開(kāi)發(fā)者的開(kāi)發(fā)效率和幸福感。

Vite 旨在利用生態(tài)系統(tǒng)中的新進(jìn)展解決上述問(wèn)題：瀏覽器開(kāi)始原生支持 ES 模塊，且越來(lái)越多 JavaScript 工具使用編譯型語(yǔ)言編寫(xiě)。

2.快速的服務(wù)器啟動(dòng)

Vite 通過(guò)在一開(kāi)始將應(yīng)用中的模塊區(qū)分為 依賴 和 源碼 兩類，改進(jìn)了開(kāi)發(fā)服務(wù)器啟動(dòng)時(shí)間。

Vite 將會(huì)使用 esbuild 預(yù)構(gòu)建依賴。esbuild 使用 Go 編寫(xiě)，并且比以 JavaScript 編寫(xiě)的打包器預(yù)構(gòu)建依賴快 10-100 倍。

Vite 以 原生 ESM 方式提供源碼。這實(shí)際上是讓瀏覽器接管了打包程序的部分工作：Vite 只需要在瀏覽器請(qǐng)求源碼時(shí)進(jìn)行轉(zhuǎn)換并按需提供源碼。根據(jù)情景動(dòng)態(tài)導(dǎo)入代碼，即只在當(dāng)前屏幕上實(shí)際使用時(shí)才會(huì)被處理。

3.快速更新

在 Vite 中，HMR 是在原生 ESM 上執(zhí)行的。當(dāng)編輯一個(gè)文件時(shí)，Vite 只需要精確地使已編輯的模塊與其最近的 HMR 邊界之間的鏈?zhǔn)Щ?a rel="external nofollow" target="_blank">[1]（大多數(shù)時(shí)候只是模塊本身），使得無(wú)論應(yīng)用大小如何，HMR 始終能保持快速更新。

要確保開(kāi)發(fā)服務(wù)器和生產(chǎn)環(huán)境構(gòu)建之間的最優(yōu)輸出和行為一致并不容易。所以 Vite 附帶了一套 構(gòu)建優(yōu)化 的 構(gòu)建命令，開(kāi)箱即用。

6.6vite項(xiàng)目的結(jié)構(gòu)和加載的原理

Vite 項(xiàng)目結(jié)構(gòu)簡(jiǎn)潔，主要包括 src/ 存放源代碼，public/ 存放靜態(tài)資源，index.html 作為入口文件。加載原理利用瀏覽器原生 ESM 支持，按需編譯模塊，結(jié)合高效 HMR 實(shí)現(xiàn)快速開(kāi)發(fā)反饋，預(yù)構(gòu)建時(shí)優(yōu)化資源，提升生產(chǎn)環(huán)境性能。

6.7Node.js/npm/pnpm

Node.js

Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境，允許開(kāi)發(fā)者使用 JavaScript 開(kāi)發(fā)服務(wù)器端應(yīng)用程序。它采用了事件驅(qū)動(dòng)、非阻塞 I/O 模型，使其輕量且高效，非常適合運(yùn)行數(shù)據(jù)密集型實(shí)時(shí)應(yīng)用。Node.js 支持廣泛的模塊和包，可以通過(guò) npm/pnpm進(jìn)行安裝和管理。

npm

npm 是隨 Node.js 一起提供的包管理器，用于管理和安裝 Node.js 應(yīng)用程序的依賴包。npm 提供了一個(gè)龐大的在線倉(cāng)庫(kù)，包含數(shù)百萬(wàn)個(gè)開(kāi)源軟件包，開(kāi)發(fā)者可以輕松搜索、下載和集成這些包到自己的項(xiàng)目中。npm 還提供了本地包管理功能，幫助開(kāi)發(fā)者管理項(xiàng)目依賴和版本控制。

pnpm

pnpm 是另一個(gè)用于 Node.js 的包管理器，它旨在解決 npm 和 yarn 在性能和磁盤(pán)空間使用上的問(wèn)題。pnpm 使用了鏈接的工作區(qū)概念，通過(guò)硬鏈接來(lái)減少重復(fù)文件的存儲(chǔ)，從而節(jié)省磁盤(pán)空間。同時(shí)，它提供了并行安裝的能力，加速了依賴的安裝過(guò)程。pnpm 也支持最新版的 JavaScript 和 TypeScript 語(yǔ)法特性，以及現(xiàn)代的模塊系統(tǒng)。

總結(jié)

到此這篇關(guān)于如何使用Vite構(gòu)建vue項(xiàng)目的文章就介紹到這了,更多相關(guān)Vite構(gòu)建vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論