第一集: 从零开始实现一套pc端vue的ui组件库(环境的搭建)

Ashin 发布于2019-08-23 16:48 / 2485人阅读

摘要：第一集从零开始实现环境的搭建工程定位本套工程定位在端针对的组件库名字的由来是我从年养到现在的一直大金毛是我的吉祥物原因本人上一份工作参与了大型的保险公司后台管理系统的搭建对的端框架有过一定的了解感受到了他们真的很强大同时也存在少许的不足其实

第一集: 从零开始实现(环境的搭建)

工程定位:
本套工程, 定位在pc端针对vue的ui组件库

名字的由来
cc是我从2015年养到现在的一直大金毛, 是我的吉祥物!

原因:
本人上一份工作参与了大型的保险公司后台管理系统的搭建, 对vue的pc端ui框架有过一定的了解, 感受到了他们真的很强大同时也存在少许的不足, 其实从3月份开始就想写一套自己的ui框架, 但是无奈赶上996工作制与项目上线还有其他的事情干扰, 拖到现在才正式开始这个工程, 本工程大部分是受到了element-ui的启发, 通过阅读element的源码使我受益匪浅!

目的:
通过编写本套组件, 不断的细化自己的知识体系, 扫除知识盲区, 建立良好的面向接口的思想(也就是一切为使用者着想), 与此同时想要认识更多的朋友, 大家一起学习一起进步, 一起实现梦想!

第一步:
搭建vue的工程这个环节也没什么好说的, 需要提的几点是:

1.我采用的css预处理器为sass.

2.项目中没有使用路由功能.

3.测试选用的是vue官方推荐的jest测试运行器

4.本工程采用模板与样式分离的形式

① src/style-----------样式
② src/components------具体的组件
③ src/assets----------公共的js文件
③ test----------------测试

第二步
现在有了一个干净的工程, 我们的目的是把这个工程打包成组件, 这个过程当然与我们平时打包工程的过程有所不同了, 我也是看了几篇相关的文章才明白它的套路, 总感觉官方说的不详细, 推荐一篇文章讲的很好创建自己的vue-ui组件库

第三步
如果你已经看了第二步推荐的文章, 相信你很快就能搭建一个最最简易的组件开发环境了, 我这里介绍一下umd文件, vue 的lib 模式组件的开发, 打包出的umd文件是一套兼容文件, 它会检测当前环境的模式是什么, 然后进行相应的导出, 比如 node规范与es6规范, 所以这个umd是将各种规范转换成统一的规范的模式. 这个第三步我是又建立了一套工程, 用于引用当前工程, 其实就是我的技术博客的官网lulu技术博客, 这样就能保证时时刻刻模拟使用者, 还能把博客完善哈哈哈哈哈

服务器托管超融合服务器从零开始的邮件服务器从零开始搭建前端数据监控系统从零开始搭建腾讯云服务器第一集

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103316.html

第一集: 从零开始实现一套pc端vue的ui组件库(环境的搭建)

摘要：第一集从零开始实现环境的搭建工程定位本套工程定位在端针对的组件库名字的由来是我从年养到现在的一直大金毛是我的吉祥物原因本人上一份工作参与了大型的保险公司后台管理系统的搭建对的端框架有过一定的了解感受到了他们真的很强大同时也存在少许的不足其实第一集: 从零开始实现(环境的搭建) 工程定位: 本套工程, 定位在pc端针对vue的ui组件库名字的由来 cc是我从2015年养到现在的...

UsherChen 2019-08-05 16:41 评论0 收藏0
第十一集: 从零开始实现一套pc端vue的ui组件库( tab切换组件 )

摘要：第十一集从零开始实现切换组件本集定位我们先来聊聊切换的意义不管是手机还是屏幕的大小是有限的人眼睛看到的范围也是有限的人们看信息的时候并不喜欢跳转这种操作或是我们要查某个知识点进入网站之后看了几眼没有需要的相关信息也就理所当然的退出去继续搜索第十一集: 从零开始实现( tab切换组件 ) 本集定位: 我们先来聊聊 tab 切换的意义, 不管是手机还是pc, 屏幕的大小是有限的,...

VEIGHTZ 2019-08-26 10:43 评论0 收藏0
第三集: 从零开始实现一套pc端vue的ui组件库(button组件其一)

摘要：第三集从零开始实现组件本集定位为什么要叫那因为我感觉这个组件细节比较多应该会讲很多内容所以先把基础功能在这一集实现下集去做拓展组件这是一个基本上每个工程都会用到的组件传统的千篇一律的样式仿佛按钮不做的一样就没法用似的我偏要加一些别人没加过的第三集: 从零开始实现(button组件1) 本集定位: 为什么要叫1那, 因为我感觉这个组件细节比较多, 应该会讲很多内容, 所以先把基础功...

chnmagnus 2019-08-30 15:44 评论0 收藏0
第三集: 从零开始实现一套pc端vue的ui组件库(button组件其一)

摘要：第三集从零开始实现组件本集定位为什么要叫那因为我感觉这个组件细节比较多应该会讲很多内容所以先把基础功能在这一集实现下集去做拓展组件这是一个基本上每个工程都会用到的组件传统的千篇一律的样式仿佛按钮不做的一样就没法用似的我偏要加一些别人没加过的第三集: 从零开始实现(button组件1) 本集定位: 为什么要叫1那, 因为我感觉这个组件细节比较多, 应该会讲很多内容, 所以先把基础功...

yintaolaowanzi 2019-08-23 17:16 评论0 收藏0
第三集: 从零开始实现一套pc端vue的ui组件库(button组件其一)

摘要：第三集从零开始实现组件本集定位为什么要叫那因为我感觉这个组件细节比较多应该会讲很多内容所以先把基础功能在这一集实现下集去做拓展组件这是一个基本上每个工程都会用到的组件传统的千篇一律的样式仿佛按钮不做的一样就没法用似的我偏要加一些别人没加过的第三集: 从零开始实现(button组件1) 本集定位: 为什么要叫1那, 因为我感觉这个组件细节比较多, 应该会讲很多内容, 所以先把基础功...

andycall 2019-08-05 16:52 评论0 收藏0