Mistj's Digital Garden

Appearance

3. 自定义组件

如何在markdown中使用Vue ​

在vitepress环境中，每个md文件都会编译为html，然后渲染成单文件组件 Vue Single-File Component. 这意味着可以在md文件中直接使用vue的特性（dynamic templating,、Vue components、use arbitrary in-page Vue component logic by adding a <script> tag)

值得注意的是，VitePress利用Vue的编译器自动检测和优化Markdown内容中的纯静态部分。静态内容被优化为单个占位符节点，并从页面的JavaScript有效载荷中消除以便于初始访问。它们也在客户端激活 (client-side hydration) 期间被忽略。简而言之，在任何给定页面上，您只需关心动态部分。

直接使用vue模板语法,无需引入其他内容：

js
<span v-for="i in 3">{{ i }} <br></span>  
{{ 1 + 99999991 }}
<span v-for="i in 3">{{ i }} <br></span>  
{{ 1 + 99999991 }}

script 和 style 标签 ​

Markdown 文件中的根级 <script> 和 <style> 标签的工作方式与 Vue SFC 中的标签相同，包括 <script setup>、<style module> 等。

主要区别:

  • 是没有 <template> 标签：所有其他的根级内容都是 Markdown。
  • 还要注意的是，所有标签都应该在前置frontmatter(---文件开头内容)之后放置
js
<script setup>  
import { ref } from 'vue';  
  
const count = ref(0)  
</script>  
  
## Markdown Content  
  
The count is: {{ count }}  
  
<button :class="$style.button" @click="count++">Increment</button>  
  
<style module>  
.button {  
  color: red;  
  font-weight: bold;  
}  
</style>
<script setup>  
import { ref } from 'vue';  
  
const count = ref(0)  
</script>  
  
## Markdown Content  
  
The count is: {{ count }}  
  
<button :class="$style.button" @click="count++">Increment</button>  
  
<style module>  
.button {  
  color: red;  
  font-weight: bold;  
}  
</style>

注意事项：

  • 尽量减少使用 <style scoped>，当前页面中的每个元素添加特殊的属性，这将显著增加页面的大小。如果需要本地范围的样式，建议使用<style module>

我们可以通过VuePress的runtime api获取一些信息，例如 userData

js
<script setup>
import { useData } from 'vitepress'

const { page } = useData()
</script>

<pre>{{ page }}</pre>
<script setup>
import { useData } from 'vitepress'

const { page } = useData()
</script>

<pre>{{ page }}</pre>

输出结果为：

js
{
  "path": "/using-vue.html",
  "title": "Using Vue in Markdown",
  "frontmatter": {},
  ...
}
{
  "path": "/using-vue.html",
  "title": "Using Vue in Markdown",
  "frontmatter": {},
  ...
}

使用组件 ​

可以直接引入组件。 尽量不注册全局组件。

js
<script setup>
import CustomComponent from '../components/CustomComponent.vue'
</script>

# Docs

This is a .md using a custom component

<CustomComponent />

## More docs

...
<script setup>
import CustomComponent from '../components/CustomComponent.vue'
</script>

# Docs

This is a .md using a custom component

<CustomComponent />

## More docs

...

Escaping ​

防止渲染

  • 使用span标签,配合 v-pre
  • 段落可以使用 :::v-pre
vue
This <span v-pre>{{ will be displayed as-is }}</span>

::: v-pre
{{ This will be displayed as-is }}
:::
This <span v-pre>{{ will be displayed as-is }}</span>

::: v-pre
{{ This will be displayed as-is }}
:::

代码块中的Unescape：使用 js-vue,模板语法就会在代码块中渲染。

css 预处理 ​

不需要为它们安装Vite特定的插件，但必须安装相应的预处理器本身。

# .scss and .sass
npm install -D sass

# .less
npm install -D less

# .styl and .stylus
npm install -D stylus
# .scss and .sass
npm install -D sass

# .less
npm install -D less

# .styl and .stylus
npm install -D stylus

使用：

css
<style lang="sass">
.title
  font-size: 20px
</style>
<style lang="sass">
.title
  font-size: 20px
</style>

参考文档 ​

关于Vue SFCs:
指的是Vue的单文件组件，即将组件的HTML、CSS和JS代码打包到同一个文件中。SFCs在Vue项目中非常常见，它可以让组件的模板、样式和逻辑更加清晰、易于维护。通过使用SFCs，我们可以更方便地重用组件，提高代码的可读性和可扩展性。

参考：

Using Vue in Markdown | VitePress