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

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

工程定位:
本套工程, 定位在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技术博客, 这样就能保证时时刻刻模拟使用者, 还能把博客完善哈哈哈哈哈😏.

第四步
为了让工程调试更方面, 我们不得不使用一个神一般的命令, npm link, 这个命令可以把你开发的包存入本地的包管理文件夹, 相当于你 -g安装的包, 厉害的地方就是他可以实时的更新包, 让我们调试起来如丝般顺滑🍫,npm link的用法简述 我做到这里的时候遇到了错误, 具体什么样的报错我想不起来了, 大致意思是模式不对语法解析出错, 只需在 babel.config,js 文件里面加上下面的内容:

 module.exports = {
  presets: [
    '@vue/app'
  ],
  // 允许两种编码引入方式共存,也就是common规范与es6规范的共存处理
  sourceType: 'unambiguous'
}

多说一句, 如果切换了项目工程, 但是替换本地包的时候出错了, 不用去查各种删除包,更新包的命令, 直接去文件夹把它物理消灭就ok了, 还不会有残余数据引起bug.

最后
本篇文章主要是基本环境的搭建, 具体代码当时做的有点快也就没上传, 不好意思了😅,搭建环境的工程也是能学到很多有用的知识的, 如果你也想做一套自己的ui库,就先沉下心来把基础环境搞好, 当然我们也可以随时交流互相学习,现在刚刚做完三个基本的组件, 从中学到了大量的知识, 受益匪浅啊,每个版本的代码都会上传github与 npm 官网也会实时更新, 绝不半途而废😁,下一篇文章正式开始代码之旅~~滴滴学生卡.
github:具体地址
个人博客: 链接描述