写了vue3组件库 el-pro 对于 element-plus加强版之前陆陆续续写了一些组件补充完善，想想如何自己实现

之前陆陆续续写了一些组件补充完善，想想如何自己实现一个组件库，这样方便大家使用，一路坎坷记录下来，方便大家少走弯路

查看效果

文档库

使用vitepress，好处，兼容md，兼容vue

mkdir el-pro && cd el-pro
pnpm init
pnpm add -D vitepress@latest
pnpm dlx vitepress init

这样得到一个普通的md网站

如何加载自定义组件？

vitepress.dev/guide/exten…

官网有个链接，藏得有点深

如何加载的demo块支持运行和查看？

可以使用vitepress-theme-demoblock，具体看官网

自定义组件如何打包？

打算使用rollup打包，vue3、tsx（网上各种不行），需要按以下配置来

.babelrc文件

{
  "plugins": [
    ["@vue/babel-plugin-jsx"]
  ]
}

tsconfig.json文件

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "declaration": true,
    "declarationDir": "./",
    "outDir": "build"
  },
  "include": ["src"],
  "exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"]
}

rollup.config.js文件

import babel from '@rollup/plugin-babel'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import typescript from '@rollup/plugin-typescript'
// import typescript2 from 'rollup-plugin-typescript2'
import { terser } from 'rollup-plugin-terser'
import pkg from './package.json'
import external from 'rollup-plugin-peer-deps-external'
import scss from 'rollup-plugin-scss'
// import dts from 'rollup-plugin-dts'
// import jsx from 'acorn-jsx'

const extensions = ['.ts', '.js', '.tsx']

const globals = {
  vue: 'Vue',
  'highlight.js': 'hljs',
  'marked': 'marked'
}

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        name: 'ElPro',
        file: pkg.main,
        format: 'umd',
        globals
      },
      {
        file: pkg.module,
        format: 'es'
      },
      {
        name: 'ElPro',
        file: pkg.unpkg,
        format: 'umd',
        plugins: [terser()],
        globals
      }
    ],
    external: ['vue', 'element-plus', 'sortablejs', '@element-plus/icons-vue'],
    // acornInjectPlugins: [jsx()],
    plugins: [
      external(),
      scss({
        output: 'dist/index.min.css',
        outputStyle: 'compressed'
      }),
      typescript({
        lib: ["es5", "es6", "dom"],
        target: "es5",
        sourceMap: false,
        tsconfig: './tsconfig.json'
      }),
      // typescript2({
      //   rollupCommonJSResolveHack: true,
      //   clean: true
      // }),
      babel({ babelHelpers: "bundled", extensions }),
      resolve(),
      commonjs({ extensions })
    ]
  },
  // {
  //   input: 'src/index.ts',
  //   output: [{ file: "dist/index.d.ts", format: "es" }],
  //   plugins: [dts()]
  // }
]

package.json部分依赖

{
  "devDependencies": {
    ...,
    "@babel/core": "^7.15.8",
    "@rollup/plugin-babel": "^5.3.0",
    "@rollup/plugin-commonjs": "^21.0.0",
    "@rollup/plugin-node-resolve": "^13.0.2",
    "@rollup/plugin-typescript": "^8.2.5",
    "@types/lodash-es": "^4.17.5",
    "@types/marked": "^3.0.1",
    "@vue/babel-plugin-jsx": "^1.1.1",
    "gh-pages": "^3.2.3",
    "highlight.js": "^11.2.0",
    "marked": "^3.0.7",
    "rimraf": "^3.0.2",
    "rollup": "^2.53.3",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.1",
    "rollup-plugin-scss": "^3.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "sass": "^1.42.1",
    "tslib": "^2.3.0",
    "typescript": "^4.4.3"
  }
}

发布gh-pages

生成ssh-key，docs.github.com/en/authenti…

需要注意的，现在是新的key，并且本地的rsa-key需要删除，不然一直发布不成功，我就是不成功，修改成https发布，但是发布了又访问不了