**
網上看到了這篇文章 非常的棒哈
**
前言
隨着前端的三大框架的出現,組件化的思想越來越流行,出現許多組件庫.它能夠幫助開發者節省時間提高效率,
如React的Ant-design,Vue的iView,Element等,它們的功能已經很完善了.
我寫這遍文章的目的:記錄自己搭建UI庫的過程(對Vue的理解加深了好多)演示地址
首先講一下思路:
平常寫組件時,寫一個組件要用時直接導入就行了,如你寫了一個time.vue,用的時候
1.環境準備
前面說要把所有的組件放在一個文件夾裏,最簡單就是用腳手架搭一個項目目錄結構,
同時還需要添加示例文檔----方便調試和展示:
按鈕的示例效果
在這裏插入圖片描述
1.目錄結構
直接用vue-cli建立項目結構, 在基礎上修改一下就行了(以滿足我們示例的展示)
目錄結構
├── build -------------------------webpack相關配置文件
│ ├── build.js
│ ├── check-versions.js
│ ├── logo.png
│ ├── strip-tags.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js -------配置markdown設置時會用到它
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config ------------------------vue的基本配置
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── examples -----------------------放置例子
│ ├── App.vue --------------------根文件
│ ├── assets ---------------------靜態資源
│ │ ├── css --------------------css
│ │ ├── img --------------------圖片
│ │ └── logo.png ---------------vue的logo
│ ├── components -----------------公共組件
│ │ ├── demo-block.vue ---------盒子組件
│ │ ├── footer.vue -------------footer組件
│ │ ├── header.vue -------------header組件
│ │ └── side-nav.vue -----------側邊欄組件
│ ├── docs -----------------------例子模塊的文檔
│ │ ├── breadcrumb.md ----------麪包屑組件文檔
│ │ ├── button.md --------------按鈕組件文檔
│ │ ├── card.md ----------------卡片組件文檔
│ │ ├── guide.md ---------------簡介文檔
│ │ ├── icon.md ----------------圖標文檔
│ │ ├── install.md -------------安裝文檔
│ │ ├── layout.md --------------佈局文檔
│ │ ├── logs.md ----------------更新日誌文檔
│ │ ├── message.md -------------消息文檔
│ │ ├── start.md ---------------快速開始1文檔
│ │ ├── tag.md -----------------標籤文檔
│ │ └── twotable.md ------------二維表格文檔
│ ├── icon.json ------------------圖標數據
│ ├── main.js --------------------入口文件
│ ├── nav.config.json ------------側邊欄數據
│ └── router ---------------------路由
│ └── index.js ---------------路由配置
├── packages -----------------------組件庫源代碼
│ ├── README.md ------------------README
│ ├── breadcrumb -----------------麪包屑源碼
│ │ ├── index.js
│ │ └── src
│ ├── breadcrumb-item ------------麪包屑源碼
│ │ └── index.js
│ ├── button ---------------------按鈕源碼
│ │ ├── index.js
│ │ └── src
│ ├── card -----------------------卡片源碼
│ │ ├── index.js
│ │ └── src
│ ├── col ------------------------列布局源碼
│ │ ├── index.js
│ │ └── src
│ ├── message --------------------消息源碼
│ │ ├── index.js
│ │ └── src
│ ├── two-dimensional-table -----二維表格源碼
│ │ ├── index.js
│ │ └── src
│ ├── row -----------------------行源碼
│ │ ├── index.js
│ │ └── src
│ ├── tag -----------------------標籤源碼
│ │ ├── index.js
│ │ └── src
│ ├── theme-default --------------樣式表
│ │ └── lib
│ ├── package.json
│ └── index.js -------------------組件庫入口
├── index.html ---------------------主頁
├── package.json
├── static
└── README.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
以上是已經修改過的目錄結構,將腳手架生成的src目錄改爲examples用來放示例文檔,所以相應的你要修改build目錄下的webpack.base.conf.js ,讓它指向examples,webpack才能正確進行打包
示例文檔,編寫文檔使用markdown最適合了,要讓vue能夠實現markdown文檔可以用vue-markdown-loader,配置相關文件在webpack.base.conf.js 的rules裏添加
就可以開始寫文檔,測試一下
npm run dev 跑項目打開http://localhost:8080/#/hello, 可以顯示,初步成功(基本實現)
接下來就要實現示例文檔的效果: 既能演示又有代碼展示(如下圖)
如上圖的示例文檔是button.md , 要讓它在button.md一個文件裏想顯示代碼的地方顯示代碼,想顯示按鈕的地方顯示按鈕,所以就要在顯示按鈕的地方打上一個標識符,
讓編譯過程中能夠識別,安裝.vue的方式編譯展示還是要用到markdown的配置,它其實封裝了markdown-it,支持options選項,只要加上定義的標識符(我用的是’demo’),options 選項的配置(也在webpack.base.conf.js 裏)
2.如何編寫組件源碼
其實沒有想象中那麼難,就像平常寫組件那樣,只不過要按照一定結構編寫(具體的可以去看我的github),一般的UI組件庫都支持全局引入和單個組件引入,
全局引入:
遍歷你寫的組件,通過Vue.component註冊到Vue上,構成一個install函數,暴露install,當你的別的項目要用時只要安裝一下包,用Vue.use()使用(像別的插件一樣)
單個文件引入:
類似的只要暴露出組件就OK了
別人要能夠通過npm安裝包用我們的包,我們是不是要在包裏寫所以組件和樣式,別人只要npm安裝包和引入一個全部組件的樣式兩步驟就可以使用了
- npm發佈你的UI框架
你要擁有一個npm賬號(沒有的直接去官網註冊一個)
打開終端登錄npm
3.發佈包
我們只有發佈packages這個文件夾就行,寫好packages文件夾下個的package.json
使用npm publish發佈就OK了,別人就可以用npm install jk-ui --save愉快的玩耍了
轉載：