正文

Vue+Node全栈开发入门：从零开始构建完整项目

/0 浏览量
0511

在数字化时代，全栈开发已成为一种趋势。Vue.js 和 Node.js 是当前非常流行的前端和后端技术。本文将带你从零开始，学习如何使用 Vue 和 Node.js 构建一个完整的项目。

一、环境搭建

1. 安装 Node.js

首先，你需要安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，用于在服务器端运行 JavaScript 代码。

  • 访问 Node.js 官网 下载适合你操作系统的版本。
  • 安装完成后，打开命令行工具，输入 node -v 和 npm -v 检查版本。

2. 安装 Vue CLI

Vue CLI 是一个官方提供的前端项目脚手架工具，用于快速搭建 Vue 项目。

  • 打开命令行工具，输入以下命令安装 Vue CLI：
npm install -g @vue/cli
  • 安装完成后，输入 vue --version 检查版本。

3. 创建 Vue 项目

  • 打开命令行工具，进入你想要创建项目的目录。
  • 输入以下命令创建一个新的 Vue 项目：
vue create my-project
  • 按照提示选择项目配置，例如选择预设、是否使用 Babel、ESLint 等。

二、Vue 项目结构

创建项目后，你将看到一个包含以下目录和文件的目录结构：

my-project/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   └── router/
│       └── index.js
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── package.json
└── package-lock.json

1. public/index.html

这是项目的入口 HTML 文件，你可以在这里添加一些基本的 HTML 结构和样式。

2. src

这是项目的源代码目录，包括组件、路由、主文件等。

2.1 src/assets

存放静态资源，如图片、字体等。

2.2 src/components

存放 Vue 组件，用于构建用户界面。

2.3 src/App.vue

这是项目的根组件，所有组件都通过它进行渲染。

2.4 src/main.js

这是项目的入口文件，用于初始化 Vue 实例、路由等。

2.5 src/router

存放路由配置，用于定义页面跳转逻辑。

三、Vue 项目开发

1. 创建组件

在 src/components 目录下创建一个新的 Vue 组件，例如 HelloWorld.vue。

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

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

2. 使用组件

在 src/App.vue 中引入并使用 HelloWorld 组件。

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

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

3. 路由配置

在 src/router/index.js 中配置路由。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HelloWorld
    }
  ]
})

4. 运行项目

在命令行工具中，进入项目目录并运行以下命令：

npm run serve

打开浏览器访问 http://localhost:8080/，你将看到项目运行的结果。

四、Node.js 后端开发

1. 创建 Node.js 项目

在项目根目录下创建一个新的文件夹，例如 server，然后进入该文件夹。

mkdir server
cd server

2. 安装 Express

Express 是一个基于 Node.js 的 Web 应用框架，用于快速搭建 Web 应用。

npm install express

3. 创建服务器

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

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

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

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

4. 运行服务器

在命令行工具中，进入 server 文件夹并运行以下命令：

node app.js

打开浏览器访问 http://localhost:3000/，你将看到 Node.js 服务器返回的结果。

五、整合 Vue 和 Node.js

1. 安装 Vue Router

在 Vue 项目根目录下安装 Vue Router。

npm install vue-router

2. 配置 Vue Router

在 src/router/index.js 中配置路由，使其能够访问 Node.js 服务器。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HelloWorld
    },
    {
      path: '/api',
      name: 'api',
      component: () => import('@/views/Api.vue')
    }
  ]
})

3. 创建 API 组件

在 src/views 目录下创建一个名为 Api.vue 的文件，并编写以下代码：

<template>
  <div>
    <h1>API 接口</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'Api',
  data() {
    return {
      message: ''
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      fetch('http://localhost:3000/api')
        .then(response => response.text())
        .then(data => {
          this.message = data
        })
        .catch(error => {
          console.error('Error:', error)
        })
    }
  }
}
</script>

4. 运行项目

在命令行工具中，同时运行 Vue 项目和 Node.js 服务器。

npm run serve
node app.js

打开浏览器访问 http://localhost:8080/api，你将看到 Vue 项目调用 Node.js 服务器返回的结果。

六、总结

通过本文的介绍，你现在已经掌握了使用 Vue 和 Node.js 构建全栈项目的入门知识。在实际开发中，你还需要学习更多高级技巧和最佳实践，以便更好地应对各种挑战。祝你学习愉快！

-- 展开阅读全文 --