Vuepress使用vue組件實現(xiàn)頁面改造
更新時間：2022年07月05日 10:42:11 作者：Gaby
這篇文章主要為大家介紹了Vuepress使用vue組件實現(xiàn)頁面改造示例過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
引言
只是單純的用 vuepress 寫個 markdown 文檔，的確會處處受限，滿足不了定制化的樣式和功能，有時只是簡單的修改下某個頁面，或者做些組件演示的內(nèi)容，而不是開發(fā)一整套主題。所以研究下如何在項目中使用 vue 組件還有非常有必要的，畢竟也沒那么難。
前置環(huán)境
- node 環(huán)境
node v16.13.0 - VuePress 版本
VuePress v2.0.0-beta.48
每個版本的使用方式還是有些差異的，尤其是 1.x 與 2.x，所以在閱讀的時候盡量與自己所用的版本對比下，避免不必要的試錯。
使用 vue 組件
安裝插件
在 Vuepress2.x 中需要安裝 @vuepress/plugin-register-components 插件并做好配置,而在Vuepress1.0中，md 文件能自動識別導出的.vue文件。
yarn add @vuepress/plugin-register-components@next // 或者 npm i -D @vuepress/plugin-register-components@next
配置插件
config.js中配置修改如下：
? 官方配置項文檔
const { registerComponentsPlugin } = require('@vuepress/plugin-register-components')
module.exports = {
plugins: [
registerComponentsPlugin({
// 配置項
}),
],
}
我本地的配置文件的部分內(nèi)容：
const path = require("path");
const { defaultTheme } = require('vuepress');
const { docsearchPlugin } = require('@vuepress/plugin-docsearch')
// ======================引入插件====================================
const { registerComponentsPlugin } = require('@vuepress/plugin-register-components')
// ======================引入插件 End================================
const navbar = require('./navbar');
const sidebar = require('./sidebar');
module.exports = {
base: '/',
lang: 'zh-CN',
title: '前端技術棧',
description: '前端白皮書',
head: [
['link', { rel: 'manifest', href: '/manifest.webmanifest' }],
['meta', { name: 'theme-color', content: '#3eaf7c' }]
],
alias: {
'@pub': path.resolve(__dirname, './public'),
},
markdown: {
importCode: {
handleImportPath: (str) =>
str.replace(/^@src/, path.resolve(__dirname, 'src')),
},
extractTitle: true
},
// ======================配置插件====================================
plugins: [
registerComponentsPlugin({
// 配置項
componentsDir: path.resolve(__dirname, './components')
})
],
// ======================配置插件 End=================================
theme: defaultTheme({
// URL
logo: 'https://vuejs.org/images/logo.png',
// 頂部導航
navbar: navbar,
// 側邊欄
sidebar: sidebar,
sidebarDepth: 2, // e'b將同時提取markdown中h2 和 h3 標題，顯示在側邊欄上。
lastUpdated: true // 文檔更新時間：每個文件git最后提交的時間
})
}
創(chuàng)建 vue 組件
在.vuepress文件夾中新建components文件夾，里面存放vue組件，文件結構如下：
├─.vuepress │ └─ components │ │ └─ Card.vue │ └─ config │ │ └─ navbar.js │ │ └─ sidebar.js │ └─ public │ │ └─ images │ └─ config.js
至此md文件就能無需引入即可自動識別.vuepress/components/下所有的vue組件了。繼續(xù)完成下面的步驟，就可以看到項目中使用的效果。
Card.vue 文件內(nèi)容如下，這個組件個人可以因需而定，這里只做個參照，和后面的效果對應上。key這里沒有設置業(yè)務 ID 暫且使用 k來代替。
<template>
<div class="g-card-link">
<div v-for="(item,k) in value" class="g-card-item" :key="k">
<a :href="item.link" rel="external nofollow" target="_blank" :title="item.title">{{item.title}}</a>
</div>
</div>
</template>
<script setup>
import { ref, defineProps } from 'vue';
const props = defineProps({
defaultValue:String
})
const value = ref(props.defaultValue);
</script>
<style lang="scss">
button {background-color: #4e6ef2}
.g-card-link {
display: flex;
flex-wrap: wrap;
gap:10px;
text-align: center;
line-height: 38px;
.g-card-item {
background: blue;
width: 113px;
max-width: 138px;
height: 38px;
cursor: pointer;
overflow: hidden;
}
.g-card-item:nth-of-type(2n) {
background: rgba(44,104,255,.1);
}
.g-card-item:nth-of-type(2n+1) {
background: rgba(56, 203, 137, .1);
}
}
</style>
使用 vue 組件
在 docs/docs/README.md 文件直接引入Card.vue，當然文檔路徑你可以自由選擇。這里我們給組件傳了數(shù)據(jù)，如果沒有數(shù)據(jù)交互會更簡單，直接引用就行了。
---
data: 2022-06-14
lang: zh-CN
title: Docs 常用文檔
description: 收集常用的文檔
---
# Docs
收集精編常用的文檔...
<div v-for="(item,k) in linkList">
<h3>{{item.title}}</h3>
<div>
<card :defaultValue="item.children"/>
</div>
</div>
<script setup>
import { ref } from 'vue';
const linkList = ref([]);
linkList.value = [
{
title: 'React UI 組件庫',
children: [
{
title: 'Ant Design',
link: 'https://ant.design/docs/react/introduce-cn'
},{
title: 'Bootstrap',
link: 'https://react-bootstrap.github.io/getting-started/introduction'
},{
title: 'Material UI',
link: 'https://mui.com/material-ui/getting-started/overview/'
}
]
},{
title: 'Vue UI 組件庫',
children: [
{
title: 'Element',
link: 'https://element.eleme.io/#/zh-CN/component/installation'
},{
title: 'Element Plus',
link: 'https://element-plus.org/zh-CN/component/button.html'
},{
title: 'Vant',
link: 'https://youzan.github.io/vant/#/zh-CN'
},{
title: 'View Design',
link: 'https://www.iviewui.com/view-ui-plus/guide/introduce'
}
]
},
{
title: '動畫庫',
children: [
{
title: 'Animate.css',
link: 'https://animate.style/'
}
]
}
]
</script>
至此組件已經(jīng)引入到頁面中可，我們來看看效果 ? 傳送門 ：
以上就是Vuepress使用vue組件實現(xiàn)頁面改造的詳細內(nèi)容，更多關于Vuepress vue組件頁面改造的資料請關注腳本之家其它相關文章！
相關文章
vue如何使用vant組件的field組件disabled修改默認樣式
這篇文章主要介紹了vue如何使用vant組件的field組件disabled修改默認樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
在支付寶賬單頁面有這樣一個特效切換過渡動效滑入滑出效果，非常方便實用，那么這個功能如何實現(xiàn)的呢？下面小編通過vue實現(xiàn)路由切換過渡動效滑入滑出效果，感興趣的朋友一起看看吧2022-03-03
今天小編就為大家分享一篇vue-cli監(jiān)聽組件加載完成的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
最近一段時間，一直在做主題方面的工作。我們的主題，并不是簡單切換一下顏色，或者排版變化這些，而是變化比較大的主題。比如說：主題1和主題2看起來完全不一樣，功能甚至都不一樣。這樣，通過切換css就無法做到了，因此我思考良久，使用了如下2種方法2021-06-06
Vue El-descriptions 描述列表功能實現(xiàn)
這篇文章主要介紹了Vue El-descriptions 描述列表功能實現(xiàn),Descriptions 描述列表,列表形式展示多個字段,本文結合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2024-05-05
Vue3 核心特性Suspense 與 Teleport 原理解析
本文詳細解析了Vue3的核心特性Suspense和Teleport,包括它們的實現(xiàn)原理、核心源碼、生命周期流程、依賴追蹤機制等,通過深入理解這兩個API的設計哲學,開發(fā)者可以提升代碼組織能力、優(yōu)化應用性能和實現(xiàn)更優(yōu)雅的架構設計,感興趣的朋友一起看看吧2025-03-03
在本篇內(nèi)容里小編給大家整理了關于vue寫h5頁面的方法以及注意點分析，有需要的朋友們跟著學習下吧。2019-02-02
在 Vue.js 中，$router 和 $route 是兩個常用的對象，用于處理路由相關的操作，下面小編就來和大家介紹一下$router 和 $route 的區(qū)別以及如何使用它們吧2023-06-06
vue中el-table實現(xiàn)穿梭框(數(shù)據(jù)可以上移下移)
本文主要介紹了vue中el-table實現(xiàn)穿梭框(數(shù)據(jù)可以上移下移)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
今天小編就為大家分享一篇解決vue組件中click事件失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11