从零开始搭建自己的vue组件库——01创建_vue组件库搭建原理

引言

因工作需要，要打造一套属于自己团队的组件库，本人也是第一次接到这种任务，虽然不着急，但是之前从来没做过，因此特意再此记录下过程，也希望自己能坚持下去，当然，过程中少不了查阅各种资料，也会再次记录下各种各样的问题，本组件库的开发基于vue2.0，主要用于pc端，会参考element-ui进行开发
处于一定需要，库的实际名称不会再后续文章中展示出来

历史导航

后一篇：从零开始搭建自己的vue组件库——02测试发布

项目创建

首先第一步是要创建一个vue工程
vue create xxxx
创建具体流程在这里不再详细说明，创建完目录如下

修改目录结构

新增一个文件夹packages，将src文件夹改名examples，增加两个文件：.npmignore和vue.config.js

结构是仿的element-ui，packages文件夹会存放写好的各个组件，examples可以作为写组件库过程中的测试工程，如果想的话，也可以在这里写一个例子项目，打包部署以便其他人使用

.npmignore文件是在上传组件库到npm时的忽略文件，被忽略的文件不会上传到npm，内容如下

examples/
packages/
public/
vue.config.js
jest.config.js
babel.config.js
*.map
1
2
3
4
5
6
7

vue.config.js是vue配置文件，内容如下，和传统项目用到的稍稍不同，只需将pages的index只想examles/main.js，并且wepack配置里使用babel解析packages即可，代码如下

const path = require("path")

function resolve(dir) {
   
    return path.join(__dirname, ".."
1
2
3
4