正文

Vue3+Express轻松搭建全栈项目，实战教程让你快速入门

/0 浏览量
0806

引言

随着前端技术的发展，全栈开发越来越受到开发者的青睐。Vue3作为当前最流行的前端框架之一，加上Express作为后端解决方案，能够帮助开发者快速搭建全栈项目。本文将为你提供一份详细的实战教程，让你轻松入门Vue3+Express全栈开发。

一、环境准备

1. 安装Node.js

首先，确保你的计算机上安装了Node.js。你可以从Node.js官网下载安装程序，并按照提示完成安装。

2. 安装Vue CLI

Vue CLI是Vue官方提供的一个脚手架工具，用于快速搭建Vue项目。打开命令行窗口，执行以下命令安装：

npm install -g @vue/cli

3. 安装Express

Express是一个基于Node.js的Web应用框架，用于搭建后端服务器。同样，使用npm进行安装：

npm install express --save

二、创建Vue3项目

1. 创建项目

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

vue create vue3-express

按照提示选择预设或手动配置项目结构。

2. 安装Vue Router

Vue Router是Vue官方的路由管理器，用于构建单页面应用。在项目中安装：

npm install vue-router --save

3. 配置路由

在项目中创建src/router/index.js文件，配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 添加其他路由
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

4. 使用路由

在src/App.vue中引入路由，并使用<router-view></router-view>组件展示路由内容：

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

<script>
import router from './router'

export default {
  name: 'App',
  router
}
</script>

三、搭建Express服务器

1. 创建服务器

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

const express = require('express')
const app = express()

app.get('/', (req, res) => {
  res.send('Hello, Vue3+Express!')
})

app.listen(3000, () => {
  console.log('Server is running on port 3000')
})

2. 集成Vue应用

使用express的static中间件，将Vue应用打包后的文件放在服务器目录下，例如public：

app.use(express.static('public'))

3. 启动服务器

在命令行窗口运行以下命令启动服务器：

node server.js

四、实战案例

以下是一个简单的Vue3+Express全栈项目实战案例：

  1. 在Vue项目中创建一个名为User的组件，用于展示用户信息。
  2. 在Express服务器中创建一个API接口，用于获取用户数据。
  3. 在Vue应用中使用axios请求Express服务器中的API接口，并展示用户信息。

1. 创建User组件

在src/views目录下创建User.vue文件，并编写以下代码：

<template>
  <div>
    <h1>User Information</h1>
    <p>Name: {{ userInfo.name }}</p>
    <p>Age: {{ userInfo.age }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      userInfo: {}
    }
  },
  created() {
    this.fetchUserInfo()
  },
  methods: {
    fetchUserInfo() {
      axios.get('/api/user')
        .then(response => {
          this.userInfo = response.data
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

2. 创建API接口

在server.js中添加以下API接口：

app.get('/api/user', (req, res) => {
  res.json({ name: 'Alice', age: 25 })
})

3. 使用User组件

在src/router/index.js中添加路由：

{
  path: '/user',
  name: 'User',
  component: () => import('../views/User.vue')
}

在src/App.vue中添加导航链接：

<router-link to="/user">User</router-link>

现在，当你访问http://localhost:3000/user时，就可以看到用户信息了。

结语

通过本文的实战教程，你已经可以轻松搭建一个Vue3+Express全栈项目。在实际开发中，你可以根据自己的需求，不断完善和扩展项目功能。祝你学习愉快！

-- 展开阅读全文 --