vuepress自定义页面,vuepress搭建个人博客
本文主要介绍vuepress如何使用Vue组件实现页面转换的详细说明。有需要的朋友可以参考一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
目录
简介预环境使用vue组件安装插件配置插件使用vue组件创建vue组件
引言
单纯用vuepress写markdown文档确实会处处受限，满足不了定制的风格和功能。有时候，只是某个页面的简单修改，或者某个组件的演示，而不是开发一整套的主题。因此，有必要研究如何在项目中使用vue组件。毕竟没那么难。
前置环境
节点环境node v16.13.0VuePress版本vue press v 2 . 0 . 0-beta 48各个版本的用法还是有一些差异的，尤其是1.x和2.x之间，所以在阅读的时候尽量和自己使用的版本进行比较，避免不必要的试错。
使用 vue 组件
安装插件
在vuepress2.x中，需要安装配置@ vue press/plugin-register-components插件，而在Vuepress1.0中，md文件可以自动识别导出。vue文件。
纱线添加@ vue press/plugin-register-components @ next
//或者
NPM id @ vue press/plugin-register-components @ next
配置插件
config.js中的配置修改如下：
官方配置项目文件
const { registerComponentsPlugin }=require( @ vue press/plugin-register-components )
模块.导出={
插件：[
registerComponentsPlugin({
//配置项
}),
],
}
我的本地配置文件的一部分：
const path=require( path )；
const { default theme }=require( vue press )；
const { docsearchPlugin }=require( @ vue press/plugin-docsearch )
//===================================================
const { registerComponentsPlugin }=require( @ vue press/plugin-register-components )
//==================简介插件结束========================
const navbar=require(。/navbar’)；
const sidebar=require(。/sidebar’)；
模块.导出={
基底：/，
郎： zh-CN ，
标题：“前端技术堆栈”，
描述：“前端白皮书”，
头：[
[link ，{ rel: manifest ，href: /manifest.webmanifest }]，
[meta ，{ name: theme-color ，content: #3eaf7c }]
],
别名：{
@pub: path.resolve(__dirname，。/public’)，
},
降价：{
导入代码：{
handleImportPath:(str)=1
str.replace(/^@src/，path.resolve(__dirname， src )，
},
提取标题：真
},
//=================配置插件============================
插件：[
registerComponentsPlugin({
//配置项
components dir:path . resolve(_ _ dirname，。/组件)
})
],
//=================配置插件结束===============================
主题：默认主题({
//URL
徽标：“https://vuejs.org/images/logo.png”，
//顶部导航
navbar: navbar
//侧栏
侧栏：侧栏，
SidebarDepth: 2，//eb将同时从markdown中提取h2和h3标题，并显示在侧边栏上。
last:true//文档更新时间：每个文件git的最后提交时间
})
}
创建 vue 组件
在中创建新的组件文件夹。vuepress文件夹，存储vue组件的地方。文件结构如下：
.vuepress
组件
卡. vue
配置
navbar.js
sidebar.js
公立
图片
config.js
此时，md文件可以自动识别下的所有vue组件。vuepress/components/继续以下步骤，您可以看到项目中使用的效果。
Card.vue文件的内容如下。这个成分可以根据个人需求来定。这里只是参考，对应后期效果。此处未设置密钥。用K代替。
模板
div class=g卡链接
值 class=g-card-item :key=k 中的div v-for=(item，k)
a:href= item。link rel=外部无follow target= _ blank :title= item。标题“{ item。title } }/a
/div
/div
/模板
脚本设置
从“vue”导入{ ref，定义道具}；
const props=defineProps({
默认值：字符串
})
常量值=ref(props。默认值)；
/脚本
样式lang=scss
按钮{背景色：#4e6ef2}。g-card-link {
显示器：flex
柔性包装：缠绕；
差距：10px
文本对齐：居中；
行高：38px。g-卡-项目{
背景：蓝色；
宽度：113像素
最大宽度：138像素；
高度：38px
光标：指针；
溢出：隐藏；
}。g卡-项目：第n种类型(2n) {
背景：rgba(44，104，255，1);
}。g卡-项目：第n种类型(2n 1) {
背景：rgba(56203137，1);
}
}
/风格
使用 vue 组件
在docs/docs/README.md文件直接引入Card.vue，当然文档路径你可以自由选择。这里我们给组件传了数据，如果没有数据交互会更简单，直接引用就行了。
-
数据：2022年6月14日
郎：zh-CN
标题：文档常用文档
描述：收集常用的文档
-
文档数量
收集精编常用的文档.
div v-for=(item，k) in linkList
h3{{item.title}}/h3
差异
卡片：默认值= item。儿童/
/div
/div
脚本设置
从“vue”导入{ ref }；
const linkList=ref([])；
linkList.value=[
{
标题："反应用户界面"组件库，
儿童：[
{
标题："蚂蚁设计",
链接： https://蚂蚁。设计/文档/反应/介绍-cn
},{
标题："自举",
链接： https://反应-自举。github。io/入门/简介
},{
标题："材料界面",
链接： https://ui。com/material-ui/入门/概述/
}
]
},{
标题：" Vue UI "组件库，
儿童：[
{
标题："元素",
链接：“https://元素。eleme。io/#/zh-CN/组件/安装"
},{
标题："元素加",
链接：“https://元素-plus。org/zh-CN/组件/按钮。html "
},{
标题：“Vant”，
链接： https://有赞。github。 io/vant/#/zh-CN
},{
标题："视图设计",
链接： https://www。伊维威。 com/view-ui-plus/guide/introduce
}
]
},
{
标题： 动画库，
儿童：[
{
标题： Animate.css ，
链接：" https://animate.style/"
}
]
}
]
/脚本
至此组件已经引入到页面中可，我们来看看效果传送门：
以上就是Vuepress使用某视频剪辑软件组件实现页面改造的详细内容，更多关于Vuepress vue组件页面改造的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。