【unibest】uniapp + vue3 + ts的超實(shí)用模板探索

一、模板構(gòu)建與體驗(yàn)優(yōu)化

今年（2024年），我們推出了全新的uniapp開(kāi)發(fā)模板——unibest。這一模板旨在提供超實(shí)用的開(kāi)發(fā)體驗(yàn)，基于vite+cli生成，全程使用VSCode編輯器。相較于HBuilderX，VSCode增加了類(lèi)型提示與快捷代碼塊，從而極大地提升了開(kāi)發(fā)效率。

生成項(xiàng)目

使用命令`npx degit dcloudio/uni-preset-vuevite-ts unibest`即可快速生成項(xiàng)目。

引入工具與配置

我們引入了prettier、eslint、stylelint等編輯器輔助工具，并配置了相應(yīng)的.editorconfig、.prettierrc.cjs、.eslintrc.cjs、.stylelintrc.cjs文件。還引入了Husky、lint-staged、commitlint，通過(guò)執(zhí)行命令`npx husky install`，實(shí)現(xiàn)了自動(dòng)代碼格式化與提交規(guī)范限制。

二、Vite配置深度優(yōu)化

我們?cè)趇ndex.html中增加了`build-date="%BUILD_DATE%"`，方便查看構(gòu)建時(shí)間。在vite.config.ts文件中，我們根據(jù)項(xiàng)目的特定需求進(jìn)行了細(xì)致的配置調(diào)整。引入了uno.config.ts，對(duì)main.ts文件進(jìn)行了適應(yīng)性調(diào)整。

三、VSCode插件與類(lèi)型提示的完美結(jié)合

我們推薦使用幾款VSCode插件，以?xún)?yōu)化您的代碼編寫(xiě)體驗(yàn)。特別值得一提的是，我們引入了uniapp類(lèi)型提示依賴(lài)包，通過(guò)修改tsconfig.json文件，實(shí)現(xiàn)了uni.x的自動(dòng)提示。我們配置了.eslintrc.cjs，以避免編寫(xiě)時(shí)出錯(cuò)。

四、持久化狀態(tài)管理解決方案

為了實(shí)現(xiàn)狀態(tài)的持久化管理，我們引入了pinia以及pinia-plugin-persistedstate插件。在非h5環(huán)境下，我們特別處理了持久化邏輯，確保數(shù)據(jù)的正確存儲(chǔ)與訪問(wèn)。我們還提供了示例代碼，展示如何在頁(yè)面中使用pinia進(jìn)行狀態(tài)管理。

五、UI框架選型：uv-ui的崛起

在構(gòu)建unibest模板時(shí)，UI框架的選擇至關(guān)重要。經(jīng)過(guò)深入對(duì)比，我們選擇了uv-ui作為unibest的UI框架。uv-ui憑借開(kāi)源熱度、多端支持、豐富的組件庫(kù)以及對(duì)ts的良好支持，脫穎而出。我們還向uv-ui的作者捐贈(zèng)咖啡以示感謝，以支持開(kāi)源社區(qū)。unibest作為備受關(guān)注的開(kāi)發(fā)模板，近一個(gè)月的star數(shù)和收藏?cái)?shù)均呈現(xiàn)出顯著增長(zhǎng)的趨勢(shì)。

此章節(jié)僅是概覽，后續(xù)章節(jié)將涵蓋更多細(xì)節(jié)與進(jìn)階功能，敬請(qǐng)期待。

【unibest】高效uniapp開(kāi)發(fā)模板詳解（一）

===========================

歡迎來(lái)到菲鴿的分享，今天我們將一同探索uniapp開(kāi)發(fā)的新境界——unibest模板。這款模板將為您帶來(lái)前所未有的開(kāi)發(fā)體驗(yàn)，讓您的uniapp項(xiàng)目如飛翔般順暢。接下來(lái)，我們將分為五個(gè)章節(jié)，為您詳細(xì)解讀這款模板的魅力所在。

一、基礎(chǔ)配置

模板簡(jiǎn)介與編輯器推薦

unibest模板基于vite和cli構(gòu)建，為您帶來(lái)全新的開(kāi)發(fā)體驗(yàn)。我們推薦使用VSCode編輯器，它提供了豐富的類(lèi)型提示和快捷代碼塊，將幫助您超越HBuilderX的開(kāi)發(fā)體驗(yàn)。

生成項(xiàng)目步驟

在終端運(yùn)行命令“uni-preset-vuevite-ts unibest>”即可快速生成項(xiàng)目。

二、代碼質(zhì)量工具

--

工具集成與配置

為了確保代碼格式統(tǒng)一，我們引入了prettier、eslint和stylelint。我們還將配置.editorconfig、.prettierrc和.eslintrc文件，并安裝stylelint相關(guān)依賴(lài)。

三 自動(dòng)化工具集成

代碼提交管理與規(guī)范

我們集成了husky與lint-staged，增強(qiáng)代碼提交管理。通過(guò)commitlint規(guī)范提交行為，讓團(tuán)隊(duì)協(xié)作更加高效。

四、Vite配置優(yōu)化

--

構(gòu)建時(shí)間顯示與配置定制

為了在開(kāi)發(fā)過(guò)程中更直觀地了解構(gòu)建時(shí)間，我們?cè)趇ndex.html中添加了構(gòu)建時(shí)間顯示。對(duì)vite.config.ts進(jìn)行定制，確保構(gòu)建過(guò)程的可見(jiàn)性。還將進(jìn)行相關(guān)依賴(lài)的安裝和配置文件的修改。

五、VSCode插件與類(lèi)型提示

--

插件推薦與類(lèi)型支持

我們?yōu)槟扑]了一系列VSCode插件，為uniapp提供強(qiáng)大的類(lèi)型支持。我們將通過(guò)調(diào)整tsconfig.json文件，解決uni的eslint提示(no-undef)問(wèn)題。

六、Pinia與持久化存儲(chǔ)

-

Pinia的安裝與配置

為了讓數(shù)據(jù)在多個(gè)平臺(tái)之間持久化存儲(chǔ)和共享，我們引入了pinia和pinia-plugin-persistedstate插件來(lái)處理持久化存儲(chǔ)問(wèn)題。在index.vue中實(shí)現(xiàn)數(shù)據(jù)持久化后，您將能看到成功信息展示。這確保了我們的應(yīng)用在各種平臺(tái)上的兼容性。以上僅是unibest模板的基礎(chǔ)構(gòu)建，更多精彩內(nèi)容，我們會(huì)在接下來(lái)的分享中逐一呈現(xiàn)。讓我們拭目以待！