快捷導(dǎo)航

如何使用vue3打造一個(gè)物料庫(kù)

更新時(shí)間：2021年05月08日 14:52:03 作者：Mr火葉

這篇文章主要介紹了如何使用vue3打造一個(gè)物料庫(kù)，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下

為什么要做物料庫(kù)？

我們寫過(guò)很多登錄頁(yè)面。而每個(gè)登錄頁(yè)面除了一些背景圖和顏色外，主體布局幾乎是一致的，就那么幾種類型。如果有個(gè)地方能幫我管理登錄頁(yè)面的代碼，那么下次我再寫登錄的時(shí)候就可以直接把界面生成好，調(diào)邏輯就可以了。

你也許會(huì)創(chuàng)建一個(gè)login.txt來(lái)存放你的登錄頁(yè)，可隨著你想保存的代碼片段越來(lái)越多，你已經(jīng)很難根據(jù)文件的名稱來(lái)知道這個(gè)代碼片段具體的展現(xiàn)形式，這就引出了我們要討論的話題，如何通過(guò)構(gòu)建物料庫(kù)來(lái)管理可重復(fù)使用的代碼片段。

物料是什么？

物料是可復(fù)用的代碼片段

說(shuō)到復(fù)用你也許會(huì)問(wèn)，為什么不叫組件呢？因?yàn)?，物料跟組件有本質(zhì)的區(qū)別，物料只是一串代碼，并不存在props，event，slot這些屬性。

物料可以由粒度的不同劃分為：

組件級(jí)物料
區(qū)塊級(jí)物料
頁(yè)面級(jí)物料

物料的類別

以一個(gè)按鈕為例。例如UI庫(kù)的按鈕圓角是6px，設(shè)計(jì)師要求的按鈕沒(méi)有圓角。我們可以完成這樣一個(gè)代碼片段:

<!-- 組件級(jí)物料 -->
<el-button style="border-radius:0"></el-button>

將這個(gè)代碼片段保存成一個(gè)組件級(jí)的物料，要使用沒(méi)有圓角的按鈕時(shí)就可以快速地得到這個(gè)代碼片段。

你也許會(huì)疑惑，不就加了個(gè)屬性嗎，為什么還要制作成一個(gè)物料，我直接寫就好了。這個(gè)例子，我希望用最簡(jiǎn)單的方式告訴你什么是組件級(jí)物料，如果只是修改一個(gè)圓角你當(dāng)然不需要保存成一個(gè)物料。

一般在開發(fā)中后臺(tái)管理系統(tǒng)時(shí)，大部分的列表，表格會(huì)隨著分頁(yè)一起出現(xiàn)。我們將一個(gè)表格和分頁(yè)組合起來(lái)的代碼片段稱為區(qū)塊級(jí)物料，例如：

<!-- 區(qū)塊級(jí)物料 -->
<el-table />
<el-pagination  />

同樣的，不同項(xiàng)目中如果你的登錄，注冊(cè)頁(yè)面風(fēng)格相同，你也可以將一整個(gè)頁(yè)面作為一個(gè)頁(yè)面級(jí)的物料,例如：

<!-- 頁(yè)面級(jí)物料 -->
<el-input  placeholder="請(qǐng)輸入用戶名"></el-input>
<el-input  placeholder="請(qǐng)輸入密碼"></el-input>
<el-button>登錄</el-button>
<a href="#" rel="external nofollow"  >忘記密碼?</a>

fuep，基于vue3的物料庫(kù)

fuep，是一個(gè)幫助你管理代碼片段的工具，文末有在線體驗(yàn)地址。

如果你使用過(guò)飛冰，你就會(huì)發(fā)現(xiàn)關(guān)于物料的概念幾乎與飛冰一致，與飛冰不同的是，fuep中的物料載體并不是一個(gè)文件，而是可視化布局工具。用可視化布局工具作為物料的載體有一些弊端：侵入性，它與vue和具體的ui庫(kù)綁定。現(xiàn)在，你只能制作基于 element plus 和 vant3 的物料庫(kù)。但是，如果你是element plus和vant的用戶，使用可視化布局來(lái)制作物料會(huì)帶來(lái)諸多好處：

實(shí)時(shí)的預(yù)覽，以保證物料的展示效果是滿足預(yù)期的
可以很方便地修改布局和細(xì)節(jié)
物料之間可以隨意搭配
快速布局

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

生成的代碼是這樣的；

    <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>

通過(guò)代碼渲染出來(lái)的界面是這樣的：