Skip to content

如何快速上手Vuepress

pFjO6gK.png

前言

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

准备阶段

服务器准备

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

开发环境配置

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

安装与初始化Vuepress

创建新项目

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

初始化项目

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

pFjLH0J.png

项目结构与启动

初始化完成后,项目结构类似于:

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

启动本地开发服务器

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

sh
pnpm run docs:dev

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

自定义网站配置

站点标题与图标

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

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

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

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

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

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

导航链接

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

javascript
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文件中设置主页内容:

yaml
---
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中配置页脚版权信息:

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

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

pFjXBqg.png

构建与部署

构建静态网站

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

sh
pnpm run docs:build

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

pFjOAht.png

部署到服务器

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

pFjYigs.png

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

pFjYeET.png

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

pFjYn5F.png

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

pFjYKC4.png

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

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

--
原创文章,转载请标明来源