This time I will show you how to use VuePress to generate a static website, and what are the precautions for using VuePress to generate a static website. The following is a practical case, let's take a look.
What is VuePress
VuePress consists of two parts: a lightweight static website 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
SearchComponent
# 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:
How EL gets the context parameter value (with code)JS makes the left and right lists mutually Mobile effectDetailed explanation of the use of Vue custom dynamic componentsThe above is the detailed content of How to generate a static website using VuePress. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
