使用VuePress搭建一個相似element的文檔

網站成果樣式


項目書寫步驟

github地址:github.com/xuhuihui/da…
javascript

官網:caibaojian.com/vuepress/gu…css

參考文章:www.javascriptcn.com/read-31206.…html

前言:我先git clone官方github,運行查看完整效果。 再根據官網介紹和參考文章,結合完整的代碼,本身一步步配置內容。最後,參考element的設計樣式,修改並增長代碼,造成一個平臺組件庫的網站。前端

(1)在已有項目中安裝vue

# 安裝爲本地依賴項
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 
複製代碼

出現顯示文檔亂碼問題,如圖所示:java


解決方式:修改md文件編碼爲UTF-8node


改變md文件的內容以下:react

---
home: true
actionText: 前往 →
actionLink: /baseComponents/
features:
- title: 佈局類組件
  details: 基本組件,爲經常使用組件提供快速,可用的組件
- title: 可視化組件
  details: 積累將數據可視化的業務組件
- title: 知識庫
  details: 積累前端相關的知識,涵蓋 vue、react、koa二、nodejs 相關的知識點
---複製代碼

(2)配置文件git

配置(參考連接:caibaojian.com/vuepress/co…) VuePress 站點的基本文件是 .vuepress/config.js,其中導出一個 JavaScript 對象:github

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 拓展

調用別人寫好的輪子:www.npmjs.com/package/vue…

<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 |複製代碼

#展現效果如圖:

相關文章
相關標籤/搜索