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

Posted 2021-09-15 前端杂货店

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

1-1、vuepress简介与安装

• https://www.vuepress.cn/

• 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}

3、emoji表情

:1234:
:100:

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

3-1、更多配置01

3-2、更多配置02

vuepress新手入门课程（四）

4-1、插件

4-2、主题

4-3、总结