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


Posted in Javascript onFebruary 14, 2019

网站成果样式

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

项目书写步骤

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

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

参考文章:https://3water.com/article/156259.htm

前言:我先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

出现显示文档乱码问题,如图所示:

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

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

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

改变md文件的内容如下:

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

(2)配置文件

配置(参考链接:http://caibaojian.com/vuepress/config/) VuePress 站点的基本文件是 .vuepress/config.js,其中导出一个 JavaScript 对象:

module.exports = {
 title: 'data Com', // 设置网站标题
 description: 'Just for fun', //描述
 dest: './dist',  // 设置输出目录
 port: 2233, //端口
 themeConfig: { //主题配置
  // 添加导航栏
  nav: [
   { text: '主页', link: '/' }, // 导航条
   { text: '组件文档', link: '/baseComponents/' },
   { text: '知识库', link: '/knowledge/' },
   { text: 'github',    // 这里是下拉列表展现形式。
    items: [
     { text: 'focus-outside', link: 'https://github.com/TaoXuSheng/focus-outside' },
     { text: 'stylus-converter', link: 'https://github.com/TaoXuSheng/stylus-converter' },
    ]
   }
  ],
  // 为以下路由添加侧边栏
  sidebar:{
   '/baseComponents/': [
    {
     title: '布局类组件',
     collapsable: true,
     children: [
      'base/test1',
      'base/test2',
      'base/test3',
      'base/test4',
     ]
    },
    {
     title: '可视化组件',
     collapsable: true,
     children: [
     ]
    },
    {
     title: '工具类组件',
     collapsable: true,
     children: [
     ]
    },
    {
     title: '方法类函数',
     collapsable: true,
     children: [
     ]
    }
   ],
   '/knowledge/': [
    {
     title: 'CSS知识库',
     collapsable: false,
     children: [
     ]
    },
    {
     title: 'JS知识库',
     collapsable: false,
     children: [
     ]
    },
    {
     title: 'node知识库',
     collapsable: false,
     children: [
     ]
    },
    {
     title: 'vue知识库',
     collapsable: false,
     children: [
     ]
    }
   ]
  }
 }
}

主题配置部分:在.vuepress/override.styl修改样式:

$accentColor = #3EB9C8 // 主题色
$textColor = #2c3e50 // 文字颜色
$borderColor = #eaecef // 边框颜色
$codeBgColor = #282c34 // 代码背景颜色
// 代码库重置
.content pre{ margin: 0!important;}

(3)增加其它扩展插件

插件npm安装:element-ui,vue-echarts,vue-highlight。。

在.vuepress/enhanceApp.js引入:

/**
 * 扩展 VuePress 应用
 */
import VueHighlightJS from 'vue-highlight.js';
import 'highlight.js/styles/atom-one-dark.css';
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueECharts from 'vue-echarts' //注册图表

import './public/css/index.css' //组件css文件

export default ({
 Vue, // VuePress 正在使用的 Vue 构造函数
 options, // 附加到根实例的一些选项
 router, // 当前应用的路由实例
 siteData // 站点元数据
}) => {
 // ...做一些其他的应用级别的优化
 Vue.use(VueHighlightJS)
 Vue.use(Element)
 Vue.component('chart', VueECharts)
}

(4)Markdown 拓展

调用别人写好的轮子:https://www.npmjs.com/package/vue-highlight.js

<highlight-code slot="codeText" lang="vue">
  <template>
   <div class="demo-button">
    <div>
     <dt-button>默认按钮</dt-button>
     <dt-button type="primary">主要按钮</dt-button>
     <dt-button type="success">成功按钮</dt-button>
     <dt-button type="info">信息按钮</dt-button>
     <dt-button type="warning">警告按钮</dt-button>
     <dt-button type="danger">危险按钮</dt-button>
    </div>
  </template>
 </highlight-code>

(5)在Markdown 使用Vue-----插入按钮样式

#先写一个按钮组件.\vuepress\docs\.vuepress\components\src\button.vue

<template>
 <button
  class="dt-button"
  @click="handleClick"
  :disabled="disabled"
  :autofocus="autofocus"
  :type="nativeType"
  :class="[
   size ? 'dt-button--' + size : '',
   type ? 'dt-button--' + type : '',
   {
    'is-disabled': disabled,
    'is-round': round,
    'is-plain': plain
   }
  ]">
  <i :class="icon" v-if="icon"></i>
  <span v-if="$slots.default"><slot></slot></span>
 </button>
