Shulou(Shulou.com)06/02 Report--

How to understand vitepress and how to upgrade vuepress to vitepress, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can get something.

Before vue3, I believe you have used or heard of vuepress, it is a vue-based static website generator, can be used to write documents. For details, please see the official website of VuePress.

But now there's vue3, there's vite, and then there's a vitepress built on top of vite. (the motivation generated by vitepress can be found on the official website.)

Advantages of vitepress

Based on vite rather than webpack, all faster startup times, hot overloads, etc.

Using vue3 to reduce the payload of js

.vitepress / config.js

Vue3 is used to improve vitepress.

Uses vue3's improved template static analysis to serialize static content as much as possible

Vite is used

Faster dev service startup

Hot update faster

Build faster (using Rollup)

Lighter pages

Vue 3 Tree Shake + Rollup Code Separation

The metadata for all pages will not be sent in one request. When the client navigates, we get the components and metadata of the new page together.

Did not use vue-router

(WIP) i18n Localization data is requested as needed

Differences

Less vitepress configuration. The goal of vitepress is to subtract the complexity of the current vuepress and start again from the root of minimalism.

Is future-oriented: the target browser is a browser that only supports native ES module imports. Encourage the use of native js rather than escape and the use of css variables to subjectivize

Upgrade process

The vitepress used below is v0.20.0

1. Install vitepress

Npm install vitepress

It turns out that there must be a docs folder when using vuepress (if you don't have one, you can create one yourself).

2. Change the entry file to index.md

Note: the entry file of vuepress is docs/readme.md, while the entry file of vitepress is index.md, so the name of the original readme should be changed. If index.md has no other content, you can add some simple content.

-home: truetitle: home page lang: en-USheroText: BIFE document library tagline: this is your stage, looking forward to your wonderful actionText: Get StartedactionLink: / newcomer notes / first-dayfooter: MIT Licensed | Copyright ©2021-present CoolDream

3. Configure vitepress information

Create a .vitepress folder

Create a configuration file config.js under .vitepress

Add configuration information to config.js

Export default {base:'', / / the basic path of the project title: 'document', / / the title of the document will be displayed in description: 'front-end technical document', / / document description lastUpdated: 'last updated', / / string | boolean}

4. If you want to add the right navigation at the top, you can add it in themeConfig

Module.exports = {themeConfig: {/ / top right navigation nav: [{text: 'Home', link:' / first-day'}, {text: 'Components', link:' / test'},],}}

Note: navigation links in nav need to be consistent with the name of the linked file and case sensitive

5. Add left navigation, which is also added in themeConfig

Need to pay attention to

Links to vuepress are specific links in children, and the navigation name displayed is title in each .md file.

In vitepress's children, there is an array of objects, text represents the navigation name, and link is the real link.

If there are multiple routes, be sure to write the default route at the end

Module.exports = {themeConfig: {/ / sidebar sidebar: ['/ CHANGLOG': [{text: 'update log'}],'/': [{text: 'newcomers' notice' Children: [{text: 'first day', link:'/ first-day'}, {text: 'first week' Link:'/ first-week'}]}]],}}

6. Add scripts to package.json

"scripts": {"dev": "vitepress dev docs", "build": "vitepress build docs", "notice": "sh scripts/notice.sh"}

7. Uninstall vuepress

Problems encountered in npm uninstall vuepress upgrade do not take effect when multiple route switches

At first, the default route was written at the front, and it was found that the route was not updated when the route was switched, and it was still the default route. Later, it was found that the default route needed to be written at the end.

ThemeConfig: {/ / sidebar sidebar: {/ / other routes are in front of 'other-router': [], / / default routes are at the end' /': [{text: 'newcomers' Children: [{text: 'first day on the job' Children: [{text: 'computer'}]} table format in markdown (error will be reported when build)

You can't ask for spaces after the data type, and the number of rows reported is not correct at all, resulting in looking for problems for a long time), as shown in the following figure

The internal link path of the file must be .md or omitted, and cannot be another file type (error will be reported in build)

Vitepress will convert the last level path of the path to * .html (if it ends with /, go back to the index.md under the folder). If it is another file type, if * .txt, the file will not be found.

Links within markdown cannot contain Chinese (error will be reported when build)

If there is such a link format in markdown [Technology sharing] (/ Technology sharing / WebComponents/), an error will be reported during npm run build. The error message is shown in the figure below. Use the tag link at this time.

Links in markdown need http protocol (errors will be reported in build). Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.