第一集: 从零开始实现一套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:具体地址
我的博客: 连接描述