1. 安装SignalR客户端：

   npm install @microsoft/signalr
   

2. 在vue组件中引入SignalR库：

   import * as signalR from '@microsoft/signalr';
   

3. 创建一个signalr.js文件，用于处理SignalR连接和通信逻辑：

   import * as signalR from '@microsoft/signalr';
   
   let connection = null;
   
   const startConnection = () => {
       connection = new signalR.HubConnectionBuilder()
           .withUrl('/signalrhub') // 这里的路径需要根据你的实际情况进行修改
           .build();
   
       connection.start()
           .then(() => {
               console.log('SignalR Connected');
           })
           .catch(err => {
               console.error('SignalR Connection Error: ', err);
           });
   };
   
   const registerSignalRHandlers = () => {
       connection.on('ReceiveMessage', (username, message) => {
           console.log(`Message received from ${username}: ${message}`);
           // 在这里处理收到的消息
       });
   };
   
   export const initializeSignalR = () => {
       startConnection();
       registerSignalRHandlers();
   };
   
   export const sendMessage = (username, message) => {
       connection.invoke('SendMessage', username, message)
           .catch(err => {
               console.error('SignalR Send Message Error: ', err);
           });
   };
   

4. 在Vue组件中使用signalr.js文件：

   import { initializeSignalR, sendMessage } from '@/path/to/signalr.js';
   
   export default {
       mounted() {
           initializeSignalR(); // 初始化SignalR连接
       },
       methods: {
           sendSignalRMessage() {
               const username = 'John';
               const message = 'Hello, SignalR!';
               sendMessage(username, message); // 发送SignalR消息
           }
       }
   }
   

请注意，以上示例代码中的路径、Hub名称等参数需要根据你的实际情况进行修改。确保SignalR的后端服务和Hub路径与示例代码保持一致。

这只是一个简单的示例，你可以根据你的需求进一步扩展和调整SignalR连接和通信的代码。希望这可以帮助你开始集成SignalR到你的ABP前后端分离的Vue应用中。