【Vue 开发实战】实战篇 # 45：如何构建可交互的组件文档让代码高亮的显示在页面

说明

【Vue 开发实战】学习笔记。

效果

要实现这个代码的显示

使用 raw-loader 实现代码输出到页面

https://github.com/webpack-contrib/raw-loader

npm install raw-loader --save-dev

我们不走 webpack 的配置，使用下面一种方式

import chartCode from "!!raw-loader!@/components/Chart.vue";

我们在分析页添加 Chart.vue 的代码

<template>
    <div>
        {{$t('message')["app.dashboard.analysis.timeLabel"]}}
        <a-date-picker/>
        <Chart :option="chartOption" style="width: 600px; height: 400px;"/>
        {{chartCode}}
    div>
template>

<script>
import Chart from "@/components/Chart.vue";
import request from "@/utils/request.js";
import chartCode from "!!raw-loader!@/components/Chart.vue";

export default {
    data() {
        return {
            chartOption: {},
            chartCode
        }
    },
    components: {
        Chart
    },
    mounted() {
        this.getChartData();
        this.interval = setInterval(() => {
            this.getChartData();
        }, 3000);
    },
    beforeDestroy() {
        clearInterval(this.interval);
    },
    methods: {
        getChartData() {
            request({
                url: "/api/dashboard/chart",
                method: "get",
                params: {
                    id: "kaimo313"
                }
            }).then(response => {
                this.chartOption = {
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    tooltip: {},
                    legend: {
                        data: ['销量']
                    },
                    xAxis: {
                        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            data: response.data
                        }
                    ]
                }
            })
        }
    },
};
script>

<style>style>

我们可以看到效果已经出来了，不过没有样式

使用 vue-highlightjs 做代码样式处理

https://github.com/metachris/vue-highlightjs

npm install --save vue-highlightjs

在 main.js 里添加下面代码：主题可以自己查找：https://github.com/highlightjs/highlight.js/blob/main/src/styles，比如这里我使用了 monokai-sublime 的主题

import VueHighlightJS from 'vue-highlightjs';
import 'highlight.js/styles/monokai-sublime.css';

Vue.use(VueHighlightJS);

分析页添加这个高亮的显示

<pre v-highlightjs><code class="html">{{chartCode}}code>pre>

效果如下：