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 |複製代碼
#展現效果如圖: