怎么才能实现vue官网中代码展示的效果，给出具体的完整代码

要在 Vue 项目中实现类似 Vue 官网上代码展示的效果，可以使用 vue-prism-component 插件。

首先，安装 vue-prism-component:

npm install vue-prism-component

然后，在 main.js 中引入并注册该组件:

import Vue from 'vue'
import Prism from 'vue-prism-component'

Vue.component('prism', Prism)

最后，在组件中使用该组件:

<template>
  <div>
    <prism language="javascript">
      {{code}}
    </prism>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: `console.log('Hello, Vue!')`
    }
  }
}
</script>

要注意的是，需要额外引入 prism.js 和 prism.css 以及你需要用到的语言对应的 css 文件。

完整代码如下:

<template>
  <div>
    <prism language="javascript">
      {{code}}
    </prism>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: `console.log('Hello, Vue!')`
    }
  }
}
</script>

<style src="~prismjs/themes/prism.css"></style>

这是一个简单的示例，您可以根据需要进行更改。