如何使用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 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
Vue-cli3多页面配置详解
Mar 22 Javascript
原生js+css实现tab切换功能
Sep 17 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
PHP array_push 数组函数
2009/12/26 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
linux下php上传文件注意事项
2016/06/11 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
Python 元组(Tuple)操作详解
2014/03/11 Python
Python有序字典简单实现方法示例
2017/09/28 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
Python中GIL的使用详解
2018/10/03 Python
python读取xlsx的方法
2018/12/25 Python
python实现随机漫步方法和原理
2019/06/10 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
美国探亲签证邀请信
2014/02/05 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
股票投资建议书
2014/05/19 职场文书
大连导游词
2015/02/12 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书