フロントエンドとバックエンドの学生が把握しなければならない技術ドキュメント(またはブログ)の構築

オープンソースプロジェクトやブログの文章を書き終わったら、それを表示するページがほしいですか?
図:
では始めましょう
vuepressを使用して構築
vuepress公式サイト
インストール運転
1.Yarnとnpm、Nodeを使用する.jsバージョン>=8.

npm install -g vuepress

2.プロジェクトディレクトリの作成

mkdir demo
cd demo

3.初期化項目

npm init -y

4.package.jsonに追加:

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

5.ドキュメントディレクトリとファイルを作成します.構造は次のとおりです.

demo
├─── docs
│   └── .vuepress   //     
│   │    ├── public //     
│   │    ├──── img
│   │    ├────── bg.ico //   
│   │    ├────── logo.jpg //   logo
│   │    └── config.js  // vuepress    
│   ├──    //   
│   │    ├── suibi //      
│   │    │      ├── test.md    //   
│   └── README.md   //     
└── package.json

6.運転

npm run dev

7.ブラウザアクセス:http://localhost:8080/ああ、効果が見えます.複数の図を配置します.
8.htmlを構築することもできます.

npm run build

9.config.jsファイルの例

module.exports = {
    title: 'hello',
    description: '  ',
    head: [ //          HTML      
      ['meta', { 'http-quiv': 'pragma', cotent: 'no-cache'}],
      ['meta', { 'http-quiv': 'pragma', cotent: 'no-cache,must-revalidate'}],
      ['meta', { 'http-quiv': 'expires', cotent: '0'}]
    ],
    serviceWorker: true, //      PWA
    base: '/', //    github     
    markdown: {
      lineNumbers: true //          
    },
    themeConfig: {
        lastUpdated: '   ',
        sidebarDepth: 3,
        displayAllHeaders: true,
        nav: [
            { text: '  ', link: 'http://www.kaka996.com' },
            {
              text: 'dnnmmp',
              items: [
                {
                  text: 'dnnmmp    ',
                  items: [
                    { text: '  ', link: '/dnnmmp_introduce/' },
                    { text: '  ', link: '/dnnmmp_install/' },
                    { text: '     ', link: '/dnnmmp_command/' },
                    { text: '  ', link: '/dnnmmp_log/' },
                    { text: '  ', link: '/dnnmmp_appendix/' },
                  ]
                }
              ]
            },
            {
              text: '    ',
              items: [
                { text: '    ', link: '/pages_about/' },
              ]
            }
          ],
        sidebar:{
            '/dnnmmp/': [
                {
                    title: '  ',
                    collapsable: false,
                    children: [
                    'introduce/  ',
                    ]
                },
                {
                    title: '  ',
                    collapsable: false,
                    children: [
                        'install/    ',
                        'install/    PHP',
                        'install/    Nodejs',
                        'install/    Mongodb',
                        'install/    Mysql',
                        'install/    Nginx',
                        'install/    Redis',
                        //'install/    go',
                    ]
                },
                {
                title: '     ',
                collapsable: false,
                children: [
                    'command/     ',
                ]
                },
                {
                title: '  ',
                collapsable: false,
                children: [
                    'log/  ',
                ]
                },
                {
                title: '  ',
                collapsable: false,
                children: [
                    'appendix/  ',
                ]
                }
            ]
        },
    }
  };

10.作者のウェブサイトの効果を閲覧する:http://blog.kaka996.com/