Getting Started
Prerequisites
TIP
- With pnpmopen in new window, you need to set
shamefully-hoist=truein your.npmrcopen in new window file. - With yarn 2open in new window, you need to set
nodeLinker: 'node-modules'in your.yarnrc.ymlopen in new window file.
Manual Installation
This section will help you build a basic VuePress documentation site from ground up. If you already have an existing project and would like to keep documentation inside the project, start from Step 3.
- Step 1: Create and change into a new directory
mkdir vuepress-starter
cd vuepress-starter
1
2
2
- Step 2: Initialize your project
git init
yarn init
1
2
2
git init
npm init
1
2
2
- Step 3: Install VuePress locally
yarn add -D vuepress@next
1
npm install -D vuepress@next
1
- Step 4: Add some scriptsopen in new window to
package.json
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
1
2
3
4
5
6
2
3
4
5
6
- Step 5: Add the default temp and cache directory to
.gitignorefile
echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore
1
2
3
2
3
- Step 6: Create your first document
mkdir docs
echo '# Hello VuePress' > docs/README.md
1
2
2
- Step 7: Serve the documentation site in the local server
yarn docs:dev
1
npm run docs:dev
1
VuePress will start a hot-reloading development server at http://localhost:8080open in new window. When you modify your markdown files, the content in the browser will be auto updated.
By now, you should have a basic but functional VuePress documentation site. Next, learn about the basics of configuration in VuePress.