Behind the wave of vue3.0, uvu quietly released vite1.0.beta. Vite is built for the future. It uses es Module for module import, eliminating build process. This can be a huge boon for large projects. Here I will tell you how I used VitePress step by step and how I handled the problems I encountered.

Vitevuu is a rollup-compatible UI framework for vitePress docs

vite

Vite uses the ES Module for module import, which is natively supported by modern browsers. When a module is imported, a request is made, and because of this, the ES Module can only be used in services. The request will be re-sent when the module path of import changes, including query.

vitepress

The installation

  • Step 1: Create a directory
    mkdir vitepress-starter && cd vitepress-starter
Copy the code
  • Step 2: VitePress preferred recommended useyarnCreate a package management tool for initialization
    yarn init
Copy the code
  • Step 3: Install VitePress locally
    yarn add --dev vitepress
Copy the code
  • Step 4: Create your first document
    mkdir docs && echo '# Hello VitePress' > docs/index.md
Copy the code
  • Step 5: Givepackage.jsonAdding related commands
    {
      "scripts": {
        "docs:dev": "vitepress dev docs"."docs:build": "vitepress build docs"."docs:serve": "vitepress serve docs"}}Copy the code
  • Step 6: Run VitePress locally

At this point we can check it out by opening http://localhost:3000/

    yarn docs:dev
Copy the code

The directory structure

Here is the directory structure I wrote

├ ─ ─. Vitepress │ ├ ─ ─ config. Js │ └ ─ ─ theme │ ├ ─ ─ components │ │ └ ─ ─ contentmenu. Vue │ ├ ─ ─ index. The js │ └ ─ ─ style.css. Less ├ ─ ─ │ ├─ ├─ ├─ ├.md │ ├─ ├.md │ ├─ ├.md │ ├─ ├.md │ └ ─ ─ the md ├ ─ ─ docs. The md ├ ─ ─ index. The md ├ ─ ─ tags. The md └ ─ ─ vuu ├ ─ ─ any. The md ├ ─ ─ index. The md └ ─ ─ the mdCopy the code

Vitepress configuration

./vitepress/config.js, the configuration shown below is based on my own development requirements. Click to view the document generated by VitePress. I will not talk about the basic configuration, but mainly share the configuration of the sidebar

module.exports = {
  head: [['meta',
      {
        name: 'viewport'.content:
          'width = device - width, initial - scale = 1, minimum - scale = 1.0, the maximum - scale = 1.0, user - scalable = no',}], ['meta', { name: 'keywords'.content: 'vite vui' }],
    ['link', { rel: 'icon'.href: '/favicon.ico'}]].title: 'Vite vui'.base: '/vite-vui-docs/'.themeConfig: {
    search: true.sidebar: {
      '/': [{text: 'vui'.children: [{text: 'introduction'.link: '/' },
            { text: 'log'.link: '/components/log' },
            { text: 'Button'.link: '/components/button/' },
            { text: 'Layout'.link: '/components/layout/' },
            { text: 'contextmenu'.link: '/components/contextmenu/'},],}, {text: 'vuu'.children: [{text: 'introduction'.link: '/vuu/' },
            { text: 'log'.link: '/vuu/log' },
            { text: 'A function'.link: '/vuu/any'},],},],},author: 'bhabgs'.nav: [{text: 'home'.link: '/' },
      { text: 'classification'.link: '/tags'},],},dest: 'public'};Copy the code

sidebar

Sidebar is used to configure the sidebar. Siderbar and Vuepress have similar configuration. There are some problems when using it mainly on Link. When the connection under the folder of. / components/layout/index. The need to use/components/layout/md, if the connection is layout, md, so the link need written/components/layout

The problem

This section mainly records the related problems encountered in the process of using VitePress.

  1. You will get the following error if your UI tool has a v-* user – defined directive that is used in. Md or vue components in VitePress. Vue provides a solution to install the patchpatch-vue-directive-ssrCan solve the problemYou can click to view the cause of the problemThis will not be a problem after vitePress 1.0 is released.

custom directive is missing corresponding SSR transform and will be ignored.,

*** issues continue to be updated

The construction plan of Vitevui and Vitevuu will also be shared with you in subsequent articles