练习

# 练习页面

# 链接

输入

内部链接：
[快速上手](/zh/guide/start.md)
外部链接：
[GitHub](https://github.com/eastonyangxu/vuepress_template)

1
2
3
4

点击链接：快速上手 GitHub (opens new window)

官方案例

官方文档： [链接](https://v1.vuepress.vuejs.org/zh/guide/markdown.html#%E9%93%BE%E6%8E%A5)

# GitHub 风格表格

输入

| Tables        |      Are      |  Cool |
| ------------- | :-----------: | ----: |
| col 3 is      | right-aligned | $1600 |
| col 2 is      |   centered    |   $12 |
| zebra stripes |   are neat    |    $1 |

1
2
3
4
5

输出

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

# Emoji

输入

:tada: :100: :orange: :houses: :car: :boy: :clock3: :no_entry_sign:

输出
🎉 💯 🍊 🏘 🚗 👦 🕒 🚫

参考列表： [emoji列表](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.json)

# 目录

输入

[[toc]]

输出(本页的目录)

链接
GitHub 风格表格
Emoji
目录
Escaping
部署到 Github Pages
自定义 components

# Escaping

默认情况下，块级 (block) 的代码块将会被自动包裹在 v-pre 中。如果你想要在内联 (inline) 的代码块或者普通文本中显示原始的大括号，或者一些 Vue 特定的语法，你需要使用自定义容器 v-pre 来包裹:
输入

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

1
2
3

输出

{{ This will be displayed as-is }}

# 部署到 Github Pages

传送门

GitHub Pages 部署 (opens new window)

# 自定义 components

输入

demo.vue

<style scoped lang="css">
  h1 {
    color: red;
    font-size: 20px;
  }
</style>

<template>
  <h1>这是我第一个自定义的components</h1>
</template>

<script>
  export default {
    name: "demo",
  };
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用 componnets：

<demo/>

输出

这是我第一个自定义的components

上次更新: 2023/05/12, 16:53:30

← ps常用快捷键