使用 Vue3 + TypeScript + Vite 搭建博客
概述
在本文中，我将向你介绍如何使用Vue3、TypeScript和Vite搭建博客。作为一名经验丰富的开发者，我将通过以下步骤来帮助你实现这个目标：
- 创建一个新的Vite项目
- 安装Vue3和TypeScript
- 配置路由和页面
- 添加博客文章列表和详情页面
- 关联后端API
- 部署博客
步骤
下表展示了整个过程的步骤：
| 步骤 | 描述 |
|---|---|
| 1. 创建Vite项目 | 使用Vite快速创建一个新的项目 |
| 2. 安装Vue3和TypeScript | 添加Vue3和TypeScript的依赖 |
| 3. 配置路由和页面 | 设置路由并创建页面组件 |
| 4. 添加博客文章列表和详情页面 | 实现展示博客文章列表和详情页面的功能 |
| 5. 关联后端API | 与后端API进行交互，获取博客文章数据 |
| 6. 部署博客 | 将博客部署到服务器上 |
接下来，让我们一步一步地实现这些步骤。
1. 创建Vite项目
首先，我们需要使用Vite来快速创建一个新的项目。在命令行中执行以下命令：
npm init vite@latest my-blog --template vue-ts
这将创建一个名为my-blog的新项目，并使用Vue和TypeScript模板。
2. 安装Vue3和TypeScript
进入项目目录，并安装Vue3和TypeScript的依赖：
cd my-blog
npm install
3. 配置路由和页面
在src目录下创建一个views文件夹，用于存放页面组件。创建Home.vue和BlogDetail.vue两个文件。
在main.ts文件中，添加以下代码来配置路由：
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import BlogDetail from './views/BlogDetail.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/blog/:id', component: BlogDetail },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
createApp(App).use(router).mount('#app');
4. 添加博客文章列表和详情页面
在views文件夹下的Home.vue文件中，添加以下代码来展示博客文章列表：
<template>
<div>
博客文章列表
<ul>
<li v-for="blog in blogs" :key="blog.id">
<router-link :to="'/blog/' + blog.id">{{ blog.title }}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
blogs: [],
};
},
created() {
this.fetchBlogs();
},
methods: {
fetchBlogs() {
// 通过后端API获取博客文章列表数据
},
},
};
</script>
在views文件夹下的BlogDetail.vue文件中，添加以下代码来展示博客文章详情：
<template>
<div>
{{ blog.title }}
<p>{{ blog.content }}</p>
</div>
</template>
<script>
export default {
data() {
return {
blog: {},
};
},
created() {
this.fetchBlogDetail();
},
methods: {
fetchBlogDetail() {
// 通过后端API获取博客文章详情数据
},
},
};
</script>
5. 关联后端API
在以上代码中的fetchBlogs和fetchBlogDetail方法中，你需要调用后端API来获取博客文章列表和详情数据。可以使用Axios等HTTP库来实现这个功能。以下是一个示例：
import axios from 'axios';
methods: {
async fetchBlogs() {
try {
const response = await axios.get('/api/blogs');
this.blogs = response.data;
} catch (error) {
console.error(error);
}
