最近接到一个任务,要搭建一个自己的学习平台,类似element可以看到组件效果的同时还能查看组件源码,由于时间关系,决定使用第三方插件,于是在网上看了很多类似的技术,最终选了最简单的一种vuepress。我这里是在git上下载的完整项目(也可自行查看官网从头配置),主要是对配置文件进行说明:
Democode.vue组件展示组件,用于组件效果和源码展示
<template>
<div class="code">
<div class="code--title">
<h2>{{title}}</h2>
<small>{{description}}</small>
</div>
<div class="code--demo">
<div class="code-content">
<slot></slot>
</div>
</div>
<div v-if="isShow" class="code--segment">
<slot name="codeText"></slot>
</div>
<div v-if="$slots.codeText" class="code--button" @click="handleToggleShow">{{codeTextBtn}}</div>
</div>
</template>
<script>
export default {
name: 'DemoPage',
props: ['title', 'description'],
data() {
return {
isShow: false,
codeTextBtn: '显示代码'
}
},
methods: {
handleToggleShow() {
this.isShow = !this.isShow
this.codeTextBtn = this.isShow ? '隐藏代码' : '显示代码'
}
}
}
</script>
<style lang="less" scoped>
.code {
.code--title {
h2 {
padding: 0;
margin: 0;
border-bottom: none;
font-size: 18px;
}
small {
font-size: 14px;
display: inline-block;
margin: 10px 0;
color: #5e6d82;
}
}
.code--demo {
border: 1px solid #ebebeb;
border-bottom: none;
border-radius: 3px;
box-shadow: 0 0 2px 0 rgba(232, 237, 250, 0.6),
0 1px 2px 0 rgba(232, 237, 250, 0.5);
.code-content {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 4%;
border-bottom: 1px solid #ddd;
}
}
.code--button {
background: #fafbfc;
color: #409eff;
font-weight: 400;
line-height: 40px;
text-align: center;
cursor: pointer;
box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6),
0 2px 4px 0 rgba(232, 237, 250, 0.5);
&:hover {
font-size: 17px;
}
}
& + .code {
margin-top: 40px;
}
&:not(:first-child) {
margin-top: 40px;
}
}
</style>
.md文件中使用:
<!-- Common-Democode,Common为components下的组件分类目录,Democode为组件民名称,.md文件中组件使用均已这种形式 -->
<Common-Democode title="背景设置及badge" description="常用背景色设置及badge展示">
<!-- NtcUi-MyView为要展示的组件前缀分类,my-view2为展示效果代码文件 -->
<NtcUi-MyView-my-view2></NtcUi-MyView-my-view2>
<highlight-code slot="codeText" lang="vue">
<template>
要展示的组件使用时的代码
</template>
<script>
export default {
name: 'my-view2',
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped>
.border{
border: 1px solid #e5e5e5;
}
</style>
</highlight-code>
</Common-Democode>
config.js配置文件
module.exports = {
head: [
[
'link', // 设置 favicon.ico,注意图片放在 public 文件夹下
{
rel: 'icon',
href: 'nt.ico'
}
]
],
title: '数字化能力平台', // 设置网站标题
base: '/',
description: '为快速开发,自己研发、封装了一套前后端开发体系', //描述
dest: './dist', // 设置输出目录
port: 9960, //端口
themeConfig: { //主题配置
logo: '/logo.png', // 注意图片放在 public 文件夹下
search: true,
searchPlaceholder: '搜索文档',
// 添加导航栏
nav: [{
text: '主页',
link: '/'
}, // 导航条
{
text: '前端组件文档',
link: '/baseComponents/'
},
{
text: '后端知识库',
link: '/knowledge/'
},
{
text: 'dev and ops',
link: '/devAndOps/'
},
],
// 为以下路由添加侧边栏
sidebar: {
'/baseComponents/': [{
title: 'NTC-UI组件(PC)',
collapsable: true,
sidebarDepth: 1,
pageClass: 'custom-page-class',
children: [{
title: "my-view",
path: 'ntcUi/my-view'
},
]
},
{
title: '二次开发组件',
collapsable: true,
children: [{
title: "ntc-kkfileview 文件预览",
path: 'reDevelopment/ntc-kkfileview'
}]
},
{
title: '自定义组件',
collapsable: true,
children: []
},
],
}
}
}
enhanceApp.js全局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 VueBarcode from '@xkeshi/vue-barcode';
import VueQr from 'vue-qr'
import ntcUi from 'my-ui'
import VueECharts from 'vue-echarts' //注册图表
// my-kkfileview文件预览
import ntcKkfileview from 'my-kkfileview';
import '../.vuepress/public/css/font-awesome.css'
import '../.vuepress/styles/my-overwrite.css'
export default ({
Vue, // VuePress 正在使用的 Vue 构造函数
options, // 附加到根实例的一些选项
router, // 当前应用的路由实例
siteData // 站点元数据
}) => {
// ...做一些其他的应用级别的优化
Vue.use(VueHighlightJS)
Vue.use(Element)
Vue.use(myUi)
Vue.use(myKkfileview)
Vue.component(VueBarcode.name, VueBarcode)
Vue.component(VueQr.name, VueQr)
// Vue.use(myTestUi)
Vue.component('chart', VueECharts)
}
README.md首页.md文件
---
home: true
actionText: 快速上手 →
actionLink: /baseComponents/
---
<div class="my-home-content">
<a class="base-component" href="/baseComponents/">
<img style="height:55px;margin-right:15px;" src="/image/baseComponents.png" />
<div>
<div style="font-size:18px;color:#333333 !important;margin-bottom:20px;">前端组件</div>
<div style="font-size:14px;color:#666666 !important;">快速体验组件demo,帮助工程师快速开发</div>
</div>
</a>
<a class="knowledge" href="/knowledge/">
<img style="height:55px;margin-right:15px;" src="/image/knowledge.png" />
<div>
<div style="font-size:18px;color:#333333 !important;margin-bottom:20px;">后端知识库</div>
<div style="font-size:14px;color:#666666 !important;">后端技术要点及自主研发java组件</div>
</div>
</a>
</div>
实用问题记录:
最近做了一个pdf转图片的插件,使用了使用pdf-dist插件,项目中使用没有任何问题,但在文档编辑时报错了。。。
看到这个错我第一时间就想到了是不是变量定义层级除了问题,两种办法:
一:由于是vuepress,可在docs/.vuepress/config.js中加入如下字段:
configureWebpack: {
node: {
global: true,
process: true,
Buffer: true
}
},
二、在polyfills.ts文件中加入(window as any).global = window: