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

Posted 2022-10-03 凯小默

说明

【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>

效果如下：