如何快速上手Vuepress

Misenc · 2024 年4 月 13 日 15:18

前言

Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

准备阶段

服务器准备

推荐使用雨云作为服务器提供商，其是国内领先的云计算平台。使用优惠码 yhj 能获取优惠价格。

开发环境配置

在本地计算机上安装pnpm包管理器。
安装并设置好你喜欢的代码编辑器，例如VSCode或WebStorm。

安装与初始化Vuepress

创建新项目

在桌面上创建一个新文件夹作为项目目录，然后在终端里进入该目录。
使用pnpm安装Vuepress：
```
pnpm create vuepress@latest
```

初始化项目

Vuepress会引导您进行一系列配置，包括设置“网站名称”和“网站描述”。按提示操作即可。

项目结构与启动

初始化完成后，项目结构类似于：

.
├── docs/
│   ├── .vuepress/
│   │   ├── config.js   # Vuepress配置文件
│   │   └── ...
│   └── README.md       # 默认主页文档
├── package.json
└── ...

启动本地开发服务器

在项目根目录下运行以下命令启动开发服务器：

pnpm run docs:dev

这样将会启动一个本地开发服务器，实时预览网站内容。

自定义网站配置

站点标题与图标

在.vuepress/config.js中设置站点标题和图标：

export default defineUserConfig({
  lang: 'en-US',
  title: '名称',
  description: '描述',

若要设置更复杂的自定义logo，可以填写图片链接，并更新配置：

export default defineUserConfig({
  themeConfig: {
    logo: '图片链接',
  },
};

还有就是主页的大logo，我们需要再README.md文件里面更改：

---
home: true
title: Home
heroImage: 图片链接

导航链接

在.vuepress/config.js中配置导航栏链接：

export default defineUserConfig({
  theme: defaultTheme({
    navbar: [
      {
        text: '链接1',
        link: '/1',
      },
      {
        text: '链接2',
        link: '/2',
      },
      {
        text: '链接3',
        link: '/3',
      },
      {
        text: '链接4',
        link: '/4',
      },
    ],
  }),

主页布局与内容

在docs/README.md或特定的首页Markdown文件中设置主页内容：

---
home: true
title: 主页
heroImage: https://vuejs.press/images/hero.png
actions:
  - text: 按钮一
    link: /按钮一链接
    type: primary

  - text: 按钮二
    link: https://vuejs.press/guide/introduction.html
    type: secondary

features:
  - title: 板块一标题
    details: 板块一描述
  - title: 板块二标题
    details: 板块二描述
  - title: 板块三标题
    details: 板块三描述
  - title: 板块四标题
    details: 板块四描述
  - title: 板块五标题
    details: 板块五描述
  - title: 板块六标题
    details: 板块六描述
---

页脚信息

同样在.vuepress/README.md中配置页脚版权信息：

home: true
title: 主页
footer: Copyright © 2018-present 你的名称

最终效果展示，到这里就大功告成了，如果你想编辑其他内容可以看官方的文档

构建与部署

构建静态网站

构建生产环境可用的静态网站：

pnpm run docs:build

构建完成后，Vuepress会在docs/.vuepress/dist目录下生成静态HTML和其他资源文件。

部署到服务器

首先在雨云购买一台服务器，我这里拿美国二区的KVM入门版来演示，注册雨云使用我的优惠码 yhj 可以享受5折优惠

雨云支持一键安装宝塔面板，特别方便，然后打开面板

直接点击控制台的宝塔面板按钮，会弹出账号密码，即可进入

然后添加网站，php版本选择纯静态，输入自己的域名

然后在网站文件里面上传压缩好的dist文件即可，访问域名就可以查看效果了

重要提示：本教程提供的Vuepress搭建流程为简化的概述，实际操作时请参照Vuepress官方文档：https://cn.vuejs.org/ 获取最新和详细的指南。

–
原创文章，转载请标明来源
原文章：如何快速上手Vuepress | 茄子网