Home > Article > Web Front-end > 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:
Responsive layout
Optional home page
A simple header search component
Customizable navigation bar and sidebar
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!