使用VuePress搭建一个类型element ui文档

最新推荐文章于 2023-10-29 20:52:54 发布

长是人千离

最新推荐文章于 2023-10-29 20:52:54 发布

阅读量1.8w

点赞数 8

分类专栏：前端文章标签： vue vuepress docs

本文链接：https://blog.csdn.net/qq_30227429/article/details/80567745

版权

本文档介绍了如何使用VuePress搭建一个类似Element UI的组件库网站。首先通过克隆官方GitHub仓库预览效果，然后根据VuePress官方指南和参考文章逐步配置内容。在项目中遇到文档乱码问题，通过修改MD文件编码解决。配置文件、主题样式、扩展插件（如element-ui、vue-echarts、vue-highlight）的安装和应用，以及Markdown中使用Vue组件的详细步骤，包括自定义按钮组件的创建和样式设置，都在文中详述。

摘要由CSDN通过智能技术生成

网站成果样式

项目书写步骤

github地址:https://github.com/xuhuihui/dataCom

官网：http://caibaojian.com/vuepress/guide/getting-started.html

参考文章：https://www.javascriptcn.com/read-31206.html

前言：我先git clone官方github，运行查看完整效果。再根据官网介绍和参考文章，结合完整的代码，自己一步步配置内容。最后，参考element的设计样式，修改并增加代码，形成一个平台组件库的网站。

（1）在已有项目中安装

# 安装为本地依赖项
npm install -D vuepress

# 创建一个 docs 目录
mkdir docs

# 创建一个 markdown 文件
echo '# Hello VuePress' > docs/README.md

# 给package.json 添加一些 scripts 脚本：{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}# 运行项目
yarn run docs:dev

出现显示文档乱码问题，如图所示：

解决方式：修改md文件编码为UTF-8

改变md文件的内容如下：

---
home: true
actionText: 前往 →
actionLink: /baseComponents/
features:
- title: 布局类组件
  details: 基本组件，为常用组件提供快速，可用的组件
- title: 可视化组件
  details: 积累将数据可视化的业务组件
- title: 知识库
  details: 积累前端相关的知识，涵盖 vue、react、koa2、nodejs 相关的知识点
---

（2）配置文件

配置（参考链接：http://caibaojian.com/vuepress/config/