為什么要做物料庫？

我們寫過很多登錄頁面。而每個登錄頁面除了一些背景圖和顏色外，主體布局幾乎是一致的，就那么幾種類型。如果有個地方能幫我管理登錄頁面的代碼，那么下次我再寫登錄的時候就可以直接把界面生成好，調(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的用戶，使用可視化布局來制作物料會帶來諸多好處：

1. 實時的預覽，以保證物料的展示效果是滿足預期的
2. 可以很方便地修改布局和細節(jié)
3. 物料之間可以隨意搭配
4. 快速布局
   

下面我展示其中一個物料，你在可視化布局中這樣排列下面這些組件：

生成的代碼是這樣的；

    <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的工作機制。

fuep在線體驗

以上就是如何使用vue3打造一個物料庫的詳細內(nèi)容，更多關于vue 打造物料庫的資料請關注腳本之家其它相關文章！