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

news/2024/7/10 2:35:11 标签: vue

vuepress_0">1、vuepress新手入门课程(一)

vuepress_2">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']
                ]
            },
            
        ]
    },
}

vuepress_131">第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

vuepress_160">第3章 vuepress新手入门课程(三)

3-1、更多配置01

3-2、更多配置02

vuepress_166">vuepress新手入门课程(四)

4-1、插件

4-2、主题

4-3、总结


http://www.niftyadmin.cn/n/1385022.html

相关文章

crontab在一秒内刷新多次导致部分脚本不生效的问题分析

2019独角兽企业重金招聘Python工程师标准>>> 版权声明:本文由康中良原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/182 来源:腾云阁 https://www.qcloud.com/community 今天ob在几…

使用 CSS 追踪用户

原文地址:Crooked Style Sheets 作者:jbtronics 除了使用 JS 追踪用户,现在有人提出了还可以使用 CSS 进行网页追踪和分析,译者认为,这种方式更为 优雅,更为 简洁,且 不好屏蔽,值得…

为什么说HTML5还没到黄金开发时期?

HTML5是一门新技术能够允许开发者基于Web创建丰富的应用程序,适用于任何设备或标准的Web浏览器中。许多业界人士认为HTML5能够拯救Web,并且喧称基于本地开发平台应用已经过时。今年早些时候,就有文章报道称HTML5将取代本土应用,但…

多线程(初级篇)

相关概念 进程是指一个内存中运行的应用程序,每个进程都有自己独立的一块内存空间,一个进程中可以启动多个线程。 一个进程是一个独立的运行环境,它可以被看作一个程序或者一个应用。而线程是在进程中执行的一个任务。Java运行环境是一个包含…

flex弹性盒子布局(详细)

弹性盒模型 1、伸缩容器display Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 采用 Flex 布局的元素,称为 Flex 容器(flex container)&a…

FFT算法的物理意义

FFT是离散傅立叶变换的高速算法,能够将一个信号变换到频域。有些信号在时域上是非常难看出什么特征的,可是如果变换到频域之后,就非常easy看出特征了。这就是非常多信号分析採用FFT变换的原因。另外,FFT能够将一个信号的频谱提取出…

四、CLR执行程序集中代码和IL代码简介

三、加载公共语言运行时中介绍了在安装了.Net Framework中加载公共语言运行时,公共语言运行时加载程序集的过程.以及通过vs stdio设置源码编译的目标平台的过程. 本问主要介绍公共语言加载完程序集之后,执行程序集中的代码的过程. 一、IL中间语言 1、IL简介 一、源代码-面向CLR…

git上传成功记录(前面已配置好)

1、git init 2、git add . 3、git commit -m ‘1’ 4、git remote add origin gitgitee.com:xxxx/yyyy.git 5、git push -u origin main // 重新指定链接 git remote remove origin // main git branch -M main