組件簡介

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"  src="https://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"  src="https://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說明檔案

其他

后續功能持續迭代中！激情期待，

作者：Anduril

簡書傳送門：簡書/Anduril

掘金傳送門：掘金/Andurils

個人小站：anduril.cn

技術只有不沉浸其中才能對其更加公正看待！ 沒了狂熱和浮躁，去體會下開源下的語法魅力！這里沒有技術宗教的狂熱和鄙夷，沒有瘋狂的個人崇拜，只是一個技術人探索之路上對于美麗與丑陋的隨筆和感悟！

本文著作權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利，

標籤：其他

上一篇：vue3.0 demo代碼記錄

下一篇：面試官：JavaScript如何實作陣列拍平（扁平化）方法?