VuePress generates website

This time I will bring you VuePress to generate a website. What are the precautions for VuePress to generate a website? The following is a practical case, let’s take a look.

What is VuePress

VuePress consists of two parts: a lightweight static website generator based on Vue, and a default theme optimized for writing technical documentation. It was created to meet the needs of Vue's own subproject documentation.

VuePress provides preloaded HTML for every page generated by it, which not only has excellent loading speed, but is also very friendly to SEO. Once the page is loaded, Vue takes over all static content, turning it into a complete SPA application. Other pages will also be loaded on demand when the user uses navigation to enter.

How VuePress works

A VuePress application is actually based on Vue, VueRouter and webpack. If you have used vue before, then when you use VuePress When developing or customizing your own theme, you will find that the experience is almost the same ~ you can even use Vue DevTools to debug your customized theme!

During the build process, VuePress will render the relevant HTML by creating a server-side rendered version and accessing each route. This approach is inspired by Nuxt's nuxt generate command, and other projects such as Gatsby.

Each markdown file is compiled into HTML and then processed as a template for a Vue component. This way you can use Vue directly in markdown files, which is very useful when you need to embed dynamic content.

VuePress features

• The built-in markdown extension is specially optimized for technical documents

• Can be used in markdown Use vue directly in the file

• vue-driven customizable painting theme

• Support PWA - Progressive Web App (Progressive Web App)

• Integrated Google Analytics

• A default VuePress includes:

1. Responsive layout

2. Optional home page

3. A simple header search component

4. Customizable navigation bar and sidebar

5. Auto-generated GitHub link and page editing link

VuePress Enjoy the Vue webpack development environment, in Use Vue components in markdown and develop custom themes through Vue. VuePress provides preloaded html for every page generated by it, which not only has excellent loading speed, but is also very friendly to SEO. Once the page is loaded, Vue takes over all static content, turning it into a complete SPA application. Other pages will also be loaded on demand when the user uses navigation to enter.

# install
npm install -g vuepress
# create a markdown file
echo '# Hello VuePress' > README.md
# start writing
vuepress dev
# build to static files
vuepress build

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Progressbar component practical case analysis

What are the loop traversal instructions in vue

The above is the detailed content of VuePress generates website. For more information, please follow other related articles on the PHP Chinese website!