本篇文章给大家带来了关于ui组件的相关知识,其中主要跟大家聊聊怎么从零开始搭建一套ui组件库,有代码示例,感兴趣的朋友下面一起来看一下吧,希望对大家有帮助。
我们在编写我们组件库的组件前,首先需要一套环境,包括下面几项:
我们目前的项目是基于vue2的版本,所以本次组件库项目也将使用 2.0版本的vue cli来创建。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
安装过程相关选项如下:
我们默认安装jest做为我们组件库的单元测试框架,代码检查工具默认eslint
创建项目成功后,现在我们新项目的目录结构应该是这样的:
我们需要对现有目录做一些调整,首先我们接触过一些主流的ui组件库比如 vant/ant,我们知道在这些组件库的官网上都提供了很直观的示例页面,此时我们的组件库将src目录改名为examples,作为我们的官方示例目录。
另外我们新增一个packages目录用户存放我们的组件。
现在我们目录结构变成如下:
此时如果重新运行项目会发现报错,因为我们src目录名变了,而webpack配置中默认的入口文件还是src/main.js,我们需要更改下配置,在build/webpack.base.conf文件中将src替换成examples。同时,我们需要将新增的 packages目录加入到webpack的编译队列。
更改后的 webpack.base.conf 应该是这样的。
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 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 |
|
重新运行,编译通过。
在搭建完基础的代码环境后,我们要考虑我们新增组件的组件文档如何编写。
我们推荐使用 markdown来编写组件文档,然后我们如何在vue中使用markdown来编写我们的组件文档呢?这里我们推荐一个好用的工具。
1 2 3 4 5 6 7 8 9 10 11 |
|
我们在对webpack.base.conf作如下修改:
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 |
|
在我们配置完工具后,我们开始测试下组件文档的编写,
首先,我们在examples目录下新增一个docs文件夹,用于存放我们的组件文档。
新建一个test.md
1 |
|
接下来我们在router文件夹新增一个 docs.js路由文件,用来存放我们组件文档的路径,并将它引入到根路由文件中。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
浏览器中运行,我们便可以看到我们组件库的第一个组件文档...
以上完成,我们组件库的环境基本搭建完成了,接下来我们尝试开始写一个新的组件。
我们先从一个基础的button组件开始。
首先我们在之前创建的packages中新增如下结构:
这里我在src/index.vue中简单实现了一个button组件,支持三种大小的按钮,
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 |
|
然后我们要怎么用这个组件呢?
考虑的是组件库,所以我们需要让我们的组件支持全局引入和按需引入,如果全局引入,那么所有的组件需要要注册到Vue component 上,并导出:
我们需要在组件的入口文件index.js添加如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
然后我们在packages目录下新增入口文件,统一处理导出所有组件:
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 |
|
按需引入:
1 2 3 4 5 |
|
全部引入:
1 2 3 4 5 |
|
我们在examples目录的入口文件中全局引入了组件库
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 |
|
然后我们编写一个vue页面来看看是否引入成功。
首先examples中新增pages目录,存放我们以后为每个组件单独编写的示例页面,新增examples/pages/buttonExample/index.vue 页面
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 |
|
在这里我们直接调用了三种尺寸的button,运行看下效果:
效果完美,代表我们组件库第一个组件以及整体流程打通!
之前的环节,我们成功实现了我们组件库的第一个组件,但考虑到这只是组件库,组件库内能调用肯定是不够的,类似 vant/ant 这些组件库,我们怎么让其他用户可以使用我们的组件库组件内?
我们可以考虑发布到npm上,后续项目需要的话,我们直接通过npm安装引入的方式来调用。
发布到npm的方法也很简单, 首先我们需要先注册去npm官网注册一个账号, 然后控制台登录即可,最后我们执行npm publish即可.具体流程如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
以上是手把手教你从零开始搭建一套ui组件库的详细内容。更多信息请关注PHP中文网其他相关文章!