Many of you have already used VuePress, and VitePress is the next generation framework of VuePress, a web site framework that supports VUE 3.0.

Referred to as Vuepress’s brother in its documentation, contrast has some advantages:

  1. Based on theViteRather thanWebpackSo faster startup times, thermal reloads, etc
  2. useVue3To reduce theJSPayload of

create

  1. Create your own project directory
mkdir blog-vitepress
cd blog-vitepress
Copy the code
  1. Initialize thepackage.jsonTo installvitepress
npm init -y
npm i -D vitepress
Copy the code
  1. willvitepressExecute commands to add to execute scripts
"scripts": {
  "dev": "vitepress dev docs --open"."build": "vitepress build docs"."serve": "vitepress serve docs"
}
Copy the code
  1. Root directory creationdocsDirectory, create the first onemdFile (site home page configuration and content), you can command line live in the file manually created
mkdir docs
echo '# Hello World' > docs/index.md
Copy the code
  1. Start the project
npm run dev
Copy the code

Project configuration

Add some navigation to our website sidebar and navigation bar. To create a config file, create a.vitepress folder in Docs and create a config.js file

// vitepress/config.js
module.exports = {
  title: "My Blog".// Website title
  description: 'My VitePress blog.'.// Website description
  base: '/'.// The default path for deployment/Can use the secondary address /base/
  // lang: 'en-us ', // language
  // Page header configuration, import need icon, CSS, JS
  head: [
    // Change the title icon
    [
      'link',
      {
        rel: 'icon'.href: '/img/linktolink.png'.// Put the image in the public folder},]].// Theme configuration
  themeConfig: {
    repo: 'vuejs/vitepress'.// Your Github repository will jump to the top right corner of the page
    // Head navigation
    nav: [{text: 'home'.link: '/' },
      { text: 'about'.link: '/about/'},].// Side navigation
    sidebar: [{text: 'I'.link: '/mine/'}}}]Copy the code

Home page structure (you can also use normal Markdown format)

// docs/index.md
---
home: true
heroAlt: Logo image
heroText: Welcome!
tagline: Hero subtitle
actionText: Get Started
actionLink: /ts/basics
features:
  - title: Simplicity First
    details: Minimal setup with markdown-centered project structure helps you focus on writing.
  - title: Vue-Powered
    details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
  - title: Performant
    details: VitePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2019-present Evan You
---
Copy the code

The project structure

Vitepress │ ├ ─ ─ ─ docs │ │ │ ├ ─ ─ the vuepress │ │ └ ─ ─ config. Js │ ├ ─ ─ public │ ├ ─ ─ the about │ │ └ ─ ─ index. The md │ ├ ─ ─ mime │ │ └ ─ ─ └. Md └─ └Copy the code

Head navigation dropdown

nav: [
  {text: 'Front-end Technology'.items: [{text: 'TS'.link: '/ts/basics'.activeMatch: '^/ts/' },
    { text: 'vue'.link: '/skills/vue/'}}]].Copy the code

Header navigation and sidebar association

nav: [
  {text: 'Front-end Technology'.items: [{text: 'TS'.link: '/ts/basics'.activeMatch: '^/ts/' },
    { text: 'vue'.link: '/skills/vue/'}}]].sidebar: {
  '/ts/': getTsSidebar()
}

function getTsSidebar() {
  return[{text: 'Basics'.children: [{text: 'base'.link: '/ts/basics' }, // Link corresponds to the link in the header navigation. The access file is docs/ts/basics
        { text: 'Built-in type'.link: '/ts/inside-type'},]},]}Copy the code

Deployment of making pages

  1. indocs/.vitepress/config.jsSet the correct base in.
  • If you want to deploy tohttps://<USERNAME>.github.io/, can be omittedbaseBecause it defaults to"/".
  • If you are deploying tohttps://<USERNAME>.github.io/<REPO>/, for example, your repository is locatedgithub.com/<REPO>/And thenbaseSet to/<REPO>/

By default, the dist directory in vitepress will be placed under. Vitepress /dist/, and github Pages will be set up. Git push to repository, directly accessed via Github address, for reference only.

The code on

  1. The installationvitepress-theme-demoblockPlugin.Making the address
npm install -D vitepress-theme-demoblock
# or
yarn add -D vitepress-theme-demoblock
Copy the code
  1. configurationconfig.js
module.exports = {
  markdown: {
    config: (md) = > {
      const { demoBlockPlugin } = require('vitepress-theme-demoblock')
      md.use(demoBlockPlugin)
    }
  }
}
Copy the code
  1. Inject themes and plug-ins

In docs /. / index vitepress/theme. Write the following code in the ts, including the register – components. Js does not need to create your own, in the package. The injected script in json, The execution script is automatically generated in the docs/.vitepress/theme directory

"scripts": {
  "register:components": "vitepress-rc"
}
Copy the code

Execute NPM run register: Components

// docs/.vitepress/theme/index.ts

// Import the Vitepress-theme-Demoblock theme and register the components (including the default components in the theme).
import Theme from 'vitepress/dist/client/theme-default'

// Import theme styles
import 'vitepress-theme-demoblock/theme/styles/index.css'
// If you want to introduce your own global CSS file, you can also introduce it here

// Import the theme of the plug-in
import { registerComponents } from './register-components.js'

export default {
  ...Theme,
  enhanceApp({ app }) {
    registerComponents(app)
  }
}
Copy the code
  1. use

Component demo presentations can be generated automatically by using specific syntax wrap codes in the index.md file in the demo to be presented

<my-button style="color: # Button style=" # Button style="color: # Button style=" # Button style=" # Button style=" # Button style=" # Button style=" # Button style: Button 1</my-button> Middle </my-button type="size"> Button 2</my-button> Large <my-button> button 3</my-button> Disabled <my-button </my-button> </template> :::Copy the code

Vue syntax is supported by default. If you want to change it, you need to change the configuration:

md.use(demoBlockPlugin, {
  lang: 'ts'
})
Copy the code

However, there is a limitation here, intelligent recognition of a syntax structure, I think there will be JS, TS, JSON and other syntax, so I changed the parsing structure to array, you can see my writing method on Github.

Also just started to write, there are a lot of things to explore, if there are some things will be the first to share. Have a question of friends can leave a message exchange!

My blog address

Learning to address

  • Official document: Vitepress.vuejs.org/
  • Nuggets explanation: juejin.cn/post/696551…