Vue3：VitePress

Nephilim 2024-06-27

Tips：一些记录，一些笔记

2024/06/27

THURSDAY

Looking angrily condemned to refer, head bowed as a willing ox.

横眉冷对千夫指，俯首甘为孺子牛。

VitePress

官方网站：

https://vitepress.dev/zh/guide/getting-started

安装

通过PNPM安装「vitepress」

pnpm add -D vitepress

具体如下：

(base) adamhuan@Leviathan visible-abyss_Leviathan % pnpm add -D vitepress
 WARN  deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
 WARN  34 deprecated subdependencies found: @babel/plugin-proposal-class-properties@7.18.6, @babel/plugin-proposal-nullish-coalescing-operator@7.18.6, @babel/plugin-proposal-optional-chaining@7.21.0, @npmcli/move-file@1.1.2, @npmcli/move-file@2.0.1, @stylelint/postcss-css-in-js@0.37.3, @stylelint/postcss-markdown@0.36.2, apollo-datasource@3.3.2, apollo-reporting-protobuf@3.4.0, apollo-server-env@4.2.1, apollo-server-errors@3.3.1, apollo-server-plugin-base@3.7.2, apollo-server-types@3.8.0, chokidar@2.1.8, coffee-script@1.12.7, consolidate@0.14.5, core-js@2.6.12, date-format@0.0.0, debuglog@1.0.1, fsevents@1.2.13, har-validator@5.1.5, log4js@1.1.1, popper.js@1.16.1, readdir-scoped-modules@1.1.0, request@2.88.2, resolve-url@0.2.1, shortid@2.2.16, source-map-resolve@0.5.3, source-map-url@0.4.1, streamroller@0.4.1, subscriptions-transport-ws@0.11.0, urix@0.1.0, uuid@3.4.0, vue@2.7.16
Packages: +217 -159
+++++++++++++++++++++++++++++++++++++++++++++---------------------------------
Progress: resolved 2718, reused 2622, downloaded 26, added 215, done
node_modules/.pnpm/vue-demi@0.14.7_vue@3.4.26_typescript@5.4.5_/node_modules/vue-demi: Running postinstall script...
node_modules/.pnpm/vue-demi@0.14.7_vue@3.4.26_typescript@5.4.5_/node_modules/vuenode_modules/.pnpm/vue-demi@0.14.8_vue@3.4.30_typescript@5.4.5_/node_modules/vue-demi: Running postinstall script, done in 114ms
 WARN  Failed to create bin at Users/adamhuan/node_modules/.bin/node. ENOENT: no such file or directory, open '/Users/adamhuan/node_modules/node/bin/node'


devDependencies:
+ vitepress 1.2.3


 WARN  Issues with peer dependencies found
.
└─┬ @vue/cli-init 5.0.8
  └─┬ vue-cli 2.9.6
    └─┬ consolidate 0.14.5
      ├── ✕ unmet peer react-dom@^16.13.1: found 18.3.1
      └── ✕ unmet peer react@^16.13.1: found 18.3.1


Done in 10.3s
(base) adamhuan@Leviathan visible-abyss_Leviathan %

安装引导：

(base) adamhuan@Leviathan visible-abyss-vitepress % pwd
/Users/adamhuan/visible-abyss_Leviathan/visible-abyss-vitepress
(base) adamhuan@Leviathan visible-abyss-vitepress % 
(base) adamhuan@Leviathan visible-abyss-vitepress % ls -ltr
total 0
(base) adamhuan@Leviathan visible-abyss-vitepress % 
(base) adamhuan@Leviathan visible-abyss-vitepress % npx vitepress init


┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./
│
◇  Site title:
│  Visible Abyss
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
└  Done! Now run npm run docs:dev and start writing.


(base) adamhuan@Leviathan visible-abyss-vitepress % 
(base) adamhuan@Leviathan visible-abyss-vitepress % ls -ltra
total 32
drwxr-xr-x  7 adamhuan  staff   224  6 27 22:09 ..
-rw-r--r--  1 adamhuan  staff   614  6 27 22:14 index.md
-rw-r--r--  1 adamhuan  staff   907  6 27 22:14 api-examples.md
-rw-r--r--  1 adamhuan  staff  1055  6 27 22:14 markdown-examples.md
drwxr-xr-x  3 adamhuan  staff    96  6 27 22:14 .vitepress
drwxr-xr-x  7 adamhuan  staff   224  6 27 22:14 .
-rw-r--r--  1 adamhuan  staff   132  6 27 22:14 package.json
(base) adamhuan@Leviathan visible-abyss-vitepress %

运行：

(base) adamhuan@Leviathan visible-abyss-vitepress % npm run docs:dev


> docs:dev
> vitepress dev




  vitepress v1.2.3


  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

浏览器查看：http://localhost:5173/

文件结构

文件结构：

(base) adamhuan@Leviathan visible-abyss-vitepress % tree -a ./
./
├── .vitepress
│   ├── cache
│   │   └── deps
│   │       ├── @theme_index.js
│   │       ├── @theme_index.js.map
│   │       ├── _metadata.json
│   │       ├── chunk-3MXPZ6H6.js
│   │       ├── chunk-3MXPZ6H6.js.map
│   │       ├── chunk-UEXYYPHJ.js
│   │       ├── chunk-UEXYYPHJ.js.map
│   │       ├── package.json
│   │       ├── vitepress___@vue_devtools-api.js
│   │       ├── vitepress___@vue_devtools-api.js.map
│   │       ├── vitepress___@vueuse_core.js
│   │       ├── vitepress___@vueuse_core.js.map
│   │       ├── vue.js
│   │       └── vue.js.map
│   └── config.mts
├── api-examples.md
├── index.md
├── markdown-examples.md
└── package.json


4 directories, 19 files
(base) adamhuan@Leviathan visible-abyss-vitepress %

具体如下：

.vitepress	VitePress配置文件、开发服务器缓存、构建输出和可选主题自定义代码
.vitepress/cache	开发服务器缓存存储的位置
.vitepress/dist	生产构建输出存储的位置
.vitepress/config	配置文件

配置文件

配置文件：.vitepress/config

(base) adamhuan@Leviathan visible-abyss-vitepress % cat .vitepress/config.mts 
import { defineConfig } from 'vitepress'


// https://vitepress.dev/reference/site-config
export default defineConfig({
  base: "/",
  title: "Visible Abyss",
  description: "A VitePress Site",
  lang: 'zh-CN',
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: 'Home', link: '/docs/' },
      { text: 'Examples', link: '/docs/markdown-examples' }
    ],


    sidebar: [
      {
        text: 'Examples',
        items: [
          { text: 'Markdown Examples', link: '/docs/markdown-examples' },
          { text: 'Runtime API Examples', link: '/docs/api-examples' }
        ]
      }
    ],


    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
    ]
  }
})
(base) adamhuan@Leviathan visible-abyss-vitepress %

END

温馨提示

如果你喜欢本文，请分享到朋友圈，想要获得更多信息，请关注我。

vue

文章转载自Nephilim，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

Vue3：VitePress

评论