正文

手把手教你用Vue3和VueXpress轻松搭建个性化博客网站

/0 浏览量
1029

在这个数字化时代，拥有一个个性化博客网站不仅可以展示你的才华，还能与他人分享知识。而Vue3和VueXpress则是构建现代化、高性能网站的理想选择。本文将带你一步步用Vue3和VueXpress搭建一个个性化的博客网站。

一、环境准备

在开始之前，确保你的电脑上已经安装了以下环境：

  1. Node.js: Vue3和VueXpress都是基于Node.js的，所以需要安装Node.js环境。
  2. npm: Node.js自带npm，用于安装和管理项目依赖。
  3. Visual Studio Code: 推荐使用VSCode进行开发，因为其拥有丰富的插件和良好的代码支持。

二、创建项目

  1. 初始化项目: 打开终端，输入以下命令创建一个新项目。
vue create blog-project

  1. 选择预设: 在选择预设时，选择Manually select features，这样你可以自由选择需要的功能。

  2. 安装依赖: 选择需要的功能后，继续安装依赖。

cd blog-project
npm install

三、安装VueXpress

  1. 安装VueXpress: 在项目中安装VueXpress。
npm install vuepress@next --save-dev
  1. 配置VueXpress: 在项目根目录下创建一个名为vuepress.config.js的文件，并配置如下内容。
const { defineUserConfig } = require('@vuepress/core');

module.exports = defineUserConfig({
  title: '我的博客',
  description: '一个个性化的博客网站',
  head: [
    ['link', { rel: 'icon', href: '/logo.png' }],
  ],
  theme: 'default',
  themeConfig: {
    logo: '/logo.png',
    nav: [
      { text: '首页', link: '/' },
      { text: '关于', link: '/about/' },
    ],
    sidebar: [
      '/',
      '/about/',
    ],
  },
});
  1. 启动项目: 在终端中运行以下命令启动项目。
npm run dev

现在，你的博客网站已经搭建完成了。你可以访问http://localhost:8080/查看效果。

四、个性化配置

  1. 修改主题: 在vuepress.config.js文件中，你可以修改theme配置项来更换主题。
theme: 'vuepress-theme-reco',
  1. 自定义侧边栏: 在vuepress.config.js文件中，你可以自定义侧边栏内容。
sidebar: {
  '/': [
    '',
    'about',
  ],
  '/about/': [
    '',
  ],
},
  1. 添加页面: 在项目根目录下创建一个名为src的文件夹，然后在其中创建你的页面。
mkdir src

在src文件夹中，你可以创建HTML文件、Markdown文件等来添加页面。

  1. 添加博客文章: 创建一个名为posts的文件夹，用于存放你的博客文章。
mkdir src/posts

在posts文件夹中，你可以创建Markdown文件来添加文章。

五、部署到GitHub Pages

  1. 配置GitHub Pages: 在GitHub上创建一个仓库，并配置GitHub Pages。

  2. 部署项目: 在终端中运行以下命令部署项目。

npm run deploy

现在，你的博客网站已经成功部署到GitHub Pages上了。你可以访问你的GitHub Pages网址查看效果。

总结

通过本文的教程，你已经学会了如何用Vue3和VueXpress搭建一个个性化的博客网站。你可以根据自己的需求对网站进行修改和优化。祝你在搭建博客网站的道路上越走越远！

-- 展开阅读全文 --