[個人開源]vue-code-view:一個在線編輯、實時預覽的代碼交互組件

• 2021 年 11 月 1 日
• 筆記
• 0x02.FrontEnd, VUE

組件簡介

vue-code-view是一個基於 vue 2.x、輕量級的代碼交互組件，在網頁中實時編輯運行代碼、預覽效果的代碼交互組件。

使用此組件, 不論 vue 頁面還是 Markdown 文檔中的示例代碼，效果如下：

組件的由來

當項目中頁面或者 Markdown 文檔包含大量代碼時，使用 highlight.js 進行代碼高亮後極大的增大了閱讀性，但是當我們閱讀時想要對當前代碼進行編輯調試時，只能打開本地開發環境或者跳轉至 codepen codesandbox等在線項目示例。即使是很簡單的代碼示例仍然避免不了上述場景的繁瑣步驟!如果遇到網絡不好，或者本地開發環境沒有安裝配置的情況，那就很遺憾了！

目前大多開源項目的 Markdown 文檔示例大多支持了示例代碼的實時渲染，可以在文檔頁面中看到源碼的運行效果，提供了在線項目的跳轉功能。當需要調試代碼時，還是需要重複上述步驟，體驗不是太友好。

那麼能不能有這麼一個組件能支持在頁面中編輯代碼，實時運行預覽效果？在網絡找了好久，沒有找到 vue 版本，只看到了 react-code-view，受其啟發，自已編寫了一個 vue 版本組件 vue-code-view ！

組件功能

目前組件已實現的主要功能特性：

• 💻 代碼可以在線編輯，實時預覽效果。
• 🎨 代碼編輯器支持代碼高亮、光標行背景高亮、括號/標籤匹配自動關閉、代碼摺疊。
• 🌈 基於vue的 SFC 解析,支持 <template> <script> <style>代碼邏輯。
• 🌈 支持<style> CSS 預處理,目前實現sass。
• 📑 支持 Markdown 示例實時渲染，需要自定義 loader 。

組件props

項目資源列表

• Github項目地址：vue-code-view

• 項目網站及在線示例： vue-code-view

• NPM地址： vue-code-view

• CodeSandbox 在線項目示例：-

使用示例

安裝

使用 npm 或 yarn 安裝組件包。

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

Vue 配置

組件使用包含運行時編譯器的 Vue 構建版本，所以需要單獨配置下。

若使用 vue cli,需要在vue.config.js文件進行如下配置：

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"; 
import "vue-code-view/lib/vue-code-viewer.css";
...
Vue.use(CodeView);
...

組件使用

使用組件的source屬性傳入示例代碼。

示例代碼格式支持 <template> <script> <style>，<template>不能為空；暫不支持JSX 語法。

<template>
  <div id="app">
    <code-viewer :source="code_example"></code-viewer>
  </div>
</template>
<script>
const code_source = ` 
<template>
  <div id="app">
    <img alt="Vue logo" class="logo" src="//cn.vuejs.org/images/logo.svg" />
    <h1>Welcome to Vue.js {{version}} !</h1> 
  </div>
</template>
<script>
export default {
    data() {
      return {
        version: '2.x'
      };
    },
  };
<\/script>

<style> 
.logo {
  width:66px;
}
</style> `,

  export default {
    data() {
      return {
        code_example: code_source
      };
    },
  };
</script>

JSX使用方式

組件 JSX 語法使用方式。

<script>
const code_example = `<template>
  <div id="app">
    <img alt="Vue logo" class="logo" src="//cn.vuejs.org/images/logo.svg" />
    <h1>Welcome to Vue.js  !</h1>
  </div>
</template> `;

export default {
  name: "demo",
  render() {
    return (
      <div >
        <code-viewer source={code_example}
          showCode={false}
        ></code-viewer>
      </div>
    );
  },
};
</script>

組件庫混合使用

項目引入其他組件庫後，組件的示例源代碼中直接使用即可，實現預覽調試功能。

錯誤處理

組件內置了錯誤預處理，目前支持代碼為空、代碼格式錯誤（<template>內容不存在）等，以文字的形式顯示在示例區域，也提供了自定義錯誤方式 errorHandler（使用 Notice 組件進行信息告知）。

render() {
  return (
    <div >
      <code-viewer
        source={code_example}
        showCode={false}
        errorHandler={(errorMsg) => {
          this.$notify.error({
            title: "Info",
            message: errorMsg,
          });
        }}
      ></code-viewer>
    </div>
  )
}

示例使用了antd vue 的 notify組件進行消息提醒，效果如下：

示例效果

具體示例效果詳見 組件Markdown說明文檔

其他

後續功能持續迭代中！激情期待。