點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

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

來源：懂視網責編：小采時間：2020-11-27 22:00:54

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

如何使用VuePress搭建一個類型element ui文檔:網站成果樣式項目書寫步驟 github地址:https://github.com/xuhuihui/dataCom 官網：http://caibaojian.com/vuepress/guide/getting-started.html 參考文章：https://www.gxlcms.com/article/156259.htm 前言：

推薦度：

點擊下載本文 文檔為doc格式

導讀如何使用VuePress搭建一個類型element ui文檔:網站成果樣式項目書寫步驟 github地址:https://github.com/xuhuihui/dataCom 官網：http://caibaojian.com/vuepress/guide/getting-started.html 參考文章：https://www.gxlcms.com/article/156259.htm 前言：

網站成果樣式

項目書寫步驟

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

官網：http://caibaojian.com/vuepress/guide/getting-started.html

參考文章：https://www.gxlcms.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

出現顯示文檔亂碼問題，如圖所示：

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

改變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 |

#展示效果如圖：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點擊下載本文 文檔為doc格式

標簽：文檔類型 ui

熱門焦點

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

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

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

最新推薦

猜你喜歡

熱門推薦