Vuepress使用vue組件實現(xiàn)頁面改造
引言
只是單純的用 vuepress
寫個 markdown 文檔,的確會處處受限,滿足不了定制化的樣式和功能,有時只是簡單的修改下某個頁面,或者做些組件演示的內容,而不是開發(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({ // 配置項 }), ], }
我本地的配置文件的部分內容:
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
文件內容如下,這個組件個人可以因需而定,這里只做個參照,和后面的效果對應上。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>
至此組件已經引入到頁面中可,我們來看看效果 ? 傳送門 :
以上就是Vuepress使用vue組件實現(xiàn)頁面改造的詳細內容,更多關于Vuepress vue組件頁面改造的資料請關注腳本之家其它相關文章!
相關文章
el-table實現(xiàn)轉置表格的示例代碼(行列互換)
這篇文章主要介紹了el-table實現(xiàn)轉置表格的示例代碼(行列互換),本文結合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-02-02vue實現(xiàn)類似淘寶商品評價頁面星級評價及上傳多張圖片功能
最近在寫一個關于vue的商城項目,然后集成在移動端中,開發(fā)需求中有一界面,類似淘寶商城評價界面!接下來通過本文給大家分享vue實現(xiàn)類似淘寶商品評價頁面星級評價及上傳多張圖片功能,需要的朋友參考下吧2018-10-10element-ui動態(tài)添加表單項并實現(xiàn)事件觸發(fā)驗證代碼示例
這篇文章主要給大家介紹了關于element-ui動態(tài)添加表單項并實現(xiàn)事件觸發(fā)驗證的相關資料,其實就是利用了vue的v-for循環(huán)渲染,通過添加數(shù)組實現(xiàn)動態(tài)添加表單項,需要的朋友可以參考下2023-12-12Vue??vuex配置項和多組件數(shù)據(jù)共享案例分享
這篇文章主要介紹了Vue??vuex配置項和多組件數(shù)據(jù)共享案例分享,文章圍繞Vue?Vuex的相關資料展開配置項和多組件數(shù)據(jù)共享的案例分享,需要的小伙伴可以參考一下2022-04-04