如何使用 `draw-something`：基于VueJS与WebSocket的简易版“你画我猜”游戏

一、项目目录结构及介绍

该项目的目录层次清晰，便于理解和开发。以下是主要的文件夹和文件及其简述：

• script: 包含客户端的主要JavaScript代码。
  • components: 存放Vue组件，如绘图板(drawing-board.vue)和展示板(showing-board.vue)。
  • index.js 和 App.vue: 应用的入口文件和根组件。
• index.html: 浏览器加载的主HTML文件。
• server.js: 服务端启动文件，用于开启WebSocket服务器。
• webpack.config.dev.js:Webpack开发环境的配置文件。
• package.json: Node.js项目的配置文件，包含了脚本命令和依赖信息。
• LICENSE: MIT许可证文件，说明了软件的授权方式。
• 其他辅助文件如.babelrc, .eslintignore, .eslintrc等用于代码质量和构建过程。

二、项目的启动文件介绍

server.js

这是服务端的核心文件，它使用Node.js以及ws库来创建WebSocket服务器。服务器监听在8090端口上，负责处理客户端连接、接收绘图指令和关键词猜测，并将相关信息广播给其他连接的客户端。启动该服务器，你需要确保环境中已安装Node.js。

客户端启动流程

客户端并非通过单独的“启动文件”激活，而是通过运行npm脚本来启动Vue应用。这通常涉及以下步骤：

1. 在终端中执行 npm install 来安装项目依赖。
2. 然后运行 npm run dev 来启动开发服务器，客户端应用程序将在浏览器自动打开并运行于localhost:8080。

三、项目的配置文件介绍

webpack.config.dev.js

这是一个Webpack的开发环境配置文件，它负责编译和打包Vue应用的前端资源。包括设置入口文件、输出目录、热替换(HMR)、加载器规则等。这对于调整开发环境的编译行为至关重要。

package.json

虽然不是传统意义上的配置文件，但在这里扮演了重要角色。它记录了项目的元数据、脚本命令（如dev命令用于启动开发服务器），以及项目依赖。通过这个文件，开发者能够快速理解如何构建、测试或部署项目。

注意事项

• 在启动之前，需确保全局安装了Vue CLI或通过脚本命令指定本地Vue版本。
• 项目中涉及的WebSocket通信要求服务器和客户端处于同一网络环境或处理跨域问题。
• 客户端代码中采用了Vue和原生DOM操作结合的方式，展示了如何在Vue框架下进行较为底层的操作。

开始探索并享受你的“你画我猜”之旅吧！记得根据实际需求调整配置和代码细节。