vue-highlightjs + vue-scrollto 插件 如何在vue2项目中引入

1. 安装插件

npm install vue-highlightjs vue-scrollto --save

2. 在 main.js 中引入插件并注册

import Vue from 'vue'
import VueHighlightJS from 'vue-highlightjs'
import VueScrollTo from 'vue-scrollto'

Vue.use(VueHighlightJS)
Vue.use(VueScrollTo)

3. 在组件中使用

<template>
  <div>
    <pre><code class="html" v-highlightjs>{{ code }}</code></pre>
    <button @click="scrollToTop">回到顶部</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: '<div>Hello, world!</div>'
    }
  },
  methods: {
    scrollToTop() {
      this.$scrollTo('#app', 500)
    }
  }
}
</script>

4. 在样式中引入 highlight.js 的样式文件

@import "~highlight.js/styles/github.css";