搭建 Vite 2 + Vue 3 博客项目

2024-02-07 19:20:31

Vite 2 和 Vue 3 搭建现代化开源博客（上）：从零开始

在这个快速发展的数字时代，拥有一个高效而美观的博客对于内容创作者和个人品牌建设至关重要。Vite 2 和 Vue 3 的强强联合为我们提供了一种简便且功能强大的方式来构建这样的博客。在这篇教程系列的第一部分中，我们将带领大家从头开始构建一个开源博客，逐步介绍如何搭建项目。

1. 设置环境

首先，确保已安装 Node.js 和 npm。要创建新项目，请运行以下命令：

npx create-vite-app my-blog --template vue

2. 创建文件结构

接下来，让我们创建我们的博客文件结构：

src/components：包含博客组件（如导航栏、页脚等）
src/pages：包含博客页面（如主页、关于页等）
src/styles：包含博客样式表
public：包含网站的静态文件（如 favicon）

3. 安装依赖项

要使用 Vuex 管理状态，我们需要安装 Vuex：

npm install vuex

4. 创建 Vuex 存储

在 src/store 目录下创建一个名为 index.js 的文件，并添加以下代码：

import { createStore } from 'vuex'

const store = createStore({
  state: {
    // ...
  },
  getters: {
    // ...
  },
  mutations: {
    // ...
  },
  actions: {
    // ...
  }
})

export default store

5. 编写应用程序

在 src/App.vue 中，我们将创建博客应用程序：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { createRouter, createWebHistory } from 'vue-router'
import { store } from './store'

const router = createRouter({
  // ...
})

export default {
  router,
  store
}
</script>