dewfall123 / vitepress-for-component Goto Github PK
View Code? Open in Web Editor NEW📖 针对组件开发的VitePress。 重构版本https://github.com/dewfall123/ruabick
Home Page: https://dewfall123.github.io/vitepress-for-component/
License: MIT License
📖 针对组件开发的VitePress。 重构版本https://github.com/dewfall123/ruabick
Home Page: https://dewfall123.github.io/vitepress-for-component/
License: MIT License
把图标也一同打包
Describe the bug
.vitepress/theme/index.js 添加enhanceApp 报错
To Reproduce
Steps to reproduce the behavior:
.vitepress/theme/index.js 创建文件
添加代码如下:
Expected behavior
A clear and concise description of what you expected to happen.
期望是正常的,但是页面是报错了,runtime-core.esm-bundler.js:6568 [Vue warn]: Invalid vnode type when creating vnode: undefined.
at
System Info
Additional context
Add any other context about the problem here.
能不能把默认css样式也一同打包,我发现组件发布的样式和这个项目预览的不一样,例如,用这个文档会默认为table表格加一些样式,但是打包之后,样式没有了,看起来很不一致。而且我无法得知默认样式有哪些
RT
请问搜索功能这部分有没有可能加上去的?
在theme中引入element-plus报错, 相关依赖版本太低
Describe the bug
执行 docs-build-serve 命令后打开网页样式错误,dev 时一切正常
To Reproduce
yarn docs-build-serve
Expected behavior
网页样式正常
System Info
相关 github 地址:https://github.com/fuzhoujohn/bass-ui
我通过 脚手架 创建一个项目 vue-docs,用的这个 vue-multiple-components
模板, 打包部署在 netilfy 上。指定文档目录在 docs/dist,打开html 引入路径的 路径 通通都有 vue-docs/ , 导致 404
我尝试修改 base, title 这些,然后 执行 npm run docs-build, 依然没有修改成功
请问我应该怎么做?
vuepress目前不支持iframe模式, dumi是将所有组件打成一个包,所以的组件都可以单独访问
能不能把默认css样式也一同打包,我发现组件发布的样式和这个项目预览的不一样,例如,用这个文档会默认为table表格加一些样式,但是打包之后,样式没有了,看起来很不一致。而且我无法得知默认样式有哪些
点击查看代码示例后,发现合成的代码有问题,无法预览 :-(
另外,如何开启 CodesandBox 预览呢? @dewfall123
new Vue({
el: '#app',
import { useSize } from 'ahooks-vue';
import { ref } from 'vue';
setup() {
const divRef = ref(null);
const size = useSize(divRef, {
onChange: () => {
console.log('size change');
},
});
return {
divRef,
size,
};
},
};
})
Describe the bug
I ran yarn create vlib
and then completed all the choices, under vue-multiple-components mode, whereafter I ran npm install
, showing logs provided below
➜ fuckup npm install
npm WARN deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: This module has moved and is now available at @rollup/plugin-alias. Please update your dependencies. This version is no longer maintained.
npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-commonjs.
added 1527 packages, and audited 1528 packages in 7m
110 packages are looking for funding
run `npm fund` for details
7 vulnerabilities (3 moderate, 4 high)
To address all issues, run:
npm audit fix
Run `npm audit` for details.
I, then, ran npm run dev
, having this as the output:
➜ fuckup npm run dev
> [email protected] dev
> vitepress-fc dev --root=docs
vitepress v0.14.0
vite v2.0.5
root = docs/.temp
copy to .temp success.
Pre-bundling dependencies:
vue
(this will be run only when your dependencies or config have changed)
vite v2.0.5 dev server running at:
> Local: http://localhost:3000/
> Network: http://192.168.0.100:3000/
[@vue/compiler-sfc] <script setup> is still an experimental proposal.
Follow its status at https://github.com/vuejs/rfcs/pull/227.
[@vue/compiler-sfc] When using experimental features,
it is recommended to pin your vue dependencies to exact versions to avoid breakage.
[@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.
[@vue/compiler-sfc] `defineEmit` is a compiler macro and no longer needs to be imported.
12:53:08 [vite] Internal server error: <template functional> is no longer supported in Vue 3, since functional components no longer have significant performance difference from stateful ones. Just use a normal <template> instead.
Plugin: vite:vue
File: /Users/admin/projects/vue/fuckup/node_modules/vitepress-for-component/dist/client/theme-default/components/icons/ArrowLeft.vue
at /Users/admin/projects/vue/fuckup/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:196:37
at Array.forEach (<anonymous>)
at Object.parse (/Users/admin/projects/vue/fuckup/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:182:18)
at createDescriptor (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:4392:52)
at transformMain (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:4694:32)
at TransformContext.transform (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:5016:16)
at Object.transform (/Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:46027:53)
at async transformRequest (/Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61631:29)
at async /Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61739:32
12:53:09 [vite] Internal server error: <template functional> is no longer supported in Vue 3, since functional components no longer have significant performance difference from stateful ones. Just use a normal <template> instead.
Plugin: vite:vue
File: /Users/admin/projects/vue/fuckup/node_modules/vitepress-for-component/dist/client/theme-default/components/icons/ArrowRight.vue
at /Users/admin/projects/vue/fuckup/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:196:37
at Array.forEach (<anonymous>)
at Object.parse (/Users/admin/projects/vue/fuckup/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:182:18)
at createDescriptor (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:4392:52)
at transformMain (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:4694:32)
at TransformContext.transform (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:5016:16)
at Object.transform (/Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:46027:53)
at async transformRequest (/Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61631:29)
at async /Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61739:32
12:53:09 [vite] Internal server error: <template functional> is no longer supported in Vue 3, since functional components no longer have significant performance difference from stateful ones. Just use a normal <template> instead.
Plugin: vite:vue
File: /Users/admin/projects/vue/fuckup/node_modules/vitepress-for-component/dist/client/theme-default/components/icons/OutboundLink.vue
at /Users/admin/projects/vue/fuckup/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:196:37
at Array.forEach (<anonymous>)
at Object.parse (/Users/admin/projects/vue/fuckup/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:182:18)
at createDescriptor (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:4392:52)
at transformMain (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:4694:32)
at TransformContext.transform (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:5016:16)
at Object.transform (/Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:46027:53)
at async transformRequest (/Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61631:29)
at async /Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61739:32
12:53:30 [vite] Internal server error: /Users/admin/projects/vue/polyeth-docs/node_modules/vitepress/dist/client/theme-default/components/icons/OutboundLink.vue has no corresponding SFC entry in the cache. This is a @vitejs/plugin-vue internal error, please open an issue.
at getDescriptor (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:4412:11)
at Context.load (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:4991:28)
at Object.load (/Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:46008:50)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async transformRequest (/Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61574:24)
at async /Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61739:32
12:53:30 [vite] Internal server error: /Users/admin/projects/vue/polyeth-docs/node_modules/vitepress/dist/client/theme-default/components/NavDropdownLinkItem.vue has no corresponding SFC entry in the cache. This is a @vitejs/plugin-vue internal error, please open an issue.
at getDescriptor (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:4412:11)
at Context.load (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:4991:28)
at Object.load (/Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:46008:50)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async transformRequest (/Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61574:24)
at async /Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61739:32
12:53:31 [vite] Internal server error: <template functional> is no longer supported in Vue 3, since functional components no longer have significant performance difference from stateful ones. Just use a normal <template> instead.
Plugin: vite:vue
File: /Users/admin/projects/vue/fuckup/node_modules/vitepress-for-component/dist/client/theme-default/components/icons/ArrowRight.vue
at /Users/admin/projects/vue/fuckup/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:196:37
at Array.forEach (<anonymous>)
at Object.parse (/Users/admin/projects/vue/fuckup/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:182:18)
at createDescriptor (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:4392:52)
at transformMain (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:4694:32)
at TransformContext.transform (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:5016:16)
at Object.transform (/Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:46027:53)
at async transformRequest (/Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61631:29)
at async /Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61739:32
12:53:31 [vite] Internal server error: <template functional> is no longer supported in Vue 3, since functional components no longer have significant performance difference from stateful ones. Just use a normal <template> instead.
Plugin: vite:vue
File: /Users/admin/projects/vue/fuckup/node_modules/vitepress-for-component/dist/client/theme-default/components/icons/ArrowLeft.vue
at /Users/admin/projects/vue/fuckup/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:196:37
at Array.forEach (<anonymous>)
at Object.parse (/Users/admin/projects/vue/fuckup/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:182:18)
at createDescriptor (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:4392:52)
at transformMain (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:4694:32)
at TransformContext.transform (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:5016:16)
at Object.transform (/Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:46027:53)
at async transformRequest (/Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61631:29)
at async /Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61739:32
12:53:31 [vite] Internal server error: <template functional> is no longer supported in Vue 3, since functional components no longer have significant performance difference from stateful ones. Just use a normal <template> instead.
Plugin: vite:vue
File: /Users/admin/projects/vue/fuckup/node_modules/vitepress-for-component/dist/client/theme-default/components/icons/OutboundLink.vue
at /Users/admin/projects/vue/fuckup/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:196:37
at Array.forEach (<anonymous>)
at Object.parse (/Users/admin/projects/vue/fuckup/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:182:18)
at createDescriptor (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:4392:52)
at transformMain (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:4694:32)
at TransformContext.transform (/Users/admin/projects/vue/fuckup/node_modules/@vitejs/plugin-vue/dist/index.js:5016:16)
at Object.transform (/Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:46027:53)
at async transformRequest (/Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61631:29)
at async /Users/admin/projects/vue/fuckup/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61739:32
To Reproduce
Steps to reproduce the behavior:
see Describe the bug
Expected behavior
to, not to put too fine a point on it, work.
System Info
Additional context
nothing more.
Uncaught (in promise) TypeError: Cannot destructure property 'frontmatter' of 'route.data' as it is null.
docs目录下新建了一个文件夹叫demo,里面有一个demo.vue文件,通过./index.zh-CN.md引入demo,demo中引入了docs文件夹外的组件通过../../components/xxx/xxx.tsx,但运行起来报错,查看了.temp文件夹里的文件,目录结构不一致导致的,无法引入docs文件夹外的组件,需要重复复制代码到docs文件夹里
是否支持lit
能不能把默认css样式也一同打包,我发现组件发布的样式和这个项目预览的不一样,例如,用这个文档会默认为table表格加一些样式,但是打包之后,样式没有了,看起来很不一致。而且我无法得知默认样式有哪些
copy to .temp success.
failed to start server. error:
Error: Cannot find module '/Users/a123/Documents/My/libs/docs/.temp/.vitepress/config.js'
Require stack:
项目无法启动,另外可否增加一份说明,怎样在已有项目引入VFC?
封装 自定义指令,支持hooks component directive。请问 如何 在<demo/>中展示directive 例子
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
System Info
Additional context
Add any other context about the problem here.
Describe the bug
通过调整配置使工具能够编译src子目录下的组件文档,并在temp中生成了相关文档,但是在页面中访问时,无法展示正确内容。
To Reproduce
docs\.vitepress\config.js
配置更改后配置如下const base = process.env.NODE_ENV === 'production' ? '/@/' : '';
const { resolve } = require('path');
module.exports = {
title: 'UAAS平台',
description: '项目文档',
// 扫描srcIncludes里面的 *.md文件
srcIncludes: ['src/components'],
alias: {
// 为了能在demo中正确的使用 import { X } from 'test'
[`/@/`]: resolve('./src'),
},
base,
themeConfig: {
// logo: '../logo.svg',
nav: [{ text: 'demo', link: '/math' }],
lang: 'zh-CN',
locales: {
'/': {
lang: 'zh-CN',
title: 'UAAS平台',
description: '项目文档',
label: '中文',
selectText: '语言',
nav: [{ text: '指南', link: '/' }],
sidebar: [
{ text: '介绍', link: '/' },
{ text: 'Button', link: '/components/button/' },
{ text: 'OrganizationSelect', link: '/OrganizationSelect/' },
],
},
},
search: {
searchMaxSuggestions: 10,
},
lastUpdated: true,
prevLink: true,
nextLink: true,
},
};
src\components
下创建组件demo.vue
index.vue
index.zh-CN.md
// src\components\OrganizationSelect\index.zh-CN.md
---
map:
# 映射到docs的路径
path: /OrganizationSelect
---
# OrganizationSelect 组织选择组件
用于筛选组织的多级树级组件
## 组织选择组件
### 基本用法
<demo src="./demo.vue"
language="vue"
title="基本用法"
desc="点击切换。"> </demo>
## API
// ```ts
import OrganizationSelect from '/@/components/OrganizationSelect.vue';
// ```
// docs\.temp\OrganizationSelect\index.md
---
map:
path: /OrganizationSelect
realPath: src\components\OrganizationSelect\index.zh-CN.md // 自动生成路径页面显示404
realPath: src\OrganizationSelect\index.zh-CN.md // 手动删除 \components 后页面能正常显示,但是demo.vue does not exist!
---
# OrganizationSelect 组织选择组件
用于筛选组织的多级树级组件
## 组织选择组件
### 基本用法
<demo src="./demo.vue"
language="vue"
title="基本用法"
desc="点击切换。"> </demo>
## API
import OrganizationSelect from '/@/components/OrganizationSelect.vue';
Expected behavior
希望能支持在已有项目内进行文档开发,或支持在src例如src\components
子级目录下的文档编译显示
System Info
Additional context
Add any other context about the problem here.
关键代码: const decodedHtmlStr = computed(() => decodeURIComponent(props.htmlStr ?? ""));
报错信息: Uncaught SyntaxError: Unexpected token ?
现在代码能在页面上跑起来,但是要想编辑代码的话,需要跳转到codepen,如果能够在当前页面可以编辑代码,同时能看到效果,那就更好了。
请问一下样式如何自定义,比如我想自定义绑定我外部的vue为layout,试了一下会报错
Is your feature request related to a problem? Please describe.
i use this lib, it show me [@vue/compiler-sfc]
defineProps is a compiler macro and no longer needs to be imported.
in console
Describe the solution you'd like
see source, find .vue
component use setup script
, import defineProps
from vue.
but the defineProps
function is macro function.
so
just remove import { defineProps } from 'vue'
with .vue
file can resolve this warnning
Describe alternatives you've considered
remove import { defineProps } from 'vue
to fix it
Additional context
@dewfall123 如果能够将增强部分,通过 vitepress 插件或组件进行安装,应该可以更加通用。仅供参考哈,谢谢你的努力。从应用的角度和设计理念,我觉得您的这个实现比 https://github.com/antfu/vite-plugin-md 更合用。
Describe the bug
dev 时,head中script还未完成加载,demo内组件的onMounted已经完成了执行
To Reproduce
Steps to reproduce the behavior:
第一步:在 docs/public
下创建 test.js
window.TEST_FN = () => {
console.log(123)
}
第二步:在 .md 文件中引入该script
---
head:
- - script
- src: '/test.js'
---
第三步:在demo或某个组件的onMounted里执行:
window.TEST_FN()
Expected behavior
期望:可以成功打印 123
System Info
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
多组件构建场景,
.
├── src
│ ├── button
│ │ ├── demo
│ │ └── button.vue.d.ts
│ └── index.d.ts
├── style.css
├── vfctest.es.js
└── vfctest.umd.js
多个组件的样式全部都被打进入style.css里面了
Describe the solution you'd like
A clear and concise description of what you want to happen.
需要单独构建es
的文件夹,单独对文件进行构建,dumi
的esm:'babel'
配置一样,
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
类似vant
构建esm
模块或者dumi
的es
Additional context
Add any other context or screenshots about the feature request here.
Describe the bug
pnpm i
yarn dev
访问:http://localhost:3001/
[vite] Internal server error: (0 , import_vite.transformWithEsbuild) is not a function
Plugin: vite:vue
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.