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

這里我使用的是pnpm

node -v
pnpm -v

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

其中cxr_kfc是我的項目名稱

運行需要指定工作空間，在自己的目錄下打開

pnpm create vite cxr_kfc --template vue

運行成功

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

會在項目文件中增加一個文件，不要亂動，不然可能報錯

運行成功

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

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

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

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

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

4.2 增加路由

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

pnpm add vue-router@4

路由安裝成功

4.3 安裝組件Element Plus

安裝成功

4.4 配置路由

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

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

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

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

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

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

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

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

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


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

其中，路由表中

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

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

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

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

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

</template>

4.4.4 在整個項目中使用路由，在main.js中注冊

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 再次運行 pnpm run dev

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

5.美化頁面

6.總結(jié)

6.1 App.vue vue文件特點

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

沒有順序關(guān)系

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

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

當(dāng)你啟動項目并在瀏覽器中打開它時，Vue 會查找這個特定的 DOM 元素，并將其作為 Vue 實例的掛載點。

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

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

6.3 Vue Router和Element Plus

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

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

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

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

6.4 Vue框架開發(fā)單頁面開發(fā)SPA

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

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

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

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

6.5 為什么使用Vite

1.現(xiàn)實問題

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

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

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

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

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

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

3.快速更新

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

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

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

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

6.7Node.js/npm/pnpm

Node.js

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

npm

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

pnpm

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

總結(jié)

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

最新評論