如何从零创建一个vuepress2.x项目

大家好我是图恩，这个周末体验了一下vuepress这个ssg静态内容生成框架，按照官网的教程从创建到运行步骤比较简单，但是官网的例子总感觉有些东西说的很模糊，代码并不能直接使用，以下为图恩整理并实际能运行的一些步骤供参考。

步骤 1: 创建并进入一个新目录

mkdir vuepress-starter
cd vuepress-starter

步骤 2: 初始化项目

git init
npm init

步骤 3: 将 VuePress 安装为本地依赖

npm install -D vuepress@next

步骤 4: 在 package.json 中添加一些 scripts

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

步骤 5: 将默认的临时目录和缓存目录添加到 .gitignore 文件中

echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore

步骤 6: 创建你的第一篇文档

mkdir docs
echo '# Hello VuePress' > docs/README.md

步骤 7: 在本地启动服务器来开发你的文档网站

npm run docs:dev

步骤 8.创建config.js，通过configjs设置站点标题跟导航菜单

import { defineUserConfig } from 'vuepress'
import { defaultTheme } from 'vuepress'

export default defineUserConfig({
  lang: 'zh-CN',
  title: 'www.dsiab.com',
  description: 'javascript技术分享',
  base: './',
  head: [
    ["link",{rel: "stylesheet",href:"/css/index.css"}]
  ],
  theme: defaultTheme({
    // 默认主题配置
    navbar: [
      {
        text: '首页',
        link: '/',
      },
    ],
    sidebar: [
      {
        text: 'birthday',
        link: '/post/birthday',
      },
    ]
  }),
})

目录如下

本文章由javascript技术分享原创和收集