Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: support latest theme #39

Merged
merged 1 commit into from
Sep 23, 2024
Merged

docs: support latest theme #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 6 additions & 10 deletions docs/guide/bundler.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ VuePress supports using [Webpack](https://webpack.js.org/) or [Vite](https://vit

When installing the [vuepress](https://www.npmjs.com/package/vuepress) package, no bundlers will be installed. You need to choose a bundler to install.

<CodeGroup>
<CodeGroupItem title="pnpm" active>
::: code-tabs#shell

@tab pnpm

```bash
# install vite bundler
Expand All @@ -16,9 +17,7 @@ pnpm add -D vuepress@next @vuepress/bundler-vite@next
pnpm add -D vuepress@next @vuepress/bundler-webpack@next
```

</CodeGroupItem>

<CodeGroupItem title="yarn">
@tab yarn

```bash
# install vite bundler
Expand All @@ -27,9 +26,7 @@ yarn add -D vuepress@next @vuepress/bundler-vite@next
yarn add -D vuepress@next @vuepress/bundler-webpack@next
```

</CodeGroupItem>

<CodeGroupItem title="npm">
@tab npm

```bash
# install vite bundler
Expand All @@ -38,8 +35,7 @@ npm install -D vuepress@next @vuepress/bundler-vite@next
npm install -D vuepress@next @vuepress/bundler-webpack@next
```

</CodeGroupItem>
</CodeGroup>
:::

## Use a Bundler

Expand Down
80 changes: 30 additions & 50 deletions docs/guide/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,31 +28,27 @@ You can try VuePress directly in your browser on [StackBlitz](https://stackblitz

You can use [create-vuepress](https://www.npmjs.com/package/create-vuepress) to generate a template directly.

<CodeGroup>
<CodeGroupItem title="pnpm" active>
::: code-tabs#shell

@tab pnpm

```bash
pnpm create vuepress vuepress-starter
```

</CodeGroupItem>

<CodeGroupItem title="yarn">
@tab yarn

```bash
yarn create vuepress vuepress-starter
```

</CodeGroupItem>

<CodeGroupItem title="npm">
@tab npm

```bash
npm init vuepress vuepress-starter
```

</CodeGroupItem>
</CodeGroup>
:::

#### Setup Manually

Expand All @@ -67,39 +63,36 @@ cd vuepress-starter

- Initialize your project

<CodeGroup>
<CodeGroupItem title="pnpm" active>
::: code-tabs#shell

@tab pnpm

```bash
git init
pnpm init
```

</CodeGroupItem>

<CodeGroupItem title="yarn">
@tab yarn

```bash
git init
yarn init
```

</CodeGroupItem>

<CodeGroupItem title="npm">
@tab npm

```bash
git init
npm init
```

</CodeGroupItem>
</CodeGroup>
:::

- Install VuePress

<CodeGroup>
<CodeGroupItem title="pnpm" active>
::: code-tabs#shell

@tab pnpm

```bash
# install vuepress and vue
Expand All @@ -108,9 +101,7 @@ pnpm add -D vuepress@next vue
pnpm add -D @vuepress/bundler-vite@next @vuepress/theme-default@next
```

</CodeGroupItem>

<CodeGroupItem title="yarn">
@tab yarn

```bash
# install vuepress
Expand All @@ -119,9 +110,7 @@ yarn add -D vuepress@next
yarn add -D @vuepress/bundler-vite@next @vuepress/theme-default@next
```

</CodeGroupItem>

<CodeGroupItem title="npm">
@tab npm

```bash
# install vuepress
Expand All @@ -130,8 +119,7 @@ npm install -D vuepress@next
npm install -D @vuepress/bundler-vite@next @vuepress/theme-default@next
```

</CodeGroupItem>
</CodeGroup>
:::

- Create `docs` directory and `docs/.vuepress` directory

Expand Down Expand Up @@ -205,63 +193,55 @@ You can add some [scripts](https://classic.yarnpkg.com/en/docs/package-json#toc-

Then, run `docs:dev` script to start the dev server:

<CodeGroup>
<CodeGroupItem title="pnpm" active>
::: code-tabs#shell

@tab pnpm

```bash
pnpm docs:dev
```

</CodeGroupItem>

<CodeGroupItem title="yarn">
@tab yarn

```bash
yarn docs:dev
```

</CodeGroupItem>

<CodeGroupItem title="npm">
@tab npm

```bash
npm run docs:dev
```

</CodeGroupItem>
</CodeGroup>
:::

VuePress will start a hot-reloading development server at [http://localhost:8080](http://localhost:8080). When you modify your markdown files, the content in the browser will be auto updated.

### Build Your Site

To build your site, run `docs:build` script:

<CodeGroup>
<CodeGroupItem title="pnpm" active>
::: code-tabs#shell

@tab pnpm

```bash
pnpm docs:build
```

</CodeGroupItem>

<CodeGroupItem title="yarn">
@tab yarn

```bash
yarn docs:build
```

</CodeGroupItem>

<CodeGroupItem title="npm">
@tab npm

```bash
npm run docs:build
```

</CodeGroupItem>
</CodeGroup>
:::

You will see the generated static files in the `docs/.vuepress/dist` directory. You can check out [deployment](./deployment.md) for how to deploy them.

Expand Down
7 changes: 5 additions & 2 deletions docs/guide/markdown.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -501,5 +501,8 @@ If you want to use those tags anyway, try either of the following workarounds:

- Adding a [v-pre](https://vuejs.org/api/built-in-directives.html#v-pre) directive to skip the compilation of the element and its children. Notice that the template syntax would also be invalid.
- Using [compilerOptions.isCustomElement](https://vuejs.org/api/application.html#app-config-compileroptions) to tell Vue template compiler not try to resolve them as components.
- For `@bundler-webpack`, set [vue.compilerOptions](../reference/bundler/webpack.md#vue)
- For `@bundler-vite`, set [vuePluginOptions.template.compilerOptions](../reference/bundler/vite.md#vuepluginoptions)
- For `@vuepress/bundler-webpack`, set [vue.compilerOptions](../reference/bundler/webpack.md#vue)
- For `@vuepress/bundler-vite`, set [vuePluginOptions.template.compilerOptions](../reference/bundler/vite.md#vuepluginoptions)

[prismjs]: https://ecosystem.vuejs.press/plugins/markdown/prismjs.html
[shiki]: https://ecosystem.vuejs.press/plugins/markdown/shiki.html
2 changes: 1 addition & 1 deletion docs/guide/migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,7 @@ Removed.

#### Built-in Components

- `<CodeGroup />` and `<CodeBlock />` renamed to `<CodeGroup />` and `<CodeGroupItem />`
- `<CodeGroup />` and `<CodeBlock />` are replaced by [code tab feature](https://ecosystem.vuejs.press/themes/default/markdown.html#code-tabs)
- `<Badge />`
- `$badgeErrorColor` palette variable renamed to `$badgeDangerColor`
- `type` prop only accepts `tip`, `warning` and `danger` now
Expand Down
16 changes: 6 additions & 10 deletions docs/zh/guide/bundler.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ VuePress 支持使用 [Vite](https://vitejs.dev/) 或 [Webpack](https://webpack.

在安装 [vuepress](https://www.npmjs.com/package/vuepress) 包时，并不会自动安装打包工具，你需要选择并安装一个打包工具。

<CodeGroup>
<CodeGroupItem title="pnpm" active>
::: code-tabs#shell

@tab pnpm

```bash
# 安装 vite 打包工具
Expand All @@ -16,9 +17,7 @@ pnpm add -D vuepress@next @vuepress/bundler-vite@next
pnpm add -D vuepress@next @vuepress/bundler-webpack@next
```

</CodeGroupItem>

<CodeGroupItem title="yarn">
@tab yarn

```bash
# 安装 vite 打包工具
Expand All @@ -27,9 +26,7 @@ yarn add -D vuepress@next @vuepress/bundler-vite@next
yarn add -D vuepress@next @vuepress/bundler-webpack@next
```

</CodeGroupItem>

<CodeGroupItem title="npm">
@tab npm

```bash
# 安装 vite 打包工具
Expand All @@ -38,8 +35,7 @@ npm install -D vuepress@next @vuepress/bundler-vite@next
npm install -D vuepress@next @vuepress/bundler-webpack@next
```

</CodeGroupItem>
</CodeGroup>
:::

## 使用打包工具

Expand Down
Loading