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

Posted 2022-12-05 互联网小队

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、总结