DIY Vue UI组件库之路


写vue的项目多了,感觉越来越需要自己从头开始写一个UI组件库来系统地升华自己的能力

技术栈

  • vue
  • vuex
  • vueRouter
  • less

过程

首先使用vue-cli3.x来构建项目,因为是特别正式的项目,不是平时的业务开发,所以加入了单测和eslinit

测试了下npm发布包的功能

首先在npm官网注册账号,然后在本地项目文件夹下npm login,然后npm publish --access public

注意npm的淘宝源是不行的,最好是使用nrm来管理npm源。常用操作nrm lsnrm use ***

新建examples文件夹

做组件库跟业务开发不一样,它主要的文件全部用来放库,展示页面应该另起一个文件夹,在根目录下新建examples文件夹,并且加入main.js,app.vue,index.html

之前习惯的事用vuecli2.x,但是毕竟3.x才是潮流,这次还是用了3.x

package.json里配置serve的属性, 将原来的serve改为"serve": "vue-cli-service serve --open ./examples/main.js",,这样就指定了新的入口文件,测试一下,ok

文档的编写

直接采用docsify

配置挺复杂的,折腾了一天