wuhuacong(伍華聰)的專欄

Vant 是一個輕量、可定制的移動端組件庫，于 2017 年開源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社區團隊維護 React 版本和支付寶小程序版本。

當前移動端 項目采用最新的Vant4進行開發，適合于Vue3的項目開發。

Vant 4 是一款基于 Vue 3 的輕量、可靠的手機端組件庫，主要用于快速搭建移動端應用。它提供了許多常用的 UI 組件，如按鈕、卡片、表單、導航等，旨在幫助開發者提高開發效率，同時保持應用的性能和一致性。

Vant 4 是完全基于 Vue 3 構建的，充分利用了 Vue 3 的新特性和性能優化，如 Composition API、Teleport、Fragments 等。通過 Vue 3 的優化，Vant 4 在渲染性能上有了顯著提升，特別是在處理大型列表和復雜組件時。

 掃碼進行了解 Vant4+Vue3+TypeScript 的移動前端。

系統界面截圖 

• Vite - 熟悉 Vite 特性
• Vue3 - 熟悉 Vue3 基礎語法
• Vant4 - 移動端 Vue 組件庫，掌握 vant4 組件基本使用
• Pinia - 使用 Pinia 的狀態管理，熟悉 Pinia 特性
• TypeScript - 熟悉 TypeScript 基本語法
• Vue-Router-Next - 熟悉 Vue-Router基本使用
• ECharts5 - 熟悉 Echarts 基本使用
• Iconify - 本項目推薦圖標庫，當然你也可以使用 IconSvg
• Postcss-Mobile-Forever - 了解手機端 px 轉 viewport 插件的作用，將固定尺寸的移動端視圖轉為具有最大寬度的可伸縮的移動端視圖
• Lodash-es - JS高性能工具庫
• UnoCSS - 高性能且極具靈活性的即時原子化 CSS 引擎，熟悉 UnoCSS 基本使用
• Mock.js - 本地數據模擬支持，了解 Mockjs 基本語法
• ES6+ - 熟悉 ES6 基本語法
• 支持 i18n - 國際化處理，掌握多語言配置處理和用法
• Axios 封裝 - 網絡接口請求處理，包括常規API處理和文件上傳
• unplugin-auto-import - API 自動加載 - 直接使用 Composition API 無需引入
• vConsole - 移動端網頁開發工具，方便調試錯誤
• 暗黑模式 - 可以切換前端界面的顯示模式。

2、VS Code 配套插件

如果你使用的 IDE 是 VS Code（推薦）的話，可以安裝以下工具來提高開發效率及代碼格式化

• UnoCSS - UnoCSS 提示插件
• Volar - Vue 開發必備
• TypeScript Vue Plugin (Volar) - 用于 TypeScript 服務器的 Vue 插件
• ESLint - 腳本代碼檢查
• DotENV - .env 文件 高亮
• Error Lens - 更好的錯誤定位
• EditorConfig for VS Code - 不同 IDE 維護一致的編碼樣式
• File Nesting Updater - 使用 VS Code 的文件嵌套功能使文件樹更干凈的配置
• Pretty TypeScript Errors - 使 VSCode 中的 TypeScript 錯誤更漂亮、更易于理解
• Todo Tree - 在樹視圖中顯示 TODO、FIXME 等注釋標簽
• Trailing Spaces - 突出顯示尾隨空格并立即將其刪除

npm install -g pnpm

npm config set registry https://registry.npmmirror.com

nvm install 22.12.0
nvm use 22.12.0
nvm current

# 安裝依賴
cd vue3-vant4-mobile
pnpm install

# 安裝pnpm,如果沒有pnpm 請先安裝
npm install -g pnpm

- 運行項目
# 運行
pnpm dev

- 打包項目

# 打包
pnpm build

# 啟動 Nginx 服務，第一次啟動Nginx服務
start nginx

# 刷新 Nginx 服務,每次修改配置文件后都需要刷新一下
nginx -s reload

# 查看所有的nginx進程
tasklist /fi "imagename eq nginx.exe"

# 停止所有nginx進程
taskkill /fi "imagename eq nginx.exe" /f

本地開發推薦使用Chrome 80+ 瀏覽器，支持現代瀏覽器, 不支持 IE。

4、項目圖標使用

內置圖標

內置圖標是模板預先提供好的，開發者可以直接使用。模板默認以 Vant 作為移動端組件庫，它提供了基于字體的圖標集 Icon 組件，提供了線框圖標和實底圖標的兩種風格圖標。

我們可以像下面代碼一樣使用圖標，非常的簡單。

<van-icon name="chat-o" />

大部分時候，內置的圖標無法滿足我們的需求場景，這就需要引入外部圖標集。

外部圖標 - 預設圖標

項目也使用 unocss 的 icon 預設 作為系統 Icon。

我們推薦 iconify。它是統一的圖標框架，超過 150 多個圖標集，和 200,000 個開源矢量圖標，并且會定期更新圖標。您可以在 iconify 或者 icones 中看到所有的圖標集。

使用 iconify 有多種方式，我們模板使用 CSS icon 方案，此方案由 @unocss/preset-icons 提供支持，可以很好的和 Unocss 配合使用。

請遵循以下約定使用圖標

• <prefix><collection>-<icon>
• <prefix><collection>:<icon>

<!-- A basic anchor icon from Phosphor icons -->
<div class="i-ph-anchor-simple-thin" />
<!-- An orange alarm from Material Design Icons -->
<div class="i:mdi:alarm" />

<i class="i-ic:sharp-arrow-back-ios" text-xl />

<van-cell :border="false" title="個人信息" is-link to="/editUserInfo">
  <template #icon>
    <i class="i-mingcute:idcard-fill mr-2 text-xl" />
  </template>
</van-cell>

點擊這里獲取所有可用的圖標（https://icones.js.org/），找到想要的圖標后點擊復制 icon name 到 class 里即可

記得加 i-xxx 前綴，從 icones 復制的 icon name 是沒有 i- 前綴的
更多詳細使用請看 https://unocss.dev/presets/icons#icons-preset

創建這些組件后，會自動添加到全局的文件components.d.ts 中。

如果要創建頁面級組件，也就是只屬于某個頁面的專用組件，通常會放在 src/views/**/components 目錄下。