正文

Vue3与Express框架轻松对接指南：实战案例教你高效构建Web应用

/0 浏览量
0806

在当今的Web开发领域，Vue3和Express是两个非常流行的技术栈。Vue3是一个用于构建用户界面的渐进式JavaScript框架，而Express则是一个轻量级的Node.js Web应用框架。将它们结合起来，可以让你快速搭建出一个功能丰富且性能优越的Web应用。本文将带你详细了解如何轻松对接Vue3与Express框架，并通过实战案例展示如何高效构建Web应用。

第1章：准备工作

在开始之前，你需要确保你的开发环境已经搭建好。以下是所需的基本工具：

  • Node.js：Express框架是基于Node.js开发的，因此你需要安装Node.js环境。
  • npm（Node Package Manager）：用于管理项目中的依赖包。
  • Vue CLI：用于快速搭建Vue项目。

安装Node.js和npm

你可以从Node.js官网下载并安装Node.js。安装完成后，打开命令行工具，输入以下命令检查是否安装成功：

node -v
npm -v

安装Vue CLI

在命令行工具中，运行以下命令安装Vue CLI：

npm install -g @vue/cli

第2章：创建Express项目

初始化项目

使用Vue CLI创建一个Express项目：

vue create express-vue-app

安装Express依赖

进入项目目录，安装Express框架和相关依赖：

cd express-vue-app
npm install express

配置项目

在项目根目录下，创建一个名为server.js的文件，并编写以下代码：

const express = require('express');
const path = require('path');

const app = express();

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 路由处理
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

// 监听端口
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

第3章：创建Vue3项目

初始化项目

在项目根目录下，创建一个名为client的文件夹，并使用Vue CLI创建一个Vue3项目：

cd client
vue create vue3-app

配置项目

在vue3-app项目根目录下，修改public/index.html文件，将<title>标签中的内容修改为你的项目名称。

第4章：对接Vue3与Express

修改Express配置

在server.js文件中，修改app.use(express.static(path.join(__dirname, 'public')))这一行，将其修改为：

app.use(express.static(path.join(__dirname, 'client/dist')));

这样，Express会从Vue3项目的dist文件夹中提供静态文件。

运行项目

在命令行工具中，分别运行以下命令：

cd client
npm run serve

cd ..
node server.js

现在，你应该能够在浏览器中访问http://localhost:3000来查看你的Vue3应用了。

第5章：实战案例

以下是一个简单的实战案例，展示如何使用Vue3和Express构建一个简单的博客应用。

步骤1：创建博客模型

在client/src/models文件夹下，创建一个名为Blog.js的文件，并编写以下代码：

export default class Blog {
  constructor(id, title, content) {
    this.id = id;
    this.title = title;
    this.content = content;
  }
}

步骤2：创建博客服务

在client/src/services文件夹下，创建一个名为BlogService.js的文件，并编写以下代码：

import Blog from '../models/Blog';

const blogs = [
  new Blog(1, '我的第一篇博客', '这是我的第一篇博客内容。'),
  new Blog(2, '我的第二篇博客', '这是我的第二篇博客内容。')
];

export const getBlogs = () => blogs;
export const addBlog = (title, content) => {
  const id = blogs.length + 1;
  blogs.push(new Blog(id, title, content));
};

步骤3：创建博客组件

在client/src/components文件夹下，创建一个名为BlogList.vue的文件，并编写以下代码：

<template>
  <div>
    <h1>博客列表</h1>
    <ul>
      <li v-for="blog in blogs" :key="blog.id">
        <h2>{{ blog.title }}</h2>
        <p>{{ blog.content }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { getBlogs } from '../services/BlogService';

export default {
  data() {
    return {
      blogs: getBlogs()
    };
  }
};
</script>

步骤4：修改路由

在client/src/router/index.js文件中，修改routes数组，添加以下路由：

{
  path: '/blog',
  name: 'BlogList',
  component: () => import('../components/BlogList.vue')
}

步骤5：运行项目

现在，你应该能够在浏览器中访问http://localhost:3000/blog来查看你的博客列表了。

总结

通过本文，你学会了如何轻松对接Vue3与Express框架，并通过实战案例展示了如何高效构建Web应用。希望这些知识能帮助你更好地进行Web开发。

-- 展开阅读全文 --