feat(@142vip/vitepress): 修改模块构建配置，支持Vue组件编译，新增VipContactAuthor组件封装

packages/vitepress/README.md

@@ -14,6 +14,9 @@ pnpm i vitepress -D
 
 ## 参考
 
+- [支持Vue组件](https://github.com/unjs/unbuild/issues/80)
+- [组件结构](https://github.com/wobsoriano/vue-sfc-unbuild/blob/main/build.config.ts)
+
 ## 感谢
 
 ## 证书

packages/vitepress/build.config.ts

@@ -2,12 +2,27 @@ import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
   entries: [
-    'src/index',
+    // 参考：https://github.com/wobsoriano/vue-sfc-unbuild/blob/main/build.config.ts
+    {
+      builder: 'mkdist',
+      input: './src',
+      pattern: ['**/*.vue'],
+      loaders: ['vue'],
+    },
+    {
+      builder: 'mkdist',
+      input: './src',
+      pattern: ['**/*.ts'],
+      format: 'cjs',
+      loaders: ['js'],
+    },
+    { builder: 'mkdist', input: './src', pattern: ['**/*.ts'], format: 'esm', loaders: ['js'] },
   ],
   declaration: true,
   clean: true,
   rollup: {
     emitCJS: true,
     inlineDependencies: true,
   },
+  failOnWarn: false,
 })

packages/vitepress/components.d.ts

@@ -0,0 +1 @@
+export * from './dist/components'

packages/vitepress/package.json

@@ -20,12 +20,18 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.mjs",
+      "require": "./dist/components/index.js"
     }
   },
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
+    "components.d.ts",
     "dist"
   ],
   "engines": {
@@ -38,5 +44,8 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
+  },
+  "devDependencies": {
+    "mkdist": "^1.5.5"
   }
 }

packages/vitepress/src/components/VipContactAuthor.vue

@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div class="contact-author">
+    <h2>
+      联系作者
+    </h2>
+    若系列文章对你有所帮助，欢迎订阅微信公众号或微信”骚扰“，获取更多内容。<strong>商务合作请备注来意</strong>
+    <div class="wechat">
+      <img
+        alt="关注微信公众号或添加好友联系储凡"
+        class="wechat-img"
+        src="https://cdn.statically.io/gh/142vip/cdn_service@main/media/main-code.png" title="关注微信公众号或添加好友联系储凡"
+        width="auto"
+      >
+    </div>
+    <div class="platform-link">
+      <a href="https://github.com/mmdapl" rel="nofollow noreferrer" target="_blank" title="点击跳转Github主页">
+        <img
+          alt="CSDN" class="platform-img" src="https://cdn.statically.io/gh/142vip/cdn_service@main/main-vip/svg/github.svg"
+          title="CSDN"
+        >
+      </a>
+      <a href="https://gitee.com/Mmdapl" rel="nofollow noreferrer" target="_blank" title="点击跳转码云主页">
+        <img
+          alt="Gitee" class="platform-img" src="https://cdn.statically.io/gh/142vip/cdn_service@main/main-vip/svg/gitee.svg"
+          title="Gitee"
+        >
+      </a>
+      <a
+        href="https://juejin.im/user/448256476724807" rel="nofollow noreferrer" target="_blank" title="点击跳转掘金主页"
+      >
+        <img
+          alt="掘金" class="platform-img"
+          src="https://cdn.statically.io/gh/142vip/cdn_service@main/main-vip/svg/juejin.svg"
+        >
+      </a>
+      <a href="https://space.bilibili.com/350937042" rel="nofollow noreferrer" target="_blank" title="点击跳转B站主页">
+        <img
+          alt="Bilibili"
+          class="platform-img"
+          src="https://cdn.statically.io/gh/142vip/cdn_service@main/main-vip/svg/bilibili.svg"
+        >
+      </a>
+      <a href="https://blog.csdn.net/Mmdapl" rel="nofollow noreferrer" target="_blank" title="点击跳转CSDN博客主页">
+        <img
+          alt="CSDN"
+          class="platform-img" src="https://cdn.statically.io/gh/142vip/cdn_service@main/main-vip/svg/csdn.svg" title="点击跳转CSDN博客主页"
+        >
+      </a>
+    </div>
+
+    <div>
+      交流/加群/互看朋友圈、<strong>聊天/提问/建议/提需求</strong> 可以在公众号直接<strong>私信</strong>，有时间即会回复，偶尔的延迟和疏漏还请小伙伴们谅解，蟹蟹。
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.contact-author {
+  margin: 10px;
+}
+
+.wechat {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.wechat-img {
+  text-align: center;
+  align-items: center;
+  margin: 10px;
+  border-radius: 5px;
+}
+
+.platform-link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+  margin-bottom: 10px;
+}
+
+.platform-img {
+  margin: 5px;
+  width: 24px;
+  height: 24px;
+}
+</style>

packages/vitepress/src/components/index.ts

@@ -0,0 +1,5 @@
+import VipContactAuthor from './VipContactAuthor.vue'
+
+export {
+  VipContactAuthor,
+}

packages/vitepress/src/index.ts

@@ -1 +1,13 @@
+import type { Plugin } from 'vue'
+import * as components from './components'
+
 export * from './config'
+
+const install: Plugin = {
+  install(app) {
+    for (const key of Object.keys(components))
+      app.component(key, components[key as keyof typeof components])
+  },
+}
+
+export default install