vuepress is a brand new static website generator based on vue released by Youdada on April 12. It is actually a Vue spa application with built-in webpack and can be used to write documents. I happened to have to write documents for some components recently, so I started to do it. After all, I just released it and encountered many pitfalls, but it finally started running through bumps. In order to avoid everyone stepping on the same pitfalls, I specially recorded the construction process and shared it.
Here are a few known issues
Because it was introduced after node 8.0, if you don't want to waste three hours like me, pleaseView and update the node version
It is recommended not to use webpack-simple templates for experimentation, otherwise it will not run in various ways ╮(╯▽╰)╭
If you use the cli template, TypeError: Cannot read property 'vue' of undefined is because the version of vueloader built-in webpack used by vuepress is different from your local one. Please update the local version to the stable latest version
When the official document is deployed, it keeps jumping to 404, please use the hash mode of the route to access it
If you encounter port conflicts and other problems, create a new .vuepress folder in the docs directory, and then create a new config configuration file to configure the prot port item. For details, please refer toOfficial Documentation
Get started
Create a new webpack template project using cli
//Input the project first install the dependency npm install //Replace the vue-loader with the version to keep it consistent with the vue-loader in the webpack built in vuepress, otherwise an error will be reported (but You Dada is already resolving the issue of version conflict, and the version is ready to be released) npm update [email protected] --save-dev //Next install vuepress npm install -D vuepress mkdir docs echo "# Hello VuePress!" > docs/ //In the last step, start vuepress, enter the docs directory, and use the vuepress dev command cd docs vuepress dev //Use vuepress build to complete the project packaging //The next step is to create various websites according to the official documents
For project deployment, I am using github. Please refer to the specific operation.Official Documentation
Sample website
github address
The remaining theme configuration is OK according to the configuration of the official document. I will not go into details here.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.