豪车网站建设背景,百度提交入口网址是什么,生活家装饰,seo课程培训入门在使用VitePress/Dumi等静态网站生成时#xff0c;一般均支持直接在Markdown中渲染显示Vue/React组件#xff0c;这给个网站非常丰富极致的表现力#xff0c;我们在创建静态网站时开心的使用各种Vue/React组件#xff0c;但是在输出树结构时#xff0c;实际场景中存在几个…在使用VitePress/Dumi等静态网站生成时一般均支持直接在Markdown中渲染显示Vue/React组件这给个网站非常丰富极致的表现力我们在创建静态网站时开心的使用各种Vue/React组件但是在输出树结构时实际场景中存在几个问题
现有的树组件一般均属于某个UI套件的一部分比较重树组件的数据一般使用JSON进行描述冗余很多 对于在网站输出场景比较交麻烦.
因此隆重推荐LiteTree这个适用于React/Vue的树组件专用MarkDown场景准备具有
轻量小巧无任何外部依赖采用Lite格式描述树采用类似YAML的缩进来表示层级数据简洁支持标识样式定制注释图标等丰富的表现形式
访问官网
快速使用
LiteTree包含lite-tree/react和lite-tree/vue两个版本分别在React和Vue中使用,两者的使用方式基本相同。下面以VitePress为例进行说明。
第1步安装
npm install lite-tree/vue
// or
yarn add lite-tree/vue
// or
pnpm add lite-tree/vue第2步注册组件
lite-tree/vue在VitePress中使用有两种方式
按需引入全局引入
一般建议将LiteTree注册为全局组件以便在任何地方都可以使用。
// .vitepress/theme/index.js
import DefaultTheme from vitepress/theme
import { LiteTree } from lite-tree/vue/** type {import(vitepress).Theme} */
export default {extends: DefaultTheme,enhanceApp({ app }) {// 注册自定义全局组件app.component(LiteTreeLiteTree)}
}接下需要在.vitepress/config.mts中配置Vue参数如下
// .vitepress/config.mts
export default defineConfig({// ...vue:{template: { compilerOptions: {whitespace: preserve // [!code ]}}}
})重点:设置whitespace: preserve是为了保留Markdown中的空格以便LiteTree可以正确解析lite格式的树数据。
第3步使用
由于上面将LiteTree注册为全局组件因此接下来在任何markdown文件都可以直接使用LiteTree组件。
lite-tree支持使用json和lite两种格式来声明树数据。
lite是一种使用缩进来代表层级的简化格式每4个空格代表一个树层级适合在Markdown文档中使用。
下面是一个简单的例子(使用4个空格代表树的一个层缩进)
LiteTree
- A公司行政中心总裁办 // {color:red}important人力资源部财务部 //行政部 //法务部审计部 //-信息中心 //- 市场中心市场部销售部客服部品牌部市场策划部市场营销部研发中心移动研发部(java,python,go) //!平台研发部测试部 //*运维部 //*产品部设计部
/LiteTree
可以看到lite格式比起json或ul/li格式更加简洁适合在Markdown文档中使用。
渲染效果如下 说明
可以看到lite格式非常简洁只需要通过缩进或TAB来代表缩进即可默认情况下,每4个空格代表一个树层级,一个TAB等于4个空格。默认情况下前置-号来表示节点展开状态号表示节点关闭状态。
访问官网了解更多细节
推荐
全流程一健化React/Vue/Nodejs国际化方案 - VoerkaI18n无以伦比的React表单开发库 - speedform终端界面开发增强库 - Logsets简单的日志输出库 - VoerkaLogger装饰器开发 - FlexDecorators有限状态机库 - FlexState通用函数工具库 - FlexTools小巧优雅的CSS-IN-JS库 - Styledfc为JSON文件添加注释的VSCODE插件 - json_comments_extension开发交互式命令行程序库 - mixed-cli强大的字符串插值变量处理工具库 - flexvars前端link调试辅助工具 - yald异步信号 - asyncsignal捆绑Vue组件CSS到JS的插件 - vite-plugin-vue-style-bundler 轻量树组件 - LiteTree
