各种博客的代码高亮是如何实现的

本文来自 「Vue虚拟实验」的小伙伴  余xiaoy，在做 Lovue 项目的时候，他负责了代码高亮显示功能，目前实现了代码高亮、主题切换、某行代码特殊显示、显示行号等功能，效果如下。

下面介绍如何通过 Vue 来完成这个功能：

Vue 为我们提供了很方便的创建组件的方式，组件化开发能够将业务进行解耦，进而提高项目的开发效率。在 Vue 中定义组件非常简单:定

<div id="app">
    <!-- 2. 标签形式引入lovue组件 -->
    <lovue></lovue>
</div>


<script>
    // 1. 使用Vue.component(name,{})进行组件全局注册
    Vue.component('lovue', {
        template: '<h2>这是lovue组件</h2>'


    })l
    const vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
    });
</script>

以上代码便定义了一个全局的 lovue 组件，随后我们可以很愉快地在页面各个位置通过引入 lovue 标签的形式使用我们的组件了。

对于 demo 型项目，采用这种方式是可以的，但这种形式缺点很明显，比如字符串模板无法代码高亮，无法单独定义 CSS 样式等。因此在实际的项目当中，我们更多的是采用单文件组件的形式来定义组件。

1、单文件组件

在 Vue 中，一个.vue 文件就是一个单文件组件，一个基本的单文件组件代码结构如下：

<template>
    <div>
        <!-- 组件html代码 -->
        <h3>这是lovue单文件组件</h3>
    </div>
</template>
<script>
export default {
    // JS代码部分，包含组件内定义的属性及方法
    name: "Lovue",
    data() {
        return {};
    }
};
</script>
<style scoped>
/* CSS代码，添加scoped属性将定义为局部样式 */
</style>

将内嵌的组件定义改造为单文件组件形式后，我们可以在其他页面中，通过 import 语法进行导入，并采取全局或者局部的方式进行注册：

import Lovue from '@/components/Lovue'


// 1.全局注册
Vue.components('lovue', Lovue)


// 2.Vue实例内部局部注册
const vm = new Vue({
  el: '#app',
  components: {
    Lovue
  }
})

使用单文件组件，能让我们的项目文件结构较为清晰，使用 vue-cli创建的项目