VuePress 指南
大约 1 分钟
VuePress2 的使用指南。
1. 将一篇 MarkDown 文章视为 Vue SFC
每一个 MarkDown 文章都会被编译为 Vue SFC(单文件组件),因此可以借助 TypeScript 直接编写动态网页。
---
title: 测试
date: 2023-01-03
---
_你好, {{ msg }}_
<RedDiv>
_当前计数为: {{ count }}_
</RedDiv>
<button @click="count++">点我!</button>
<script setup>
import { h, ref } from 'vue'
const RedDiv = (_, ctx) => h(
'div',
{
class: 'red-div',
},
ctx.slots.default()
)
const msg = 'Markdown 中的 Vue'
const count = ref(0)
</script>
<style scoped>
.red-div {
color: red;
}
</style>
2. 自定义组件
VuePress2 支持自定义组件,这依赖 客户端配置 实现,新建 .vuepress/client.ts
开始配置:
import { defineClientConfig } from '@vuepress/client'
import MyComponent from './components/MyComponent.vue'
export default defineClientConfig({
enhance({ app }) {
app.component('MyComponent', MyComponent)
}
})
新建 .vuepress/components/MyComponent.vue
组件:
<script setup lang="ts">
const props = defineProps<{
title: string
url: string
content: string
}>()
</script>
<template>
<h2>MyComponent</h2>
<p>{{ props.title }}</p>
<p>{{ props.url }}</p>
<p>{{ props.content }}</p>
</template>
<style scoped lang="scss">
h2 {
color: red;
}
</style>
VuePress2 默认包含 SCSS 依赖,如果需要 Less 需要自行安装引入。
这样,此组件就会被全局导入,在任意文章下使用 MyComponent
组件即可:
<MyComponent
title="hello"
url="https://blog.alexsun.top/"
content="Hello VuePress!"
></MyComponent>
3. 使用 Webpack 打包
VuePress 支持使用 Webpack 打包,依赖示例如下:
{
"name": "vuepress-webpack-test",
"version": "1.0.0",
"description": "test webpack",
"main": "index.js",
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"docs:build:webpack": "vuepress-webpack build docs",
"docs:clean-dev": "vuepress dev docs --clean-cache",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@vuepress/client": "2.0.0-beta.61",
"sass-loader": "^13.2.0",
"vue": "^3.2.47",
"vuepress": "2.0.0-beta.61",
"vuepress-plugin-md-enhance": "2.0.0-beta.189",
"vuepress-webpack": "2.0.0-beta.61",
"webpack": "5.0.0"
}
}