如何使用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 获取事件对象的注意点
Jul 29 Javascript
javascript 鼠标拖动图标技术
Feb 07 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
JS实现灯泡开关特效
Mar 30 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 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 连接mssql数据库 初学php笔记
2010/03/01 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
javascript中undefined的本质解析
2019/07/31 Javascript
Python pass 语句使用示例
2014/03/11 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
python对文件的操作方法汇总
2020/02/28 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
大学自主招生自荐信范文
2014/02/26 职场文书
人事部经理岗位职责
2014/03/07 职场文书
家长对老师的感言
2014/03/11 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书