DEV Community

Alex Wei
Alex Wei

Posted on • Updated on

Quickly make a website with the same style as the Vue official website

Quick Start

Run the following command in your command line:

npm init @quick-start/docs
Enter fullscreen mode Exit fullscreen mode

This command will install and execute create-docs, the scaffolding tool. You will be presented with prompts for a number of optional features such as theme and TypeScript support:

✔ Project name: … <my-docs>
✔ Select a theme: › vue
✔ Add TypeScript? … No / Yes

Scaffolding project in ./<my-docs>...
Done.
Enter fullscreen mode Exit fullscreen mode

Once the project is created, follow the instructions to install dependencies and start the dev server:

> cd <my-docs>
> npm install
> npm run dev
Enter fullscreen mode Exit fullscreen mode

The project structure:

.
├──.vitepress
│  ├──theme
│  │  └──index.ts
│  └──index.ts
├──.vscode
├──docs
│  ├──public
│  │  └──...
│  ├──...
│  └──index.md
├──.editorconfig
├──.prettierrc.yaml
├──env.d.ts
├──package.json
└──tsconfig.json
Enter fullscreen mode Exit fullscreen mode

Screenshots

The same style as the Vue official website:

Image description

Drak mode:

Image description

Responsive:

Image description

Powered

VitePress

Why is VitePress?

  • Faster dev server start
  • Faster hot updates
  • Faster build (uses Rollup internally)

VitePress-Theme-Vue

VitePress theme base on @vue/theme, more practical and comprehensive.

  • Remove hard-coded, make it easy to use
  • Refine style, more nice
  • Support deploying under nested public path(with base)
  • Home page support
  • More practical components

VitePress-Theme-Vue Github:

https://github.com/alex8088/vitepress-theme-vue

VitePress-Theme-Vue Guide:

https://alex8088.github.io/vitepress-theme-vue/

End

The the scaffolding tool create-docs github:

https://github.com/alex8088/quick-start/tree/master/packages/create-docs

Discussion (0)