9 Star 79 Fork 50

smallwei / avue-doc

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

vuepress-plugin-demo-block-vue3

介绍

基于Vuepress2的插件,它可以帮助你在编写组件库文档的时候增加示例代码和预览。

查看文档和示例:https://demo-block.seepine.com或克隆项目运行

安装

安装 VuePress

请参考 Vuepress2 官方文档,点此查看

安装插件

使用 yarn 安装 vuepress-plugin-demo-block-vue3 插件

yarn add vuepress-plugin-demo-block-vue3 -D

或者使用 npm 安装它:

npm i vuepress-plugin-demo-block-vue3 --save-dev

如果你的网络环境不佳,推荐使用 cnpm

配置插件

打开 .vuepress/config.js 文件,然后在合适的位置引用插件:

  • 配置扫描路径 componentsDir
import { defineUserConfig } from 'vuepress'
import blockDemo from "vuepress-plugin-demo-block-vue3"

export default defineUserConfig({
  ...
  plugins: [
    blockDemo({
      // 设置路径
      path: __dirname,
    })
  ],
  ...
})

::: warning 注意 componentsDir 必传,为动态注册组件的基础路径,目录结构可参考 element-plus :::

引入组件

可在.vuepress/client.js引入组件,需要注意的是,第三方库可能还需要依赖,例如ant-design-vue还需要lessless-loader,请自行安装

import { defineClientConfig } from '@vuepress/client'

// import Antd from "ant-design-vue";
// import "ant-design-vue/dist/antd.css";

// import ElementPlus from "element-plus";
// import "element-plus/dist/index.css";

// import ArcoVue from '@arco-design/web-vue';
// import ArcoVueIcon from '@arco-design/web-vue/es/icon';
// import '@arco-design/web-vue/dist/arco.css';

export default defineClientConfig({
  enhance({ app, router, siteData }) {
      // app.use(Antd)
      // app.use(ElementPlus)
      // app.use(ArcoVue);
      // app.use(ArcoVueIcon);
  },
  setup() {},
  rootComponents: [],
})

空文件

简介

avue官网文档 展开 收起
JavaScript 等 3 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/smallweigit/avue-doc.git
git@gitee.com:smallweigit/avue-doc.git
smallweigit
avue-doc
avue-doc
master

搜索帮助