在 Vue 2 项目里引入 sockjs.min.js 、 stomp.min.js 和 jquery.js
第一种方式适用于直接使用静态文件，第二种方式更符合现代前端开发规范，推荐使用第二种方式。
·
介绍常见的两种：
第一种方式适用于直接使用静态文件，第二种方式更符合现代前端开发规范，推荐使用第二种方式。
方式一：静态资源引入
- 把
sockjs.min.js、 stomp.min.js 和 jquery.js 文件放到项目的 public 目录（若使用 Vue CLI 创建的项目）。 - 在 public/index.html 文件里引入这些脚本。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 引入脚本 -->
<script src="sockjs.min.js"></script>
<script src="stomp.min.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
方式二：使用 npm 安装并在组件中引入
- 安装对应的依赖：
npm install sockjs-client stompjs jquery - 在需要使用这些库的组件里引入它们，例如在\src\views\test\test.vue 中：
<template>
<!-- ... existing code ... -->
</template>
<script>
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
import $ from 'jquery';
export default {
// ... existing code ...
methods: {
// ... existing code ...
sendName() {
// 向服务端发送消息
var name = $('#name').val();
// 通过 stompClient.send 向 /hello （服务端）发送信息，对应控制器 @MessageMapping 中的定义
this.stompClient.send("/hello", {}, JSON.stringify({ 'name': name }));
},
// ... existing code ...
},
// ... existing code ...
};
</script>
<style scoped>
/* ... existing code ... */
</style>
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
4
0- 0
已为社区贡献2条内容
所有评论(0)