正文
13 - Vue3 UI Framework - 完善官网
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
为了提升用户体验，今天我们来对
jeremy-ui官网做一个优化返回阅读列表点击 这里
Markdown 解析支持 ️
习惯用 markdown 语法编辑，所以我们增加项目源码对 markdown 的支持，虽然即便这样做依然无法和 JeremyPress 或者 VuePress 相比，但是至少不用纠结于原生 html 了，能够在一定程度上解决排版问题。
我们需要增加一个 plugins 文件夹，并且在此文件夹下创建一个 md.ts 的文件，代码如下：
import path from 'path'
import fs from 'fs'
import marked from 'marked'
const mdToJs = str => {
const content = JSON.stringify(marked(str))
return `export default ${content}`
}export function md() {
return {
configureServer: [
async ({ app }) => {
app.use(async (ctx, next) => {
if (ctx.path.endsWith('.md')) {
ctx.type = 'js'
const filePath = path.join(process.cwd(), ctx.path)
ctx.body = mdToJs(fs.readFileSync(filePath).toString())
} else {
await next()
}
})
},
],
transforms: [{
test: context => context.path.endsWith('.md'),
transform: ({ code }) => mdToJs(code)
}]
}
}
应该看到，这里我们需要依赖 marked 这个 npm 库，运行项目之前，需要先安装一下：
npm install marked --save
另外，我们还需要在项目的根目录下创建 vite.config.ts 文件，并对 markdown 插件做一下配置：
import { md } from "./plugins/md";export default {
plugins: [md()],
};
GitHub Markdown 样式支持
我们可以使用 github-markdown-css 这个库来获取样式表
npm install github-markdown-css --save
安装完成后，在 main.ts 中引入
import 'github-markdown-css'
最后，我们对 Guidance.vue 做下配置以便 markdown 文件以及 markdown 样式能够在项目中被正确的解析：
<template>
<article class="markdown-body" v-html="md"></article>
</template>
<script>
import { ref } from "vue";
export default {
props: {
path: {
type: String,
required: true,
},
},
setup(props) {
const md = ref(null);
import(`../markdown/${props.path}.md`).then(
(res) => (md.value = res.default)
);
return { md };
},
};
</script>
代码展示
参考 ElementUI 手册，我们发现不仅展示了组件，还会给出例子所使用的代码，我们也在官网中增加查看代码的功能。
我们可以在 vite 初始化的时候配置，即在 vite.config.ts 文件中做配置：
// @ts-nocheck
import { md } from "./plugins/md";
import fs from 'fs'
import { baseParse } from '@vue/compiler-core'export default {
base: '/',//指定打包后文件的默认引用路径
assetsDir: 'assets',
plugins: [md()],
vueCustomBlockTransforms: {
example: (options) => {
const { code, path } = options
const file = fs.readFileSync(path).toString()
const parsed = baseParse(file).children.find(n => n.tag === 'example')
const title = parsed.children[0].content
const main = file.split(parsed.loc.source).join('').trim()
return `export default function (Component) {
Component.__sourceCode = ${JSON.stringify(main)
}
Component.__sourceCodeTitle = ${JSON.stringify(title)}
}`.trim()
}
}
};
注意
这里我们通过
// @ts-nocheck注释，来忽略静态报错
代码高亮显示支持 ️
我们可以用 prismjs 库来获得代码高亮，先安装
npm install prismjs --save
然后，再在需要使用的地方，分别引入 prismjs 和 prismjs/themes/prism.css，即可开始使用
prismjs 的工作原理，是构造一个对象，并绑定到 window 上，所以在模板中使用的时候，需要先获取 window.Prism，再在 setup 中 return 出去。Prism 对象的常见用例如下：
Prism.highlight(
[sourceCode],
Prism.languages.html,
'html'
)
该对象上提供一个名为 highlight 的方法，该方法要求传入 3 个参数，按顺序分别如下
- 源代码
- 作为代码进行解析
- 作为代码进行显示（渲染）
最后，我们再在 Content.vue 文件中配置 Prism 以便内容中涉及到代码的部分都能被高亮的显示：
<template>
<h1>{{ title }}</h1>
<br />
<div
class="container"
v-for="({ ...component }, index) in components"
:key="index"
>
<jeremy-card class="example">
<h2>{{ component.__sourceCodeTitle }}</h2>
<br />
<component :is="component" />
<br />
<br />
<code class="markdown-body">
<pre
v-if="visibility[index]"
v-html="
Prism.highlight(
component.__sourceCode,
Prism.languages.html,
'html'
)
"
></pre>
</code> <button class="toggle" @click="toggle(index)">
<span class="close" v-if="visibility[index]">
△
<span class="desp">隐藏代码</span>
</span>
<span class="open" v-else>
▽
<span class="desp">显示代码</span>
</span>
</button>
</jeremy-card>
<br />
</div>
<jeremy-table bordered>
<thead>
<tr>
<th v-for="(head, index) in heads" :key="index">{{ head.name }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(attribute, index) in attributes" :key="index">
<td v-for="key in keys" :key="key" v-html="attribute[key]"></td>
</tr>
</tbody>
</jeremy-table>
</template><script lang="ts">
import JeremyButtons from "../components/contents/Button";
import JeremyCards from "../components/contents/Card";
import JeremyDialogs from "../components/contents/Dialog";
import JeremyInputs from "../components/contents/Input";
import JeremySwitchs from "../components/contents/Switch";
import JeremyTables from "../components/contents/Table";
import JeremyTabss from "../components/contents/Tabs";import { ref } from "vue";
import { JeremyCard, JeremyTable } from "jeremy-ui"
import "prismjs";const Prism = (window as any).Prism;const JeremyMap = {
Button: JeremyButtons,
Card: JeremyCards,
Dialog: JeremyDialogs,
Input: JeremyInputs,
Switch: JeremySwitchs,
Table: JeremyTables,
Tabs: JeremyTabss,
};export default {
props: {
name: {
type: String,
required: true,
},
title: {
type: String,
required: true,
},
},
components: {
JeremyCard,
JeremyTable,
},
setup(props) {
const { name, title } = props;
const heads = [
{ name: "参数", identifier: "attr" },
{ name: "含义", identifier: "desp" },
{ name: "类型", identifier: "type" },
{ name: "可选值", identifier: "values" },
{ name: "默认值", identifier: "default" },
];
const keys = heads.map((item: any) => item.identifier); const { components, attributes } = JeremyMap[name];
const visibility = ref(components.map((item) => false));
const toggle = (index) => {
visibility.value[index] = !visibility.value[index];
};
return {
title,
Prism,
heads,
keys,
components,
attributes,
visibility,
toggle,
};
},
};
</script>
另外，我们还需要在 main.ts 中引入代码样式：
import "prismjs/themes/prism-solarizedlight.css"
注意
样式可以根据自己的喜好进行选择，我这里选的是
prism-solarizedlight除此之外，查看
prism主题包可以看到其他的样式哦
展开/关闭代码
通过一个开关事件去控制代码的显示和隐藏
需要在 Content.vue 文件中配置一下：
<button class="toggle" @click="toggle(index)">
<span class="close" v-if="visibility[index]"> △
<span class="desp">隐藏代码</span>
</span>
<span class="open" v-else>
▽
<span class="desp">显示代码</span>
</span>
</button>
修改 UI 引用路径
官网的 UI 框架引用改成来自 npm ，这样能够更好的提升用户体验。先安装：
npm install jeremy-ui --save
再在 main.ts 中引用样式表：
import 'jeremy-ui/lib/jeremy.css'
最后，修改每个例子中的引用即可。
效果展示
项目地址
GitHub: https://github.com/JeremyWu917/jeremy-ui
官网地址
JeremyUI: https://ui.jeremywu.top
感谢阅读