</template>

<script>
export default {
 name: 'DtButton',

 props: {
  size: String,
  type: {
   type: String,
   default: 'default'
  },
  nativeType: {
   type: String,
   default: 'button'
  },
  disabled: Boolean,
  round: Boolean,
  plain: Boolean,
  autofocus: Boolean,
  icon: {
   type: String,
   default: ''
  }
 },
 methods: {
  handleClick (event) {
   this.$emit('click', event)
  }
 },
 mounted () {
  this.$emit('click', event)
 }
}
</script>

#css样式,在.\vuepress\docs\.vuepress\public\css\button.css,写法参考饿了么。

#在.\study\vuepress\docs\.vuepress\public\css\index.css汇总

@import './iconfont.css';
@import './icon.css';

@import './card.css';
@import './button.css'; //按钮组件
@import './checkbox.css';

#在.\vuepress\docs\.vuepress\components\test\test1.vue文件夹下面调用button

<template>
 <div class="demo-button">
  <div>
   <dt-button>默认按钮</dt-button>
   <dt-button type="primary">主要按钮</dt-button>
   <dt-button type="success">成功按钮</dt-button>
   <dt-button type="info">信息按钮</dt-button>
   <dt-button type="warning">警告按钮</dt-button>
   <dt-button type="danger">危险按钮</dt-button>
  </div>
 </div>
</template>

<script>
import DtButton from '../src/button'
export default {
 name: 'buttonWrap',
 components: {
  DtButton
 }
}
</script>

<style lang="less" scoped>
.demo-button{
 width: 100%;
 text-align: center;
 div {
  margin: 10px 0;
 }
}
</style>

#vuepress会自动根据路径注册组件,我们只要映射文件路径,就可以调用组件。

在.\vuepress\docs\baseComponents\base\test1.md

# 测试案例1
---
<Common-Democode title="基本用法" description="基本按钮用法">
 <test-test1></test-test1>
 <highlight-code slot="codeText" lang="vue">
  <template>
   <div class="demo-button">
    <div>
     <dt-button>默认按钮</dt-button>
     <dt-button type="primary">主要按钮</dt-button>
     <dt-button type="success">成功按钮</dt-button>
     <dt-button type="info">信息按钮</dt-button>
     <dt-button type="warning">警告按钮</dt-button>
     <dt-button type="danger">危险按钮</dt-button>
    </div>
   </div>
  </template>
 </highlight-code>
</Common-Democode>

| Tables    | Are      | Cool |
| ------------- |:-------------:| -----:|
| col 3 is   | right-aligned | $1600 |
| col 2 is   | centered   |  $12 |
| zebra stripes | are neat   |  $1 |

#展示效果如图:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
jquery实现弹出层效果实例
May 19 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
JavaScript类型相关的常用操作总结
Feb 14 #Javascript
VuePress 快速踩坑小结
Feb 14 #Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 #Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 #Javascript
VuePress 静态网站生成方法步骤
Feb 14 #Javascript
extract-text-webpack-plugin用法详解
Feb 14 #Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 #Javascript
You might like
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
理解javascript封装
2016/02/23 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
Python用GET方法上传文件
2015/03/10 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
Django中的静态文件管理过程解析
2019/08/01 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
python中二分查找法的实现方法
2020/12/06 Python
如何通过python检查文件是否被占用
2020/12/18 Python
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
七匹狼男装广告词
2014/03/21 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
合作协议书
2014/04/23 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
2015中学教学工作总结
2015/07/22 职场文书
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android
ipad隐藏软件app图标方法
2022/04/19 数码科技
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL