webmeng-md-blog

Appearance

VitePress 快速入门 ​

一、项目初始化 ​

1. 创建并进入项目目录 ​

mkdir -p pj
cd pj

2.生成 package.json ​

npm init -y

二、VitePress 安装和初始化 ​

参考：https://vitepress.dev/zh/guide/getting-started

1. 安装 vitepress ​

bash
## 使用npm安装
npm install -D vitepress

## 使用pnpm安装
pnpm add -D vitepress

2.生成 vitepress 基础配置 ​

bash
npx vitepress init

## npx vitepress init 运行日志示例：
PS C:\Users\Administrator\Desktop> npx vitepress init

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./pj
│
◇  Site title:
│  李钟意讲前端官网
│
◇  Site description:
│  官网，electron-vlc，electron-screenshot vlc 音视频播放器，electron 截图，electron line 插件
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  No
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
└  Done! Now run npm run docs:dev and start writing.

3. 开发环境启动 ​

package.json 配置 start 命令

json
{
  "name": "ffffee",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "npm run docs:dev", 
    "docs:dev": "vitepress dev",
    "docs:build": "vitepress build",
    "docs:preview": "vitepress preview"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vitepress": "^1.3.4"
  }
}

开发环境启动，使用浏览器访问对应 url，查看是否正常

bash
npm start

4. 修改 .vitepress/config.mjs 配置文件，增加 outDir: "dist"、srcDir: "src"配置 ​

javascript
import { defineConfig } from 'vitepress'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "webmeng-md-blog",
  description: "使用本地node.js MK编辑器 + git + vite MK转html + 热铁盒自动部署",
  // base: '/dist/',
  outDir: "dist",
  srcDir: "src",
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Examples', link: '/markdown-examples' }
    ],

    sidebar: [
      {
        text: 'Markdown 入门',
        items: [
          { text: 'Markdown 入门示例', link: '/docs/Markdown入门/探索 Markdown 的奇妙世界.md' },
        ]
      },
      {
        text: 'Examples',
        items: [
          // { text: 'Markdown Examples', link: '/markdown-examples' },
          { text: 'Runtime API Examples', link: '/api-examples' },
        ]
      }
    ],

    socialLinks: [
      { icon: 'gitee', link: 'https://gitee.com/Zjxm/webmeng-mk-blog' }
    ]
  }
})

5. 创建 src 目录，移动 index.md、api-examples.md、markdown-examples.md到 src/目录下 ​

bash
mkdir -p src

src/index.md
src/api-examples.md
src/markdown-examples.md

6. 打包应用 ​

bash
npm run docs:build

三、VitePress 配置默认主题 ​

VitePress 官网：https://github.com/vuejs/vitepress

配置参考：https://github.com/vuejs/vitepress/blob/main/docs/.vitepress/config/zh.ts

四、VitePress 自定义 Vite 配置 ​

希望把 src/public/ 目录修改为与 src/ 目录同级别怎么做，这里就需要修改 vite 配置了

修改前目录：

    src/
      public/
        favicon-16x16.ico
        favicon-16x16.png
        favicon-32x32.png
        favicon-180x180.png
        logo.png

修改后目录：

    public/
      favicon-16x16.ico
      favicon-16x16.png
      favicon-32x32.png
      favicon-180x180.png
      logo.png
    src/

修改 .vitepress/config.mjs 添加一个 vite 配置项，配置内容如下

配置参考：https://cn.vitejs.dev/config/shared-options.html#publicdir

javascript
    import { defineConfig } from "vitepress";

    // https://vitepress.dev/reference/site-config
    export default defineConfig({
      title: "XXX官网",
      // ...
      vite: { 
        // https://cn.vitejs.dev/config/shared-options.html#publicdir
        publicDir: "../public", // 指定 public 目录路径
      },  
    });