xinlei3166 / vitepress-theme-demoblock Goto Github PK
View Code? Open in Web Editor NEW一个基于 Vitepress 的主题插件,它可以帮助你在编写文档的时候增加 Vue 示例。
Home Page: https://xinlei3166.github.io/vitepress-demo/
License: MIT License
一个基于 Vitepress 的主题插件,它可以帮助你在编写文档的时候增加 Vue 示例。
Home Page: https://xinlei3166.github.io/vitepress-demo/
License: MIT License
node:internal/errors:491
ErrorCaptureStackTrace(err);
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\workspace\study_pc\vitepress-theme-demoblock-2.0.2\dist\bin\vitepress-register-components.mjs' imported from C:\workspace\study_pc\vitepress-theme-demoblock-2.0.2\bin\vitepress-register-components.js
at new NodeError (node:internal/errors:400:5)
at finalizeResolution (node:internal/modules/esm/resolve:326:11)
at moduleResolve (node:internal/modules/esm/resolve:945:10)
at nextResolve (node:internal/modules/esm/loader:163:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:842:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
at ESMLoader.import (node:internal/modules/esm/loader:525:22)
at importModuleDynamically (node:internal/modules/esm/translators:110:35)
at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14) {
code: 'ERR_MODULE_NOT_FOUND'
}
Node.js v18.13.0
通过分析浏览器请求,发现在vitepress dev docs
启动之后,浏览器请求多了非常多lodash-es
的js文件(将近1000个),这会导致页面白屏时间长达数秒。
通过分析源码,发现components/Demo.vue
文件中引入了lodash-es
库的throttle
方法,这种写法是全量引入lodash-es
,所以会导致这个问题~
import { throttle } from 'lodash-es'
希望能优化下,改成按需加载lodash-es
的方法。
按照示例去配置了一下,引用的自己的组件,如果不使用demo插槽,不会报错,用了插槽后会报[plugin:vitepress] Cannot read properties of undefined (reading 'sfcBlocks'),http请求也会报一个500,还有一个hashmap 404的错误
在md中使用scss以及:deep深度选择器,实际上样式没有渲染,相同的代码到正常的页面是可以渲染的,是不是不支持:deep?
2:40:33 PM [vitepress] Internal server error: Illegal tag name. Use '<' to print '<'.
Plugin: vite:vue
File: /Users/vijay/Desktop/project/work/aries-vue3-components/packages/docs/components/aries-upload/index.md:21:4
19 | ```vue
20 |
21 |
| ^
22 |
23 |
at createCompilerError (/Users/vijay/Desktop/project/work/aries-vue3-components/node_modules/.pnpm/registry.npmmirror.com+@VUE[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:19:19)
at emitError (/Users/vijay/Desktop/project/work/aries-vue3-components/node_modules/.pnpm/registry.npmmirror.com+@VUE[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1594:29)
【以上是报错内容,v3.0.3版本,下面是我的文档内容:】
aries-upload/index.md
一个基于 Vue3 和 Ant Design Vue 的文件上传组件。提供上传前的钩子函数进行自定义校验,并可以自定义上传的服务器端点。上传过程中会有加载标识,上传完成后,文件名会以超链接的形式展示,点击链接可以打开文件。同时,组件还提供删除文件的功能,点击删除图标,会移除已上传的文件。
npm install @aries/fusionui-aries-upload
import { AriesUpload } from '@aries/fusionui-aries-upload'
:::demo 默认使用 @aries/pro-oss 包中的 oss.uploadByConan(file)上传,从斑马sts接口 通过ali-oss-sdk上传
<template>
<aries-upload v-model:value="url" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
// const url = ref<string>("")
</script>
:::
:::demo 自定义上传接口
<template>
<aries-upload v-model:value="url" :action="uploadFile" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
// // import oss from '@aries/pro-oss'
// const url = ref("")
// const uploadFile = async (file) => {
// // return await oss.uploadByConan(file)
// }
</script>
:::
当运行build时(vitepress dev正常,把vitepress-theme-demoblock插件去除或不引入语言包正常),报如下错误:
/Users/wuqiulin/Documents/work/bsnl/bs-material/node_modules/element-plus/es/locale/lang/zh-cn.js:1
export default {
^^^^^^
SyntaxError: Unexpected token 'export'
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1025:15)
at Module._compile (node:internal/modules/cjs/loader:1059:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1147:10)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Module.<anonymous> (/Users/wuqiulin/Documents/work/bsnl/bs-material/node_modules/vitepress/dist/client/app/temp/app.js:28:10)
at Module._compile (node:internal/modules/cjs/loader:1095:14)
error Command failed with exit code 1.
// components
import DefaultTheme from 'vitepress/theme'
import ElementPlus from 'element-plus'
import Demo from 'vitepress-theme-demoblock/components/Demo.vue'
import DemoBlock from 'vitepress-theme-demoblock/components/DemoBlock.vue'
// lang
import cn from 'element-plus/es/locale/lang/zh-cn'
// styles
import 'element-plus/dist/index.css'
export default {
...DefaultTheme,
enhanceApp({ app }) {
// register global components
// app.component('MyGlobalComponent' /* ... */)
app.component('Demo', Demo)
app.component('DemoBlock', DemoBlock)
app.use(ElementPlus, { locale: cn, size: 'small' })
}
}
const { demoBlockPlugin } = require('vitepress-theme-demoblock')
md.use(demoBlockPlugin, {
cssPreprocessor: 'scss',
scriptImports: [
"import * as ElementPlus from 'element-plus'"
],
scriptReplaces: [
{
searchValue:
/const ({ defineComponent as _defineComponent }) = Vue/g,
replaceValue: 'const { defineComponent: _defineComponent } = Vue'
},
{
searchValue: /import ({.*}) from 'element-plus'/g,
replaceValue: (s, s1) => `const ${s1} = ElementPlus`
} ]
})
在:::demo中,只使用渲染组件没问题,但我想弄个响应式数据绑定到组件,那我就要定义一个ref,所以我需要在script中引入ref:import { ref } from 'vue',但现在会报错,说我有不期待的{,不知道这个怎么解决
Unexpected "{"
35 |
36 | const { defineComponent: _defineComponent } = Vue
37 | import { ref } from "vue";
| ^
38 |
39 |
:::demo 通过 options 修改
(加个文字,不然会渲染成格式块)```vue
<template>
<w-qrcode :options="options"></w-qrcode>
</template>
<script setup lang="ts">
import { ref } from "vue";
const options = ref({
color: {
dark: "#00ff00",
},
});
</script>
(加个文字,不然会渲染成格式块)```
:::
<template>
<xl-button>默认按钮</xl-button>
<xl-button type="primary">主要按钮</xl-button>
<xl-button type="success">成功按钮</xl-button>
<xl-button type="info">信息按钮</xl-button>
<xl-button type="warning">警告按钮</xl-button>
<xl-button type="danger">危险按钮</xl-button>
</template>
<script>
import { Button } from 'ant-design-vue'
</script>
报错:
[vite] Internal server error: Transform failed with 1 error: /vitepress-demo/docs/components/button.md:159:11: ERROR: Unexpected "{" Plugin: vite:vue File: /Users/bou/working/code/vue-pro/vitepress-demo/docs/components/button.md:159:11
这个插件个人觉得应该放到 dev依赖中,即安装命令
yarn add -D vitepress-theme-demoblock
可以在在线沙盒中打开么,还有1.0.0-beta.7能用么
一个md太长了 能不能分成多个 合并进去 像酱紫类似的调用一下
`:::demo
button/basic
:::`
[plugin:vite:vue] Transform failed with 1 error:
/Users/yangzongliu/Downloads/promise-ui-master/docs/components/button/index.md:431:11: ERROR: Unexpected "{"
Unexpected "{"
429| }
430|
431| import { useData } from 'vitepress'
| ^
432| const { ref } = Vue
vue 可以引入,其他 模块 无法引入
<template>
<add-circle />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { AddCircle } from 'chintui-icons'
export default defineComponent({
components: {
AddCircle,
},
})
</script>
import { AddCircle } from 'chintui-icons' 这行报错 error: Unexpected "{"
首先非常感谢作者写了这个插件,挺好用。这里提一个建议。
<style lang="scss">
.card-wrap {
text-align: center;
background: red;
.card {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 500;
color: var(--c-brand);
background: #fff;
border: 1px solid var(--c-brand);
height: 80px;
width: 600px;
background: yellow;
}
}
</style>
<style lang="scss"></style>
的字符串, 最终 render 的处理也只考虑 <style><style>
模式。不知道作者能否支持预编译器的适配。直接在 MD文件里面写 Vue组件,Vue组件如果是带有jsx语法,会无法渲染,如:
<template #item="{ element }"> <a-card :title="element.name" :extra="<a>More</a>" :style="{ width: 200, height: 150 }"> Inner Card content </a-card> </template>
:extra
参数无法渲染
"vitepress": "^1.0.0-alpha.8",
"vitepress-theme-demoblock": "^1.4.2",
md文件中的style scoped不生效,比如下面的content会影响全局的content样式.
<template>
<div class="content">内容</div>
</template>
<style scoped>
.content {
height: 300px;
}
</style>
使用的是vite版本^1.0.0-alpha.4
vue提示compileTemplate now requires the id
option.
<template>
{{ form.name }}
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const form = reactive({
name: 'test',
});
</script>
报错:form.md:15 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
且:import { reactive } from 'vue';引入方式不支持双引号
开发环境信息
macOS monterey 12.6
node 16.11.0
ant-design-vue 3.2.11
最小化重现
https://github.com/az031120103/test
复现步骤
git clone https://github.com/az031120103/test.git
npm run dev:ui
npm run dev:docs
实际发生
Form 组件的自定义 hooks useConfigInject 报错:
useConfigInject.js:71 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getPrefixCls')
at WEBPACK_DEFAULT_EXPORT (useConfigInject.js:71:1)
at setup (Form.js:118:43)
at callWithErrorHandling (runtime-core.esm-bundler.js:157:22)
at setupStatefulComponent (runtime-core.esm-bundler.js:7246:29)
at setupComponent (runtime-core.esm-bundler.js:7201:11)
at mountComponent (runtime-core.esm-bundler.js:5524:13)
at processComponent (runtime-core.esm-bundler.js:5499:17)
at patch (runtime-core.esm-bundler.js:5101:21)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5638:21)
at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
这个问题一直没有解决,最后自己仿照element-plus 撸了一个,
欢迎使用:https://javaweb-h5.gitee.io/component-docs-template/document/
不支持html代码的显示隐藏,希望能修复。我这样修复的,供参考。
<template>
<div
ref="demoBlock"
:class="['demo-block', blockClass, customClass ? customClass : '', { hover }]"
@mouseenter="hover = true"
@mouseleave="hover = false"
>
<div ref="source" class="source"> <!-- <div class="source"> -->
<slot />
</div>
<!-- ... -->
</div>
</template>
<script>
// components/Demo.vue
// ...
export default {
// ...
setup(props) {
// ...
const onClickControl = () => {
isExpanded.value = !isExpanded.value
hover.value = isExpanded.value
// add code
const hasHtml = source.value.querySelector('.language-html')
if (hasHtml) {
if (isExpanded.value) hasHtml.style.display = 'block'
else hasHtml.style.display = 'none'
}
// add end
}
// ...
const source = ref(null) // add
const highlight = ref(null)
// ...
return {
// ...
copyText,
source, // add
highlight,
// ...
}
}
}
</script>
<!-- ... -->
<style>
.highlight div[class*='language-'] {
margin: 0 !important;
}
/* add */
.source .language-html {
display: none;
}
</style>
版本信息:
"vitepress": "1.0.0-alpha.28",
"vitepress-theme-demoblock": "2.0.2",
vue: 3.2.44
报错信息:
node:fs:585
handleErrorFromBinding(ctx);
^
Error: ENOENT: no such file or directory, open 'D:\projects\new-energy-base.prettierrc'
at Object.openSync (node:fs:585:3)
at Object.readFileSync (node:fs:453:35)
at format (file:///D:/projects/new-energy-base/node_modules/.pnpm/[email protected]_aukpcd4tcdec3kaf6goa6mffd4/node_modules/vitepress-theme-demoblock/dist/bin/help.mjs:9:34)
at registerComponents (file:///D:/projects/new-energy-base/node_modules/.pnpm/[email protected]_aukpcd4tcdec3kaf6goa6mffd4/node_modules/vitepress-theme-demoblock/dist/bin/vitepress-register-components.mjs:65:28)
at file:///D:/projects/new-energy-base/node_modules/.pnpm/[email protected]_aukpcd4tcdec3kaf6goa6mffd4/node_modules/vitepress-theme-demoblock/dist/bin/vitepress-register-components.mjs:68:1
at ModuleJob.run (node:internal/modules/esm/module_job:197:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:337:24) {
errno: -4058,
syscall: 'open',
code: 'ENOENT',
path: 'D:\projects\new-energy-base\.prettierrc'
看了下 bin/help.mjs文件,里面读取.prettierrc路径使用的是cwd, 所以读取的是我个人项目的根路径, 需要把vitepress-theme-demoblock根目录下的.prettierrc文件拷贝到个人项目根目录才行
可能是 docs 文件夹下有 vite.config.ts 文件导致的:
import { fileURLToPath } from 'node:url';
import { defineConfig } from 'vite';
export default defineConfig(async () => {
return {
resolve: {
alias: {
'@': fileURLToPath(new URL('../src', import.meta.url)),
'@public': fileURLToPath(new URL('../public', import.meta.url)),
},
},
css: {
postcss: '../configs/.postcssrc.yml',
},
};
});
运行 pnpm run docs:dev
后报错:
The plugin "externalize-deps" was triggered by this import
docs/.vitepress/config.ts:5:7:
5 │ } from 'vitepress-theme-demoblock';
File: D:/*/node_modules/.pnpm/[email protected]/node_modules/vitepress-theme-demoblock/components/Demo.vue 91 | 92 | const onClickControl = () => { 93 | isExpanded.value = !isExpanded.value | ^ 94 | hover.value = isExpanded.value 95 | }
demo代码展开后页面向下滑动,点击收起页面会有抖动。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.