Node-Vue-Chat 项目教程

1. 项目的目录结构及介绍

node-vue-chat/
├── client/                # 前端 Vue 项目目录
│   ├── public/            # 公共资源文件
│   ├── src/               # 源代码目录
│   │   ├── assets/        # 静态资源
│   │   ├── components/    # Vue 组件
│   │   ├── router/        # Vue 路由
│   │   ├── store/         # Vuex 状态管理
│   │   ├── views/         # 页面视图
│   │   ├── App.vue        # 主应用组件
│   │   ├── main.js        # 入口文件
│   ├── package.json       # 前端项目依赖配置
├── server/                # 后端 Node.js 项目目录
│   ├── config/            # 配置文件目录
│   ├── controllers/       # 控制器
│   ├── models/            # 数据模型
│   ├── routes/            # 路由
│   ├── sockets/           # Socket 处理
│   ├── utils/             # 工具函数
│   ├── app.js             # 后端入口文件
│   ├── server.js          # 服务器启动文件
│   ├── package.json       # 后端项目依赖配置
├── package.json           # 项目根目录依赖配置
├── README.md              # 项目说明文档

2. 项目的启动文件介绍

后端启动文件

• server/server.js：这是后端服务器的启动文件，负责启动 Node.js 服务器并监听指定端口。

const app = require('./app');
const http = require('http');
const server = http.createServer(app);
const { PORT } = process.env || 3000;

server.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

前端启动文件

• client/src/main.js：这是前端 Vue 项目的入口文件，负责初始化 Vue 应用并挂载到 DOM 上。

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

Vue.config.productionTip = false;

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

3. 项目的配置文件介绍

后端配置文件

• server/config/config.js：这是后端项目的配置文件，包含数据库连接、端口等配置信息。

module.exports = {
  development: {
    username: 'root',
    password: null,
    database: 'database_development',
    host: '127.0.0.1',
    dialect: 'mysql',
    port: 3000
  },
  test: {
    username: 'root',
    password: null,
    database: 'database_test',
    host: '127.0.0.1',
    dialect: 'mysql',
    port: 3000
  },
  production: {
    username: process.env.DB_USERNAME,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
    host: process.env.DB_HOST,
    dialect: 'mysql',
    port: process.env.PORT
  }
};

前端配置文件

• client/vue.config.js：这是前端 Vue 项目的配置文件，用于自定义 Vue CLI 的构建配置。

module.exports = {
  devServer: {
    proxy: 'http://localhost:3000'
  }
};

以上是 Node-Vue-Chat 项目的目录结构、启动文件和配置文件的详细介绍。希望这篇教程能帮助你更好地理解和使用该项目。