新增 解析md格式文本

blog/package.json

@@ -10,9 +10,11 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.10",
+    "@kangc/v-md-editor": "^2.3.15",
     "axios": "^1.1.3",
     "element-plus": "^2.2.20",
     "pinia": "^2.0.23",
+    "prismjs": "^1.29.0",
     "vue": "^3.2.41",
     "vue-router": "^4.1.6"
   },

blog/src/components/BlogList.vue

@@ -4,7 +4,9 @@
       <el-row>
         <!-- 文章图片 -->
         <el-col :span="10">
-          <img :src="item.firstPicture" alt="" class="first-picture" />
+          <router-link :to="'/articles/' + item.id">
+            <img :src="item.firstPicture" alt="" class="first-picture" />
+          </router-link>
         </el-col>
         <!-- 文章标题和简述 -->
         <el-col :span="14">
@@ -23,26 +25,31 @@ import { ref } from 'vue'
 
 const blogList = ref([
   {
+    id: 1,
     firstPicture: 'https://w.wallhaven.cc/full/zy/wallhaven-zyxvqy.jpg',
     title: '测试',
     description: '这是一篇测试文章'
   },
   {
+    id: 1,
     firstPicture: 'https://w.wallhaven.cc/full/zy/wallhaven-zyxvqy.jpg',
     title: '测试',
     description: '这是一篇测试文章'
   },
   {
+    id: 1,
     firstPicture: 'https://w.wallhaven.cc/full/zy/wallhaven-zyxvqy.jpg',
     title: '测试',
     description: '这是一篇测试文章'
   },
   {
+    id: 1,
     firstPicture: 'https://w.wallhaven.cc/full/zy/wallhaven-zyxvqy.jpg',
     title: '测试',
     description: '这是一篇测试文章'
   },
   {
+    id: 1,
     firstPicture: 'https://w.wallhaven.cc/full/zy/wallhaven-zyxvqy.jpg',
     title: '测试',
     description: '这是一篇测试文章'
@@ -60,8 +67,15 @@ const blogList = ref([
   .first-picture {
     width: 100%;
     height: 100%;
+    box-sizing: border-box;
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
+    transform: scale(1);
+    transition: transform 1s ease 0s;
+    overflow: hidden;
+  }
+  &:hover .first-picture {
+    transform: scale(1.1);
   }
   .blog-container {
     padding: 20px 20px 20px 40px;

blog/src/main.js

@@ -6,9 +6,26 @@ import 'element-plus/dist/index.css'
 import '@/assets/scss/index.scss'
 import 'virtual:svg-icons-register'
 import SvgIcon from './assets/svg/SvgIcon.vue'
+import VMdPreview from '@kangc/v-md-editor/lib/preview'
+import '@kangc/v-md-editor/lib/style/preview.css'
+// VuePress主题以及样式（这里也可以选择github主题）
+import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
+import '@kangc/v-md-editor/lib/theme/style/vuepress.css'
+// Prism
+import Prism from 'prismjs'
+// 代码高亮
+import 'prismjs/components/prism-json'
+
+// 选择使用主题
+VMdPreview.use(vuepressTheme, {
+  Prism
+})
 
 const app = createApp(App)
 
 app.component('svg-icon', SvgIcon)
 
-app.use(router).use(ElementPlus).mount('#app')
+app.use(VMdPreview)
+  .use(router)
+  .use(ElementPlus)
+  .mount('#app')

blog/src/router/index.js

@@ -20,6 +20,10 @@ const routes = [
   {
     path: '/about',
     component: () => import('@/views/about/About.vue')
+  },
+  {
+    path: '/articles/:id',
+    component: () => import('@/views/article/Article.vue')
   }
 ]
 

blog/src/views/about/About.vue

@@ -1,7 +1,22 @@
 <template>
-  <div>About</div>
+  <el-card shadow="hover" class="aboutme">
+    <v-md-preview :text="blog"></v-md-preview>
+  </el-card>
 </template>
 
-<script setup></script>
+<script setup>
+const blog = `
+## Welcome!
 
-<style lang="scss" scoped></style>
+Hello！欢迎来到我的个人博客！
+~~~js
+console.log('Hello World')
+~~~
+`
+</script>
+
+<style lang="scss" scoped>
+.aboutme {
+  margin: 20px 0;
+}
+</style>

blog/src/views/article/Article.vue

@@ -0,0 +1,27 @@
+<template>
+  <el-card shadow="hover" class="article">
+    <v-md-preview :text="blog"></v-md-preview>
+  </el-card>
+</template>
+
+<script setup>
+const blog = `
+## 测试
+
+这是一篇测试文章~
+这是一篇测试文章~
+这是一篇测试文章~
+这是一篇测试文章~
+这是一篇测试文章~
+
+~~~js
+console.log('这是一篇测试文章~')
+~~~
+`
+</script>
+
+<style lang="scss" scoped>
+.article {
+  margin: 20px 0;
+}
+</style>