如何使用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 相关文章推荐
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
Vue双向绑定实现原理与方法详解
May 07 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格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
javascript实现留言板功能
2020/02/08 Javascript
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
python采集百度百科的方法
2015/06/05 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
python烟花效果的代码实例
2020/02/25 Python
python实现斗地主分牌洗牌
2020/06/22 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
写好自荐信要注意的问题
2013/11/10 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
人力资源求职信
2014/05/25 职场文书
医院标语大全
2014/06/23 职场文书
企业务虚会发言材料
2014/10/20 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
四年级小学生评语
2014/12/26 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
房贷工资证明范本
2015/06/12 职场文书
小数乘法教学反思
2016/02/22 职场文书