满洲里做网站电商软文广告经典案例

---

🟢VitePress

VitePress 是一个静态站点生成器 (SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。最初的 VuePress 基于 Vue 2 和 webpack。借助 Vue 3 和 Vite，VitePress 提供了更好的开发体验、更好的生产性能、更精美的默认主题和更灵活的自定义 API。
VitePress官网
VuePress官网

使用 markdown、HTML、CSS、JavaScript、Vue 编写搭建自己的知识库

• 使用 Markdown 轻松创建文档知识库
• vite 即使预览，网页自动发生变化
• 内置代码高亮、实时编码等功能
• 使用 Windi Css 设置样式
• 使用 MDC 组件，用 vue 做出好看的效果
• 内置对 LaTex 数学公式的支持
• 能直接使用前端图标库
• 能够导出 PDF、静态 HTML 文件

🟢1、VitePress快速上手

• vitepress 是一个静态站点生成器，英文名为 SSG (Static Site Generation)。与它类似的还有 yuepress、hexo，python 语言也有 shpinx、mkdocs 之类的工具，react 也有 docusaurus。这些工具找到一个适合自己的才是最好的！
• 但是在这么多的工具里面，vitepress 是上手成本最低的，也是配置最简单的(需要会JavaScript)，界面也很漂亮，有适配移动端。只要写 markdown 文件与 javascript 配置文件，就可以快速搭建器一个网站。
• vitepress 考虑到用户可能会需要定制化，所以提供了很多的接口与插槽，如果会用 vue 开发项目，就可以自己改。并且可以使用tai1wind css、 elements-plus 等框架，使用起来非常方便。

1.1、项目创建

操作笔记参考官网文档:https://vitepress.dev/zh/guide/what-is-vitepress
创建目录

mkdir vitepress-tutorial
cd vitepress-tutoral

安装依赖

npm add -D vitepress
或者
yarn add -D vitepress

初始化项目

pnpm vitepress init
或者
yarn vitepress init

按照问题填一下即可

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config? 
│  ./docs
│
◇  Where should VitePress look for your markdown files?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
◇  Add a prefix for VitePress npm scripts?
│  Yes
│
◇  Prefix for VitePress npm scripts:
│  docs
│
└  Done! Now run pnpm run docs:dev and start writing.

项目目录结构

├─ docs
│  ├─ .vitepress # 当前目录所在的位置就是文档的根目录
│  │  └─ config.js # 项目的配置文件，最重要
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

运行启动脚本

npm run docs:dev
或
yarn docs:dev

打开本地

1.2、路由

VitePress 使用基于文件的路由，这意味着生成的 HTML 页面是从源 Markdown 文件的目录结构映射而来的。

.
├─ guide
│  ├─ getting-started.md
│  └─ index.md
├─ index.md
└─ prologue.md

生成的 HTML 页面会是这样：

.
index.md                  -->  /index.html (可以通过 / 访问)
prologue.md               -->  /prologue.html
guide/index.md            -->  /guide/index.html (可以通过 /guide/ 访问)
guide/getting-started.md  -->  /guide/getting-started.html

生成的 HTML 可以托管在任何支持静态文件的 Web 服务器上。

1.3、路由配置介绍

import { defineConfig } from 'vitepress'// https://vitepress.dev/reference/site-config
export default defineConfig({title: "My Awesome Project",  //项目标题description: "A VitePress Site", //项目描述themeConfig: {// https://vitepress.dev/reference/default-theme-config// 导航栏nav: [{ text: '首页', link: '/' },{ text: '笔记', link: '/notes/' },{ text: 'examples', link: '/markdown-examples' }],// 目录sidebar: {'/notes': [{ text: 'notes1', link: '/notes/notes1' },{ text: 'notes2', link: '/notes/notes2' },]},// sidebar: [//   {//     text: 'Examples',//     items: [//       { text: 'Markdown Examples', link: '/markdown-examples' },//       { text: 'Runtime API Examples', link: '/api-examples' }//     ]//   }// ],//社交链接socialLinks: [{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }]}
})

基本上，你配置好这些内容，个人的静态博客就搭好了，其余按需参考官方配置文档就可以了

✒️总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见