VuePress30分钟制作一个Vue静态网站

ゞ浴缸里的玫瑰 2022-09-09 06:45 183阅读 0赞

## 1、vuepress新手入门课程（一） ##

### 1-1、vuepress简介与安装 ###

*  [`https://www.vuepress.cn/`][https_www.vuepress.cn]
 *  [`https://node.org/zh-ch`][https_node.org_zh-ch]
 *  `node -v`
 *  `npm config set registry=http://registry.npm.taobao.org`
 *  `npm config list`
 *  `npm install -g yarn` 安装yarn
 *  `npm init`
 *  `npm add -D vuepress`
 *  `mkdir docs && echo '# Hello VuePress' > docs/README.md`
 *      { 
          "name": "mao2022",
          "version": "1.0.0",
          "description": "",
          "main": "index.js",
          "scripts": { 
            "test": "echo \"Error: no test specified\" && exit 1"
          },
          "author": "",
          "license": "ISC",
          "devDependencies": { 
            "vuepress": "^1.8.2"
          },
          "scripts": { 
            "docs:dev": "vuepress dev docs",
            "docs:build": "vuepress build docs"
          }
        }
 *  `npm run docs:dev`

### 1-2、目录配置 ###

module.exports={ 
        title:"mao2022",
        description:"学习vuepress",
        head:[
            ['link',{ rel:"icon",href:"./logo.jpg"}]
        ]
    }

### 1-3、主题配置01 ###

module.exports={ 
        title:"mao2022",
        description:"学习vuepress",
        head:[
            ['link',{ rel:"icon",href:"./logo.png"}]
        ],
        themeConfig:{ 
            logo:"./logo.png",
            nav:[
                { text:'首页','link':'/'},
                { text:'前端','link':'/front/'},
                { text:'后端','link':'/after/'},
                { text:'CSDN','link':'https://blog.csdn.net/weixin_42148729'},
            ]
        }
    }

### 1-4、主题配置02 ###

module.exports={ 
        title:"mao2022",
        description:"学习vuepress",
        head:[
            ['link',{ rel:"icon",href:"./logo.png"}]
        ],
        themeConfig:{ 
            logo:"./logo.png",
            navbar: true,
            nav:[
                { text:'首页','link':'/'},
                { text:'前端','link':'/front/',items:[
                    { text:'Vuepress','link':'/vuepress/'},
                    { text:'HTML','link':'/html/'},
                    { text:'CSS','link':'/css/'},
                ]},
                { text:'后端','link':'/after/',items:[
                    { 
                        text:'理论知识',
                        items:[
                            { text:'PHP','link':'/php/'},
                            { text:'PHP插件','link':'/phplib/'}
                        ]
                    },{ 
                        text:'框架',
                        items:[
                            { text:'ThinkPHP','link':'/thinkphp/'},
                            { text:'Laravel','link':'/laravel/'}
                        ]
                    }
                ]},
                { text:'CSDN','link':'https://blog.csdn.net/weixin_42148729'},
            ],
            sidebar:[
                ['/','首页'],
                { 
                    title:'前端',
                    path:'/front/',
                    children:[
                        ['/vuepress/','Vuepress'],
                        ['/html/','HTML'],
                        ['/css/','CSS']
                    ]
                },
                
            ]
        },
    }

## 第2章 vuepress新手入门课程（二） ##

### 2-1、markdown语法01 ###

### 2-2、markdown语法02 ###

ID  | name
    :-- | :-:
    1   | bob

### 2-3、markdown拓展 ###

1、自定义容器

2、\`\`\`html \{9\}

![image-20210828150447852][]

3、emoji表情

:1234:
    :100:

![image-20210828152626446][]

## 第3章 vuepress新手入门课程（三） ##

### 3-1、更多配置01 ###

### 3-2、更多配置02 ###

## vuepress新手入门课程（四） ##

### 4-1、插件 ###

### 4-2、主题 ###

### 4-3、总结 ###

[https_www.vuepress.cn]: https://www.vuepress.cn/
[https_node.org_zh-ch]: https://nodejs.org/zh-cn
[image-20210828150447852]: /images/20220829/9491a2b1e6ff4ba1914e5f8c93aabdca.png
[image-20210828152626446]: /images/20220829/10c32e2e397e4a638ec3a5f5ca8d486e.png