如果想自己写一个组件库该怎么写呢，如何初始化项目，通过对element-UI组件库的分析，用package进行项目管理，项目组件在components里，play是运行文件入口。接下来一起来搭建环境和项目初始化

参考GitHub上源码地址：github.com/element-plu…

环境搭建

全局安装yarn，并查看是否安装成功

npm install -g yarn
yarn -v
复制代码

安装lerna多包管理工具，方便我们在一个项目中管理多个 npm 包,然后初始化

yarn global add lerna  或者  npm i lerna -g
lerna init
复制代码

找一个空文件夹执行 lerna init初始化项目后得到：

在lerna.json文件中添加如图代码，表示用yarn管理

创建组件

初始化：

yarn install
复制代码

目录结构：

创建button组件库

lerna create button
复制代码

这里面会有一个提示就是输入这个组件的名称，然后一直回车，最后输入yes，就可以自动在packages下创建文件button

在button文件里面有lib，可以自己手动改为src，将来的代码也就是在src里面写，由于我们用的是vue框架写，但是在src文件下自动生成的是button.js,我们只需要改为button.vue即可。

下创建文件index.ts，index.ts与button文件为同级目录，这个是每个组件的入口文件

解析安装ts,并且初始化

npm install typescript -D
npx ts c --init
复制代码

初始化后会生成一个tsconfig.json文件，文件配置

{
"compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "jsx": "preserve",
    "declaration": true,
    "sourceMap": true
  }
}