使用Vite和TypeScript带你从零打造一个属于自己的Vue3组件库

• 如何使用pnpm搭建出一个Monorepo环境
• 如何使用vite搭建一个基本的Vue3脚手架项目
• 如何开发调试一个自己的UI组件库
• 如何使用vite,gulp打包并发布自己的UI组件库

本文将使用Vue3和TypeScript来编写一个组件库，使用Vite+Vue3来对这个组件库中的组件进行调试，最后使用vite来对组件库进行打包并且发布到npm上

新建配置文件 .npmrc

shamefully-hoist = true

这里简单说下为什么要配置shamefully-hoist。 如果某些工具仅在根目录的node_modules时才有效，可以将其设置为true来提升那些不在根目录的node_modules，就是将你安装的依赖包的依赖包的依赖包的...都放到同一级别（扁平化）。说白了就是不设置为true有些包就有可能会出问题。

直接使用

git clone https://gitee.com/lcyh/lc-peace-ui.git

安装pnpm

npm i pnpm -g

初始化package.json

pnpm init

安装esno

npm i esno -g

安装项目所有依赖

pnpm install

打包组件库

pnpm run build

发布组件库

发布前记得到components/transitpkg/package.json下改个包名(不然肯定会重名，因为我已经发布过了)
pnpm run publish

注意

• sucras 让我们执行gulp可以使用最新es6+语法并且支持ts

// gulp支持ts和es6
pnpm i gulp @types/gulp sucrase -D -w