前言
示例項目父級目錄：/home/wwwroot/thinkphp_swoole_chat/public/demo
示例項目名稱：chat
設置npm源爲阿里源
npm config set registry=https://registry.npm.taobao.org
全局安裝webpack，vue-cli
| 依賴名稱 | 功能說明 |
|---|---|
| webpack | 打包工具 |
| vue-cli | vue命令行工具 |
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 standalone |
| Install 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 Standard |
| Set 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