vuepress quickly build a static website

1. vuepress what is?
Http://caibaojian.com/vuepress/guide/  official document says very clearly, vuePress especially the rain the river is another masterpiece
here to build tutorials, for faster, feel vuepress what kind of things What effect.

2. Create a new name for the demo folder after installation (node version 8.0 to be more)

npm install -g vuepress // global installation, vuepress 
npm the init -y // fast initialization, this will generate a demo folder below package.json

 

 

3. Run the configuration script

Package.json configuration, scripts there are options, the following two lines of code will be added to the list on the line

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

4. In the demo folder, then create a new docs folder, enter the docs folder, create a new README.md file, write a little text in there!
The file is a directory

demo
+--docs
+----README.md
+--package.json

5. Do we just insert script commands
npm run docs: dev // run this command, you view the site, the contents of which we have just written content in README.md
npm run docs: build // execute the command, packaged dist file, generates .vuepress folder
that the directory structure

Demo 
+ - docs 
. vuepress + ---- 
+ ------ dist file after the package folder // 
+ ---- README.md 
+ - package.json 
+ - node_modules

6. Create a file in .vuepress below congfig.js

= {module.exports 
  title: 'Adroi Media API interface document', // set the site title 
  Description: 'Adroi', 
  Base: '/ V1 / adroi-H5 / adroiapi /', 
  themeConfig: { 
    NAV: [ 
        {text: ' interface definition ', Link:' / apiword '}, 
        {text:' Interface field definition ', Link:' / API '}, 
        {text:' Appendix: error code ', Link:' / error '} 
    ], 
    sidebarDepth: 2 
  } 
}

7. Run npm run docs: dev, look at the effect it! ! !



Guess you like

Origin www.cnblogs.com/tengyuxin/p/11124304.html