V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
andurils
V2EX  ›  JavaScript

Vue Code View(VCV 0.4.0):一个在线编辑、实时预览的代码交互组件

  •  
  •   andurils · 2022-01-24 10:37:49 +08:00 · 2040 次点击
    这是一个创建于 795 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Vue Code View(VCV)

    Build Status GitHub license npm npm bundle size npm

    一个基于 vue 2.x的轻量代码交互组件,在网页中可以编辑、运行并实时预览代码效果展示。

    当阅读包含大量代码的文档时,很多项目文档通过 markdown loader 实现了示例代码的 render 展示,但它是静态的。当我们想调试代码时,一般需要打开本地 IDE 或者打开 codepencodesandbox等在线编辑器网站,也会受制于电脑是否安装开发环境或者网络连接是否顺畅。

    那么能不能有这么一个组件能支持在页面中编辑代码,在网页中可以编辑、运行并实时预览代码效果展示?

    特别感谢组件 react-code-view,基于此编写了 vue 版本的组件!使用此组件在 vue 页面还是 markdown 文档中的多示例代码,都可以实时编辑运行代码、预览效果。

    在线预览

    示例

    在线预览: https://andurils.github.io/vue-code-view/#/demo

    codesandbox 示例: vue-code-view-example

    ✨ 特性

    • 💻 代码可以在线编辑,实时预览效果。
    • 🎨 支持示例代码高亮,配置主题。
    • 🌈 支持 <style> 解析渲染。
    • 📑 支持 Markdown 文件示例渲染。

    📦 安装

    npm i vue-code-view
    # or
    yarn add vue-code-view
    

    🔨 配置

    使用vue cli需要在vue.config.js文件进行配置,支持使用包含运行时编译器的 Vue 构建版本。

    module.exports = {
      runtimeCompiler: true,
      // or
      chainWebpack: (config) => { 
        config.resolve.alias
          .set("vue$", "vue/dist/vue.esm.js");
      },
    }; 
    

    💻 示例

    入口文件 main.js 中引入组件,不需要手动引入样式。

    import Vue from "vue";
    import App from "./App.vue";
    import CodeView from "vue-code-view";
    
    Vue.use(CodeView);
    
    new Vue({
      router,
      store,
      render: (h) => h(App),
    }).$mount("#app");
    

    API

    Attributes

    参数 说明 类型 默认值 版本
    theme 代码编辑器 theme mode,支持 light / dark light | dark dark
    showCode 是否显示代码编辑器 boolean false
    source 运行示例源码 string -
    errorHandler 错误处理函数 function -
    debounceDelay 错误处理防抖延迟(ms) number 300
    layout render 视图布局 top | right | left top 0.4.0

    官网截图

    3D1B044ED7142A295B03D6AFD7B74ECD.png

    3 条回复    2022-01-24 14:17:06 +08:00
    saigo
        1
    saigo  
       2022-01-24 11:14:35 +08:00   ❤️ 1
    已经 star ,如果写组件库的文档,这个岂不是很方便
    andurils
        2
    andurils  
    OP
       2022-01-24 11:18:45 +08:00
    @saigo 嗯嗯,组件实现基于 SFC ,主要解决场景就是组件库的文档展示调试。
    基于 vue 3 版本的也在开发中了
    lizhenda
        3
    lizhenda  
       2022-01-24 14:17:06 +08:00
    这想法真的很不错哦
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5459 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 06:43 · PVG 14:43 · LAX 23:43 · JFK 02:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.