vuePress项目搭建及配置

40 篇文章 2 订阅

参考链接1: https://www.cnblogs.com/softidea/p/10084946.html.
参考链接2: https://www.jianshu.com/p/2ac5727947cd.
demo代码地址:https://gitee.com/wk1255315430/vue-press-demo.git

搭建

  1. 创建项目文件夹
mkdir vuepressBlogDemo
  1. 全局安装 VuePress
// An highlighted block
npm install -g vuepress
  1. 进入 vuepressBlogDemo 文件夹,初始化项目
npm init -y
  1. 进入package.json,修改脚本内容
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
  1. 修改配置文件 - config.js
module.exports = {
    title: 'Hello VuePress',
    description: 'Hello, my friend!',
    head: [
        ['link', {
            rel: 'icon',
            href: `/favicon.ico`
        }]
    ],
    dest: './docs/.vuepress/dist',
    ga: '',
    evergreen: true,
    themeConfig: {
        nav: [
          { text: 'Home', link: '/' },
          { text: 'Guide', link: '/guide/' },
          {
            text: 'Languages',
            items: [
              { text: 'Chinese', link: '/Languages/chinese/' },
              { text: 'English', link: '/Languages/english/' }
            ]
          },
          { text: 'External', link: 'https://www.baidu.com' },
        ],
        sidebarDepth: 2,
        sidebar: [
        {
            title: 'Guide',
            collapsable: false,
            children: ['/guide/']
        },{
            title: 'Languages',
            collapsable: false,
            children: [ { title: "chinese", path: "/Languages/chinese/" },'/Languages/english/']

        }        
        ]
    }
}
  1. 创建文件夹和文件
    在 vuepressBlogDemo 文件夹中创建 docs 文件夹,在 docs 中创建 .vuepress 文件夹,在.vuepress中创建 public 文件夹和 config.js 文件,最终项目结构如下所示:
vuepressBlogDemo
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json
// An highlighted block
var foo = 'bar';
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值