vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件

vue安装jquery：

 

1、使用vue-cli创建好vue项目后，在项目文件夹下，使用命令npm install jquery --save-dev 引入jquery。

2、修改项目文件 build/webpack.base.conf.js，添加如下内容：

var webpack=require('webpack')

module.exports 对象下添加属性p'lugins如下

  plugins: [
	  new webpack.ProvidePlugin({
		$:"jquery",
		jQuery:"jquery",
		"windows.jQuery":"jquery"
	  })
  ],

3、在src/main.js文件中 引入jquery模块

import $ from 'jquery'

4、测试：修改src/components/HelloWorld.vue。添加jquery代码如下

npm run dev 运行项目，能够在界面上看到，弹出alert，就证明jquery引入成功了。

 

 

 

 

vue安装bootstrap 框架: 

 

1、基于jQuery后，在项目文件夹下，使用命令 npm install [email protected] -save-dev 引入bootstrap

2、在src/main.js文件中 引入bootstrap，如下

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

3、测试：修改src/components/HelloWorld.vue。添加bootstrap代码如下

	  

		
我的第一个 Bootstrap 页面
		
重置窗口大小，查看响应式效果！
 
	  
	  

		

		  
Column 1
		  
学的不仅是技术，更是梦想！
		  
再牛逼的梦想,也抵不住你傻逼似的坚持！
		
		

		  
Column 2
		  
学的不仅是技术，更是梦想！
		  
再牛逼的梦想,也抵不住你傻逼似的坚持！
		
		

		  
Column 3
 
		  
学的不仅是技术，更是梦想！
s
		  
再牛逼的梦想,也抵不住你傻逼似的坚持！
		
	  
	

Essential Links

npm run dev 运行项目，能够在界面上看到如下效果则安装成功。

 

 

 

vue中封装websocket通讯：

 

1、封装成公共的socket文件，在src/api/socket.js如下

var websock = null;
var global_callback = null;
var serverPort = '5000';	//webSocket连接端口
 
 
function getWebIP(){
	var curIP = window.location.hostname;
	return curIP;
}
 
function initWebSocket(){ //初始化weosocket
    //ws地址
    var wsuri = "ws://" +getWebIP()+ ":" + serverPort;
    websock = new WebSocket(wsuri);
    websock.onmessage = function(e){
    	websocketonmessage(e);
    } 
    websock.onclose = function(e){
    	websocketclose(e);
    }
    websock.onopen = function () {
	    websocketOpen();
	}
    
    //连接发生错误的回调方法
	websock.onerror = function () {
		console.log("WebSocket连接发生错误");
	}
}
 
// 实际调用的方法
function sendSock(agentData,callback){  
    global_callback = callback;
    if (websock.readyState === websock.OPEN) {
    	//若是ws开启状态
        websocketsend(agentData)
    }else if (websock.readyState === websock.CONNECTING) {
    	// 若是 正在开启状态，则等待1s后重新调用
        setTimeout(function () {
        	sendSock(agentData,callback);
        }, 1000);
    }else {
    	// 若未开启 ，则等待1s后重新调用
        setTimeout(function () {
            sendSock(agentData,callback);
        }, 1000);
    }
}
 
//数据接收
function websocketonmessage(e){ 
    global_callback(JSON.parse(e.data));
}
 
//数据发送
function websocketsend(agentData){
    websock.send(JSON.stringify(agentData));
}
 
//关闭
function websocketclose(e){  
    console.log("connection closed (" + e.code + ")");
}
 
function websocketOpen(e){
	console.log("连接成功");
}
 
initWebSocket();
 
export{sendSock}

 

2、在main.js中引入这个socket文件，如下

import * as socketApi from './api/socket'
Vue.prototype.socketApi = socketApi

 

3、在vue组件中使用封装的websocket方法，如src/components/HelloWorld.vue 按钮发送信息到服务端，这里使用nodejs实现服务端响应

this.socketApi.sendSock(agentData,this.getConfigResult);   【agentData：发送的参数；this.getConfigResult：回调方法】

 

HelloWorld.vue文件如下：

 

服务端的server.js文件如下：

var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 5000 });
wss.on('connection', function (ws) {
    console.log('client connected');
    ws.on('message', function (message) {
        console.log(message);
    });
});

 

如下图所示则vue项目安装websocket成功，也实现了前后端分离。

 

 

 

 

 

vue中引入element-ui 组件库：

 

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，提供了配套设计资源，帮助网站快速成型，可以较好的实现vue的组件开发。

1、在项目文件夹下，使用命令 npm install element-ui  -save-dev 引入element-ui组件库

2、可以引入整个 Element组件库，或是根据需要仅引入部分组件。完整引入则在src/main.js 添加如下：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

   

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。安装babel-plugin-component：

npm install babel-plugin-component -S

 

 然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

 

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import { Button, Select } from 'element-ui';

Vue.use(Button)
Vue.use(Select)

 

3、测试：在 src/components/HelloWorld.vue 中添加一下内容，显示如图则安装成功

  默认按钮
  主要按钮
  成功按钮
  信息按钮
  警告按钮

附：element-ui API文档  https://element.eleme.io/#/zh-CN/component/installation

 

 

vue中引入highcharts 图表插件 ：

 

和element-ui引入类似，highcharts图表插件引入vue先使用 npm install -S vue-highcharts 命令行安装依赖包。在main.js 中引入highcharts如下：

import VueHighcharts from 'vue-highcharts';
Vue.use(VueHighcharts)

 

测试如下：

新建一个作为comp.vue图表的组件

 

在需要使用的页面调用组件

效果如下