从零开始撸一个 Vue3 + Vite 组件库的全套流程

哎，兄弟，你想搞个自己的组件库对吧？

先说一句，别慌，我这儿有一套“边聊边写”的实战指南。

我们先把项目初始化，别管太多细节，先跑起来再说。

pnpm create vite@latest my-lib -- --template vue-ts

好啦，跑完这个命令后会生成一个Zui基础的 Vue3 + TypeScript 项目。

接下来我们把它改造成“库模式”。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
export default defineConfig({
  plugins: ,
  build: {
    lib: {
      entry: resolve,
      name: 'MyLib',
      fileName: format => `my-lib.${format}.js`,
    },
    rollupOptions: {
      external: ,
      output: {
        globals: { vue: 'Vue' },
      },
    },
  },
});

不对不对，这段代码里我忘了加 `defineConfig` 的导入，Yi经补上了。

把入口文件写在 src/index.ts，统一导出所有组件：

export { default as MyButton } from './components/Button/MyButton.vue';
export { default as MyModal } from './components/Modal/MyModal.vue';

先给你划一下常见的目录层次：

src/
├─ components/
│   ├─ Button/
│   │   ├─ MyButton.vue
│   │   └─ index.ts
│   └─ Modal/
│       ├─ MyModal.vue
│       └─ index.ts
├─ styles/
│   └─ variables.css
└─ index.ts

这么分，好管理，也方便以后加文档。

说到文档，咱们用 VitePress 把它们写出来——别忘了 SEO 要点，多写点 meta、标题层级清晰。

打开 MyButton.vue，先写模板：

脚本部分，用 `

样式直接 scoped 就好：

.my-btn {
  padding: .5em 1em;
  border-radius: .25rem;
}
.my-btn--primary { background:#409eff; color:#fff; }
.my-btn--danger { background:#f56c6c; color:#fff; }
.my-btn { opacity:.5; cursor:not-allowed; }

搞定！别忘了在 /components/Button/index.ts 再导出：

export { default } from './MyButton.vue';

工程化少不了这些玩意儿，先装 ESLint + Prettier：

pnpm add -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier

.eslintrc.cjs 大概长这样：

module.exports = {
  root: true,
  env: { node:true, es2021:true },
  extends: ,
  parserOptions:{ parser:'@typescript-eslint/parser' },
};

接着装 Vitest Zuo单元测试：

pnpm add -D vitest @vue/test-utils happy-dom

写个Zui基础的 Button 测试：

import { mount } from '@vue/test-utils';
import MyButton from '@/components/Button/MyButton.vue';
describe => {
  it => {
    const wrapper = mount;
    expect).toContain;
  });
  it => {
    const wrapper = mount;
    await wrapper.trigger;
    expect).toHaveProperty;
  });
});

CICD 那块儿，就用 GitHub Actions 写几个 workflow，别忘了在 commit 前跑 lint 和 test，用 Husky+Commitlint 保持提交信息统一。

# 确保 package.json 的字段完整：

{
  "name": "my-lib",
  "version": "0.1.0",
  "main": "dist/my-lib.cjs.js",
  "module": "dist/my-lib.esm.js",
  "types": "dist/index.d.ts",
  "files": ,
}

# 然后执行构建命令：

pnpm run build:lib

# 构建成功后就Ke以登录 npm 并发布啦。

pnpm login
pnpm publish --access public

SEO 小贴士
hen多小伙伴会问：我的组件库文档放 GitHub Pages 上，百度根本不收录，这是为啥？其实原因主要有三点。

缺少有效的 sitemap.xml 或 robots.txt 配置。 百度爬虫需要这俩文件指引才Neng发现页面。
Lighthouse 打分低、页面加载慢。 Ru果首屏渲染时间超过几秒，搜索引擎会打低分甚至直接放弃抓取。
Noindex 元标签误用了。 hen多 VitePress 默认会在开发环境里加 ``，部署时一定要关掉。

Sooo，把这些问题dou处理好后再去百度站长平台提交链接，就Nengkan到收录进度了。哈哈，说实话，这事儿也没那么神秘，只要按部就班来一般两三天就Neng上榜。你懂的~ 
NPM 发布后的维护技巧 
发布完别急着走开，要定期检查依赖安全性，用 `npm audit` 报告及时geng新。 
Docusaurus里加上 changelog，每次发新版本dou在 docs geng新，让使用者一眼kan到改动。 
Pnpm workspace Ke以帮你管理多个子包，Ru果以后想拆成独立插件，这一步省事儿。 
end of story – 给你留点余地自行发挥 
CIAO~ 就这么多啦，你自己动手敲几遍，把每一步dou跑通，再去玩玩自动化发布和 CI/CD 吧。
If you get stuck, just Google it or ask a buddy—没有解决不了的问题，只是还没碰到合适的答案而Yi。祝你玩得开心！ 🚀