前言

示例项目父级目录：/home/wwwroot/thinkphp_swoole_chat/public/demo 示例项目名称：chat

设置npm源为阿里源

npm config set registry=https://registry.npm.taobao.org

全局安装webpack，vue-cli

依赖名称功能说明webpack打包工具vue-clivue命令行工具 npm install -g webpack vue-cli

初始化vue项目

step1：进入项目的父目录

cd /home/wwwroot/thinkphp_swoole_chat/public/demo

step2：创建vue项目chat

请注意：如果项目目录做了虚拟机目录磁盘映射，请务必不要在虚拟机里执行如下代码，会报莫名其妙的错误，请确保是在物理机环境下执行创建操作，另外如果涉及到依赖安装也建议在物理机环境下操作。

vue init webpack chat

根据提示填写如下信息

信息翻译填写示例说明Project name项目名称chat直接回车则直接使用命令vue init webpack chat中的chat作为项目名称Project description项目描述基于thinkphp+swoole的聊天室示例直接回车则直接以A Vue.js project作为项目描述Author作者jinyicheng直接回车则表示不提供作者信息Vue build (Use arrow keys)编译模式选择第一个Runtime + Compiler: recommended for most users回车使用键盘上下箭头按键选择，一般选择第一个回车，此时会显示Vue build standaloneInstall vue-router? (Y/n)是否安装vue-router，即vue路由输入Y回车Use ESLint to lint your code? (Y/n)是否使用ESLint 来检查代码规范输入Y回车Pick an ESLint preset (Use arrow keys)选择一个ESLint检查代码规范选择第一个Standard (https://github.com/standard/standard)使用键盘上下箭头按键选择，一般选择第一个回车，此时会显示Pick an ESLint preset StandardSet up unit tests (Y/n)是否设置单元测试输入n回车此处根据实际需要设置Setup e2e tests with Nightwatch? (Y/n)是否通过Nightwatch进行e2e测试输入n回车此处根据实际需要设置Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)是否可以在项目创建后通过npm install来安装？选择第一个Yes,use NPM回车此处根据实际需要选择

在完成上述最后一个选择并回车后，将会生成项目，此时您将发现生成了如下路径的项目：/home/wwwroot/thinkphp_swoole_demo/public/demo/chat

运行项目

cd chat npm run dev

浏览项目

默认情况下浏览器访问： http://localhost:8080