如何使用VuePress搭建一個類型element ui文檔

2019-11-19 12:08:48

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

網(wǎng)站成果樣式

項目書寫步驟

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

官網(wǎng)：http://caibaojian.com/vuepress/guide/getting-started.html

參考文章：http://m.survivalescaperooms.com/article/156259.htm

前言：我先git clone官方github，運行查看完整效果。再根據(jù)官網(wǎng)介紹和參考文章，結(jié)合完整的代碼，自己一步步配置內(nèi)容。最后，參考element的設(shè)計樣式，修改并增加代碼，形成一個平臺組件庫的網(wǎng)站。

（1）在已有項目中安裝

# 安裝為本地依賴項npm install -D vuepress# 創(chuàng)建一個 docs 目錄mkdir docs# 創(chuàng)建一個 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

出現(xiàn)顯示文檔亂碼問題，如圖所示：

解決方式：修改md文件編碼為UTF-8

改變md文件的內(nèi)容如下：

---home: trueactionText: 前往 →actionLink: /baseComponents/features:- title: 布局類組件 details: 基本組件，為常用組件提供快速，可用的組件- title: 可視化組件 details: 積累將數(shù)據(jù)可視化的業(yè)務(wù)組件- title: 知識庫 details: 積累前端相關(guān)的知識，涵蓋 vue、react、koa2、nodejs 相關(guān)的知識點---

（2）配置文件

配置（參考鏈接：http://caibaojian.com/vuepress/config/） VuePress 站點的基本文件是 .vuepress/config.js，其中導(dǎo)出一個 JavaScript 對象：

module.exports = { title: 'data Com', // 設(shè)置網(wǎng)站標(biāo)題 description: 'Just for fun', //描述 dest: './dist',  // 設(shè)置輸出目錄 port: 2233, //端口 themeConfig: { //主題配置  // 添加導(dǎo)航欄  nav: [   { text: '主頁', link: '/' }, // 導(dǎo)航條   { text: '組件文檔', link: '/baseComponents/' },   { text: '知識庫', link: '/knowledge/' },   { text: 'github',    // 這里是下拉列表展現(xiàn)形式。    items: [     { text: 'focus-outside', link: 'https://github.com/TaoXuSheng/focus-outside' },     { text: 'stylus-converter', link: 'https://github.com/TaoXuSheng/stylus-converter' },    ]   }  ],  // 為以下路由添加側(cè)邊欄  sidebar:{   '/baseComponents/': [    {     title: '布局類組件',     collapsable: true,     children: [      'base/test1',      'base/test2',      'base/test3',      'base/test4',     ]    },    {     title: '可視化組件',     collapsable: true,     children: [     ]    },    {     title: '工具類組件',     collapsable: true,     children: [     ]    },    {     title: '方法類函數(shù)',     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）增加其它擴(kuò)展插件

插件npm安裝：element-ui，vue-echarts，vue-highlight。。

在.vuepress/enhanceApp.js引入：

/** * 擴(kuò)展 VuePress 應(yīng)用 */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 構(gòu)造函數(shù) options, // 附加到根實例的一些選項 router, // 當(dāng)前應(yīng)用的路由實例 siteData // 站點元數(shù)據(jù)}) => { // ...做一些其他的應(yīng)用級別的優(yōu)化 Vue.use(VueHighlightJS) Vue.use(Element) Vue.component('chart', VueECharts)}

（4）Markdown 拓展

調(diào)用別人寫好的輪子：https://www.npmjs.com/package/vue-highlight.js

 <highlight-code slot="codeText" lang="vue">  <template>   <div class="demo-button">    <div>     <dt-button>默認(rèn)按鈕</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文件夾下面調(diào)用button

<template> <div class="demo-button">  <div>   <dt-button>默認(rèn)按鈕</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會自動根據(jù)路徑注冊組件，我們只要映射文件路徑，就可以調(diào)用組件。

在./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>默認(rèn)按鈕</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 |

#展示效果如圖：