Vuepress博客搭建教程

Vuepress博客搭建教程

vuepress搭建博客地址

环境搭建

安装node

#官网下载node.js
https://nodejs.org/zh-cn/
#下载好了自带npm
#cmd窗口查看npm及node是否安装成功  出现版本信息说明成功
node -v
npm -v
#更换npm为淘宝源
npm config set registry https://registry.npm.taobao.org
#查看是否更换成功
npm config get registry

打开vuepress官网

#创建一个项目目录
mkdir vuepressDemo
cd vuepressDemo
# 将 VuePress 作为一个本地依赖安装
npm install -D vuepress
# 新建一个 docs 文件夹
mkdir docs
# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md

 # 在package.json加入下面内容
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }

配置下npm启动下看看

#vuepress目录结构
.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

继承主题开发

大概目录结构

#config.js导航配置
module.exports = {
    title: '凉城博客',
    head: [
        ['link', {rel: 'icon', href: '/img/logo.png'}]
    ],
    themeConfig: {
        logo: '/img/logo.png',
        nav: [
            {text: '首页', link: '/'},
            {text: '时间线', link: '/timeline/'},  #timeline对应文件夹名称
            {text: '技术',link:'/technology/'},
            {text: '标签库',link:'/tags/'},
            {text: '工具',link: '/tool/'},
            {text: '关于我',link: '/about/'},
            { text: '链接',
                items: [
                    {text:'CSDN',link: 'https://blog.csdn.net/hzxiaochu' },
                    {text:'码云',link: 'https://gitee.com/liangchengjava' },
                ]
            }
        ]

    }
};

官方主题继承

#index.js中配置继承
module.exports = {
  extend: '@vuepress/theme-default'
}

引入element

官方说明

我们在这个文件中引入element

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

export default ({
  Vue,
}) => {
  // ...做一些其他的应用级别的优化
  Vue.use(Element);
}

#你可以使用vuepress原始主题来修改
#将原主题文件eject
# vuepress eject [targetDir] 这个命令来将默认主题的源码复制出来
vuepress eject old

原主题的组件

配置md文件frontmatter

拿取frontmatter数据

官方文档获取全局计算属性

本博客源码地址

博客地址