摘要：各個(gè)大廠也相繼宣布開源。但是也會(huì)存在一些問(wèn)題，比如每個(gè)公司可能需要的業(yè)務(wù)組件不盡相同，或者我們想自己開發(fā)一套屬于自己的組件庫(kù)，來(lái)增強(qiáng)對(duì)組件的可控性。
前言：
前端組件化是當(dāng)今熱議的話題之一，也是我們?cè)陂_發(fā)單頁(yè)應(yīng)用經(jīng)常會(huì)碰到的一個(gè)問(wèn)題，現(xiàn)在我們有了功能非常完善的Element-UI。各個(gè)大廠也相繼宣布開源XXX-UI。但是也會(huì)存在一些問(wèn)題，比如每個(gè)公司可能需要的業(yè)務(wù)組件不盡相同，或者我們想自己開發(fā)一套屬于自己的組件庫(kù)，來(lái)增強(qiáng)對(duì)組件的可控性。那么我們?cè)撊绾稳プ瞿兀?br>這里記錄一下我從零開始搭建起來(lái)的組件庫(kù)的過(guò)程，目前只有簡(jiǎn)單幾個(gè)組件，不過(guò)我也會(huì)慢慢更新維護(hù)：VV-UI
1. 環(huán)境準(zhǔn)備
我們搭建組件庫(kù)，需要準(zhǔn)備一系列環(huán)境，首先我們要考慮一下問(wèn)題：
腳手架如何搭建
如何規(guī)劃目錄結(jié)構(gòu)
如何編寫文檔
首先，對(duì)于腳手架環(huán)境的問(wèn)題，目前已經(jīng)有非常成熟的vue官方的腳手架，我們拿來(lái)用就好了
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev
接著我們看第二個(gè)問(wèn)題，如何規(guī)劃好我們組建的目錄結(jié)構(gòu)？首先我們需要有一個(gè)目錄存放組件，有一個(gè)目錄存放示例。所以我們要對(duì)vue-cli 生成的項(xiàng)目結(jié)構(gòu)做一下改造：
.
...
|-- examples // 原 src 目錄，改成 examples 用作示例展示
|-- packages // 新增 packages 用于編寫存放組件
...
.
這樣的話 我們需要再把我們webpack配置文件稍作一下調(diào)整，首先是把原先的編譯指向src的目錄改成examples，其次為了 npm run build 能正常編譯 packages 我們也需要為 babel-loader 再增加一個(gè)編譯目錄：
{
test: /.js$/,
loader: "babel-loader",
include: [resolve("examples"), resolve("test"), resolve("packages")]
}
這樣我們搭建起來(lái)一個(gè)簡(jiǎn)易的目錄結(jié)構(gòu)。
緊接著我們需要考慮如何編寫文檔。對(duì)于文檔的編寫，自然是markdown最合適不過(guò)了，那么怎么讓我們?cè)趘ue下可以去寫 markdown 文檔呢？答案當(dāng)然是 vue-markdown-loader。然后我們按照文檔配置了相關(guān)的插件信息：
rules: [
{
test: /.md$/,
loader: "vue-markdown-loader"
}
]
好了，我們可以開始嘗試寫文檔了，在 example/docs 目錄下新建 test.md。
# test
> Hello World
同時(shí)創(chuàng)建一個(gè)新的路由，指向我們的md文件：
{
path: "/test",
name: "test",
component: r => require.ensure([], () => r(require("../docs/test.md")))
}
打開我們的瀏覽器http://localhost:8080/#/test 哈哈 真的成功了。別高興的太早.... 問(wèn)題還在后面：我們期望的文檔不僅能編譯markdown，而且最好能識(shí)別demo代碼塊一方面做演示，一方面可以顯示演示代碼最好了，就像這樣：
那我們需要怎么做呢？vue-mark-down 功能肯定不止這些！于是我們繼續(xù)閱讀它的文檔，發(fā)現(xiàn)其實(shí)他就是封裝了 markdown-it，支持 options 選項(xiàng)。這樣我們就可以為我們的markdown定義獨(dú)特的標(biāo)識(shí)符，這里我用 demo 標(biāo)識(shí)需要顯示代碼塊的地方，所以我需要配置options 選項(xiàng) ：
const vueMarkdown = {
preprocess: (MarkdownIt, source) => {
MarkdownIt.renderer.rules.table_open = function () {
return ""
}
MarkdownIt.renderer.rules.fence = utils.wrapCustomClass(MarkdownIt.renderer.rules.fence)
return source
},
use: [
[MarkdownItContainer, "demo", {
// 用于校驗(yàn)包含demo的代碼塊
validate: params => params.trim().match(/^demos*(.*)$/),
render: function(tokens, idx) {
var m = tokens[idx].info.trim().match(/^demos*(.*)$/);
if (tokens[idx].nesting === 1) {
var desc = tokens[idx + 2].content;
// 編譯成html
const html = utils.convertHtml(striptags(tokens[idx + 1].content, "script"))
// 移除描述，防止被添加到代碼塊
tokens[idx + 2].children = [];
return `
${html}
`;
}
return "
";
}
}]
]
}
這里簡(jiǎn)單的描述一下這段代碼是干什么的：首先把內(nèi)容里面vue片段編譯成html，用于顯示，另一方面用highlight來(lái)高亮代碼塊。demo-block本身是我們定義好的組件：
{{isExpand ? "隱藏代碼" : "顯示代碼"}}
這樣，我們的 test.md 便可以這么去寫了：
2. 如何編寫組件
環(huán)境準(zhǔn)備完畢，緊接著要開始編寫組件，考慮的是組件庫(kù)，所以我們竟可能讓我們的組件支持全局引入和按需引入，如果全局引入，那么所有的組件需要要注冊(cè)到Vue component 上，并導(dǎo)出：
const install = function(Vue) {
if (install.installed) return;
components.map(component => Vue.component(component.name, component));
};
export default {
install
};
接著要實(shí)現(xiàn)按需加載，我們只需要單個(gè)導(dǎo)出組件即可：
import Button from "./button/index.js";
import Row from "./row/index"
import Col from "./col/index"
const components = [
Button,
Row,
Col
];
const install = function(Vue) {
if (install.installed) return;
components.map(component => Vue.component(component.name, component));
};
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
}
export default {
install,
Button,
Row,
Col
};
其次，我們還需要考慮一個(gè)問(wèn)題：既然是單頁(yè)面應(yīng)用，必然要去解決樣式?jīng)_突問(wèn)題，如果組件內(nèi)使用soped，那么樣式就無(wú)法從組件內(nèi)抽離出來(lái)，達(dá)不到可定制化主題顏色的目的。我們需要一套可以分離處理的樣式，可以自行編譯，可以相互不污染。這時(shí)候css 的BEM規(guī)范就顯得尤為重要。如果你還不知道什么是BEM 參考： http://www.w3cplus.com/css/css-architecture-1.html。
說(shuō)到這里，目前對(duì)BEM規(guī)范支持較好的插件就是postcss了，他允許我們配置BEM之間的連接符和縮寫：
{
"browsers": ["ie > 8", "last 2 versions"],
"features": {
"bem": {
"shortcuts": {
"component": "b",
"modifier": "m",
"descendent": "e"
},
"separators": {
"descendent": "__",
"modifier": "--"
}
}
}
}
這樣我們就可以把樣式多帶帶的抽離出來(lái)，通過(guò)gulp進(jìn)行打包編譯：
gulp.task("compile", function() {
return gulp.src("./src/*.css")
.pipe(postcss([salad]))
.pipe(cssmin())
.pipe(gulp.dest("./lib"));
});
最后生成我們的樣式代碼。
好了開始我們的測(cè)試：
import VVUI from "../packages/index"
import "../packages/theme-default/lib/index.css"
Vue.use(VVUI)
一切顯得那么美好....
優(yōu)化與不足
組件導(dǎo)出代碼暫不支持自動(dòng)化生成：比如我們的組件index文件，每次添加組件都需要不斷地改寫，我們2*
可以嘗試進(jìn)行webpack配置，npm run dev 的時(shí)候自動(dòng)進(jìn)行組件檢測(cè)，然后幫我們寫好導(dǎo)出代碼。
目錄結(jié)構(gòu)劃分缺陷：目前所有內(nèi)容僅支持中文，如果想要做到支持國(guó)際化，那么還需要重新調(diào)整目錄結(jié)構(gòu)。
發(fā)布tag： 需要編寫腳本支持tag發(fā)布
組件太少：文檔剛寫，組件還不是很多，慢慢去維護(hù)，相信會(huì)越來(lái)越多的組件，做業(yè)務(wù)的過(guò)程中也可以把常用的組件加進(jìn)去，這樣更加方便自己以后的維護(hù)和學(xué)習(xí)
結(jié)語(yǔ)：
項(xiàng)目github地址：github
項(xiàng)目演示地址： 演示
歡迎 PR 一起維護(hù)，歡迎 Star
關(guān)于
作者：monkeyWang
本人主頁(yè)：monkeyWang
微信公眾號(hào)：會(huì)不定期推送前端技術(shù)文章，歡迎關(guān)注
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51509.html
-
摘要：各個(gè)大廠也相繼宣布開源。但是也會(huì)存在一些問(wèn)題，比如每個(gè)公司可能需要的業(yè)務(wù)組件不盡相同，或者我們想自己開發(fā)一套屬于自己的組件庫(kù)，來(lái)增強(qiáng)對(duì)組件的可控性。
前言：
前端組件化是當(dāng)今熱議的話題之一，也是我們?cè)陂_發(fā)單頁(yè)應(yīng)用經(jīng)常會(huì)碰到的一個(gè)問(wèn)題，現(xiàn)在我們有了功能非常完善的Element-UI。各個(gè)大廠也相繼宣布開源XXX-UI。但是也會(huì)存在一些問(wèn)題，比如每個(gè)公司可能需要的業(yè)務(wù)組件不盡相同，或者我們...
-
github 地址： VV-UI/VV-UI
演示地址: vv-ui
文檔地址：skeleton
關(guān)于骨架屏介紹
骨架屏的作用主要是在網(wǎng)絡(luò)請(qǐng)求較慢時(shí)，提供基礎(chǔ)占位，當(dāng)數(shù)據(jù)加載完成，恢復(fù)數(shù)據(jù)展示。這樣給用戶一種很自然的過(guò)渡，不會(huì)造成頁(yè)面長(zhǎng)時(shí)間白屏或者閃爍等情況。 常見的骨架屏實(shí)現(xiàn)方案有ssr服務(wù)端渲染和prerender兩種解決方案。這里主要通過(guò)代碼為大家展示如何一步步做出這樣一個(gè)骨架屏：
show...
DevTTL
評(píng)論0
收藏0
-
github 地址： VV-UI/VV-UI
演示地址: vv-ui
文檔地址：skeleton
關(guān)于骨架屏介紹
骨架屏的作用主要是在網(wǎng)絡(luò)請(qǐng)求較慢時(shí)，提供基礎(chǔ)占位，當(dāng)數(shù)據(jù)加載完成，恢復(fù)數(shù)據(jù)展示。這樣給用戶一種很自然的過(guò)渡，不會(huì)造成頁(yè)面長(zhǎng)時(shí)間白屏或者閃爍等情況。 常見的骨架屏實(shí)現(xiàn)方案有ssr服務(wù)端渲染和prerender兩種解決方案。這里主要通過(guò)代碼為大家展示如何一步步做出這樣一個(gè)骨架屏：
show...
you_De
評(píng)論0
收藏0
-
github 地址： VV-UI/VV-UI
演示地址: vv-ui
文檔地址：skeleton
關(guān)于骨架屏介紹
骨架屏的作用主要是在網(wǎng)絡(luò)請(qǐng)求較慢時(shí)，提供基礎(chǔ)占位，當(dāng)數(shù)據(jù)加載完成，恢復(fù)數(shù)據(jù)展示。這樣給用戶一種很自然的過(guò)渡，不會(huì)造成頁(yè)面長(zhǎng)時(shí)間白屏或者閃爍等情況。 常見的骨架屏實(shí)現(xiàn)方案有ssr服務(wù)端渲染和prerender兩種解決方案。這里主要通過(guò)代碼為大家展示如何一步步做出這樣一個(gè)骨架屏：
show...
233jl
評(píng)論0
收藏0
-
摘要：第一集從零開始實(shí)現(xiàn)環(huán)境的搭建工程定位本套工程定位在端針對(duì)的組件庫(kù)名字的由來(lái)是我從年養(yǎng)到現(xiàn)在的一直大金毛是我的吉祥物原因本人上一份工作參與了大型的保險(xiǎn)公司后臺(tái)管理系統(tǒng)的搭建對(duì)的端框架有過(guò)一定的了解感受到了他們真的很強(qiáng)大同時(shí)也存在少許的不足其實(shí)
第一集: 從零開始實(shí)現(xiàn)(環(huán)境的搭建)
工程定位: 本套工程, 定位在pc端針對(duì)vue的ui組件庫(kù)
名字的由來(lái) cc是我從2015年養(yǎng)到現(xiàn)在的...
Ashin
評(píng)論0
收藏0
男|高級(jí)講師
-
閱讀 2421·2021-10-14 09:43
-
閱讀 2451·2021-09-09 09:34
-
閱讀 1611·2019-08-30 12:57
-
閱讀 1212·2019-08-29 14:16
-
閱讀 732·2019-08-26 12:13
-
閱讀 3210·2019-08-26 11:45
-
閱讀 2296·2019-08-23 16:18
-
閱讀 2674·2019-08-23 15:27
