如何使用vue3打造一個物料庫
為什么要做物料庫?
我們寫過很多登錄頁面。而每個登錄頁面除了一些背景圖和顏色外,主體布局幾乎是一致的,就那么幾種類型。如果有個地方能幫我管理登錄頁面的代碼,那么下次我再寫登錄的時候就可以直接把界面生成好,調(diào)邏輯就可以了。
你也許會創(chuàng)建一個login.txt來存放你的登錄頁,可隨著你想保存的代碼片段越來越多,你已經(jīng)很難根據(jù)文件的名稱來知道這個代碼片段具體的展現(xiàn)形式,這就引出了我們要討論的話題,如何通過構(gòu)建物料庫來管理可重復使用的代碼片段。
物料是什么?
物料是可復用的代碼片段
說到復用你也許會問,為什么不叫組件呢?因為,物料跟組件有本質(zhì)的區(qū)別,物料只是一串代碼,并不存在props,event,slot這些屬性。
物料可以由粒度的不同劃分為:
- 組件級物料
- 區(qū)塊級物料
- 頁面級物料
物料的類別
以一個按鈕為例。例如UI庫的按鈕圓角是6px,設計師要求的按鈕沒有圓角。我們可以完成這樣一個代碼片段:
<!-- 組件級物料 --> <el-button style="border-radius:0"></el-button>
將這個代碼片段保存成一個組件級的物料,要使用沒有圓角的按鈕時就可以快速地得到這個代碼片段。
你也許會疑惑,不就加了個屬性嗎,為什么還要制作成一個物料,我直接寫就好了。這個例子,我希望用最簡單的方式告訴你什么是組件級物料,如果只是修改一個圓角你當然不需要保存成一個物料。
一般在開發(fā)中后臺管理系統(tǒng)時,大部分的列表,表格會隨著分頁一起出現(xiàn)。我們將一個表格和分頁組合起來的代碼片段稱為區(qū)塊級物料,例如:
<!-- 區(qū)塊級物料 --> <el-table /> <el-pagination />
同樣的,不同項目中如果你的登錄,注冊頁面風格相同,你也可以將一整個頁面作為一個頁面級的物料,例如:
<!-- 頁面級物料 --> <el-input placeholder="請輸入用戶名"></el-input> <el-input placeholder="請輸入密碼"></el-input> <el-button>登錄</el-button> <a href="#" rel="external nofollow" >忘記密碼?</a>
fuep,基于vue3的物料庫
fuep,是一個幫助你管理代碼片段的工具,文末有在線體驗地址。
如果你使用過飛冰,你就會發(fā)現(xiàn)關于物料的概念幾乎與飛冰一致,與飛冰不同的是,fuep中的物料載體并不是一個文件,而是可視化布局工具。用可視化布局工具作為物料的載體有一些弊端: 侵入性,它與vue和具體的ui庫綁定。 現(xiàn)在,你只能制作基于 element plus 和 vant3 的物料庫。但是,如果你是element plus和vant的用戶,使用可視化布局來制作物料會帶來諸多好處:
- 實時的預覽,以保證物料的展示效果是滿足預期的
- 可以很方便地修改布局和細節(jié)
- 物料之間可以隨意搭配
- 快速布局
下面我展示其中一個物料,你在可視化布局中這樣排列下面這些組件:

生成的代碼是這樣的;
<el-row type="flex" justify="start" align="middle">
<el-col :span="12">
<h3 class="mb-4 px-4 text-cool-gray-800 text-4xl">Free up engineer productivity</h3>
<p class="px-4 text-base text-gray-500 text-justify">Fuep focuses on improving the efficiency of engineers, using visual layout to quickly generate highly maintainable code. Compared with traditional visualization tools, it does not require row and col to be nested in each other.</p>
<el-row type="flex" justify="start" align="middle">
<el-button type="primary" class="ml-4 mt-4 px-8">Live Demo</el-button>
<el-button class="ml-4 mt-4 px-8">Get Started</el-button>
</el-row>
</el-col>
<el-col :span="12">
<el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="cover" class="" fit="scale-down"></el-image>
</el-col>
</el-row>
通過代碼渲染出來的界面是這樣的:

你可以在這個物料的基礎上,做一些布局或者細節(jié)的修改來保存成一個新的,屬于你的物料。
如果你不知道如何開始,可以點擊左下角的指引或者介紹來了解fuep的工作機制。
以上就是如何使用vue3打造一個物料庫的詳細內(nèi)容,更多關于vue 打造物料庫的資料請關注腳本之家其它相關文章!
相關文章
Vue3使用vant檢索組件van-search遇到的問題小結(jié)
當清空按鈕與檢索按鈕同時居右時,點擊clear清空按鈕事件時會同時觸發(fā)click-right-icon事件,這個時候容易觸發(fā)一系列問題,小編小編給大家分享Vue3使用vant檢索組件van-search遇到的問題小結(jié),感興趣的朋友一起看看吧2024-02-02
vue 實現(xiàn)通過vuex 存儲值 在不同界面使用
今天小編就為大家分享一篇vue 實現(xiàn)通過vuex 存儲值 在不同界面使用,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
如何用vue2+element-ui實現(xiàn)多行行內(nèi)表格編輯
最近開發(fā)項目,關于表格的數(shù)據(jù)操作比較多,這個地方個人覺得比較難搞,特此記錄一下,這篇文章主要給大家介紹了關于如何用vue2+element-ui實現(xiàn)多行行內(nèi)表格編輯的相關資料,需要的朋友可以參考下2024-08-08
Vue3的provide和inject實現(xiàn)多級傳遞的原理解析
Vue3中的provide和inject函數(shù)通過原型鏈實現(xiàn)數(shù)據(jù)的多級傳遞,父組件使用provide注入數(shù)據(jù),子組件和后代組件通過inject獲取這些數(shù)據(jù),在創(chuàng)建組件實例時,子組件會繼承父組件的provides屬性對象,介紹Vue3的provide和inject實現(xiàn)多級傳遞的原理,需要的朋友可以參考下2024-12-12
解決vue.js 數(shù)據(jù)渲染成功仍報錯的問題
今天小編就為大家分享一篇解決vue.js 數(shù)據(jù)渲染成功仍報錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08

