1. <template>

2.     <div class="article-wrapper">

3.         <template v-for="item in articleInfoData">

4.             <h2 class="title">{{ item.title }}</h2>

5.             <p class="desc" v-if="item.desc">摘要：{{ item.desc }}</p>

6.             <div class="content" v-html="item.content"></div>

7.             <p class="date">{{ item.created_at }}</p>

8.         </template>

9.     </div>

10.</template>

1. //安裝

2. npm install prismjs

1. //引入Prism（我們只需要在局部引入即可，我這里是在文章內(nèi)容展示組件中引入）

2. <script setup lang="ts">

3. import { ref, reactive, onMounted } from 'vue'

4. import type {Ref } from 'vue'

5. import { useRouter, useRoute } from 'vue-router'

6. import { api } from "@/assets/config/api"

7. import { request } from "@/assets/common/request"

8. import Prism from "prismjs"//導(dǎo)入代碼高亮插件的core（里面提供了其他官方插件及代碼高亮樣式主題，你只需要引入即可）

9. import "prismjs/themes/prism-tomorrow.min.css"//引入代碼高亮主題（這個(gè)去node_modules的安裝prismjs中找到想使用的主題即可）

10.

11.const router = useRouter()

12.const route = useRoute()

13.const articleInfoData: Ref<Array<object>> = ref([]);

14.

15.onMounted(() => {

16.   getArticleInfo()

17.   Prism.highlightAll()// 全局代碼高亮

18.})

19.function getArticleInfo(): void {//從后臺(tái)請(qǐng)求數(shù)據(jù)

20.        request.get(api.GetArticleInfo, {

21.            id: route.params.id

22.        }).then(res => {

23.          articleInfoData.value = res?.data?.data

24.        }).catch(err => {

25.           console.log(err)

26.        })

27.    })

28.

29.}

30.</script>

1. onMounted(() => {

2.     getArticleInfo()

3.      setTimeout(() => {

4.         Prism.highlightAll()// 全局代碼高亮

5.     }, 100)

6. })

1. <script setup lang="ts">

2. import { ref, reactive, onMounted } from 'vue'

3. import type {Ref } from 'vue'

4. import { useRouter, useRoute } from 'vue-router'

5. import { api } from "@/assets/config/api"

6. import { request } from "@/assets/common/request"

7. import Prism from "prismjs"//代碼高亮插件的core

8. import "prismjs/themes/prism-tomorrow.min.css"//高亮主題

9. const router = useRouter()

10.const route = useRoute()

11.const articleInfoData: Ref<Array<object>> = ref([]);

12.onMounted(async () => {

13.   await getArticleInfo().then(res => {

14.        articleInfoData.value = res

15.    }).catch(err => {

16.       console.log(err);

17.    })

18.     Prism.highlightAll()// 全局代碼高亮(必須等獲取數(shù)據(jù)之后，代碼高亮才能生效，也可以用定時(shí)器定時(shí))

19.})

20.function getArticleInfo(): Promise<Array<object>> {//從后臺(tái)請(qǐng)求數(shù)據(jù)

21.   return new Promise((resolve, reject) => {

22.        request.get(api.GetArticleInfo, {

23.            id: route.params.id

24.        }).then(res => {

25.            resolve(res?.data?.data)

26.        }).catch(err => {

27.            reject(err)

28.        })

29.    })

30.}

31.</script>

1. <script setup lang="ts">

2. import { ref, reactive, onMounted } from 'vue'

3. import type {Ref } from 'vue'

4. import { useRouter, useRoute } from 'vue-router'

5. import { api } from "@/assets/config/api"

6. import { request } from "@/assets/common/request"

7. import Prism from "prismjs"//代碼高亮core

8. import "prismjs/plugins/line-numbers/prism-line-numbers.min.js"//行號(hào)插件

9. import "prismjs/themes/prism-tomorrow.min.css"//高亮主題

10.import "prismjs/plugins/line-numbers/prism-line-numbers.min.css"//行號(hào)插件的樣式

11.const router = useRouter()

12.const route = useRoute()

13.const articleInfoData: Ref<Array<object>> = ref([]);

14.onMounted(async () => {

15.   await getArticleInfo().then(res => {

16.        articleInfoData.value = res

17.    }).catch(err => {

18.       console.log(err);

19.    })

20.   Prism.highlightAll()// 全局代碼高亮(必須等獲取數(shù)據(jù)之后，代碼高亮才能生效，也可以用定時(shí)器定時(shí))

21.})

22.function getArticleInfo(): Promise<Array<object>> {//從后臺(tái)請(qǐng)求數(shù)據(jù)

23.   return new Promise((resolve, reject) => {

24.        request.get(api.GetArticleInfo, {

25.            id: route.params.id

26.        }).then(res => {

27.            resolve(res?.data?.data)

28.        }).catch(err => {

29.            reject(err)

30.        })

31.    })

32.}

33.</script>

1. <template>

2.     <div class="article-wrapper">

3.         <template v-for="item in articleInfoData">

4.             <h3 class="title">{{ item.title }}</h3>

5.             <p class="desc" v-if="item.desc">摘要：{{ item.desc }}</p>

6.             <section class="author">

7.                 <span>作者:三葉雨</span>&nbsp;

8.                 <span>{{ item.created_at }}</span>

9.             </section>

10.            <div class="content line-numbers" v-html="item.content"></div>

11.        </template>

12.    </div>

13.</template>