正文

从零开始搭建Vue.js+Node.js项目，轻松入门全栈开发步骤解析

/0 浏览量
0511

在数字化时代，全栈开发变得越来越受欢迎，因为它允许开发者掌握前端和后端开发的技能。Vue.js 和 Node.js 是目前非常流行的前端和后端框架。本篇文章将带领你从零开始，一步步搭建一个 Vue.js + Node.js 的全栈项目。

1. 环境准备

1.1 安装 Node.js

首先，你需要安装 Node.js，它是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。你可以从 Node.js 官网 下载适合你操作系统的安装包，然后按照提示进行安装。

1.2 安装 Vue CLI

Vue CLI 是一个官方提供的前端项目脚手架，可以帮助你快速搭建 Vue 项目。在安装 Node.js 后，打开命令行工具，输入以下命令安装 Vue CLI：

npm install -g @vue/cli

2. 创建 Vue.js 项目

使用 Vue CLI 创建一个新项目。选择合适的目录，然后执行以下命令：

vue create my-vue-app

这个过程会询问你一些配置问题，比如项目名称、是否要使用 Babel、ESLint 等。你可以根据自己的需求进行选择。

3. 搭建 Node.js 后端

在创建 Vue 项目的同时，你也可以创建一个 Node.js 后端项目。这里我们使用 Express.js 框架，因为它简单易用。

3.1 安装 Express.js

在你的项目根目录下，创建一个新的文件夹 backend，然后进入该文件夹并执行以下命令安装 Express.js：

npm init -y
npm install express

3.2 创建后端文件

在 backend 文件夹中，创建一个名为 server.js 的文件，并编写以下代码：

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

app.get('/', (req, res) => {
  res.send('Hello World!');
});

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

3.3 启动后端服务器

在 backend 文件夹下，使用以下命令启动服务器：

node server.js

此时，你的 Node.js 后端服务器已经启动，并监听在端口 3000。

4. 前后端联调

现在，你已经有了前端和后端的基础。接下来，我们需要将它们联调起来。

4.1 修改 Vue 项目

在 Vue 项目中，你需要修改 src/main.js 文件，将后端服务器的地址改为你的 Node.js 后端服务器地址：

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

// 设置后端服务器地址
process.env.VUE_APP_API_BASE_URL = 'http://localhost:3000';

4.2 修改 Vue 组件

在 Vue 组件中，你可以使用 axios 来发送 HTTP 请求到后端服务器。首先，你需要安装 axios：

npm install axios

然后，在你的组件中，你可以使用以下代码来发送 GET 请求：

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'HelloWorld',
  created() {
    axios.get('/').then(response => {
      console.log(response.data);
    }).catch(error => {
      console.error(error);
    });
  }
}
</script>

5. 部署项目

完成开发后，你可以将项目部署到线上。这里我们以 Heroku 为例。

5.1 注册 Heroku 账号

首先，你需要注册一个 Heroku 账号。然后，安装 Heroku CLI 并登录：

npm install -g heroku
heroku login

5.2 部署到 Heroku

在你的项目根目录下，创建一个名为 Procfile 的文件，并写入以下内容：

web: npm run dev

然后，使用以下命令部署到 Heroku：

heroku create
git push heroku master

部署完成后，你可以在浏览器中访问你的项目了。

总结

通过以上步骤，你已经成功搭建了一个 Vue.js + Node.js 的全栈项目。这个过程虽然看起来有些复杂，但只要按照步骤一步一步来，相信你一定能够掌握全栈开发的技能。祝你学习愉快！

-- 展开阅读全文 --