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代码如下

<script>
$(function () { alert(123);
});export default {name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script>

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

vue安装bootstrap 框架:

1、基于jQuery后，在项目文件夹下，使用命令 npm install bootstrap@3.3.0 -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代码如下

   <div class="jumbotron"><h1>我的第一个 Bootstrap 页面</h1><p>重置窗口大小，查看响应式效果！</p> </div><div class="row"><div class="col-sm-4"><h3>Column 1</h3><p>学的不仅是技术，更是梦想！</p><p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p></div><div class="col-sm-4"><h3>Column 2</h3><p>学的不仅是技术，更是梦想！</p><p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p></div><div class="col-sm-4"><h3>Column 3</h3> <p>学的不仅是技术，更是梦想！</p>s<p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p></div></div></div><h2>Essential Links</h2>

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文件如下：

<template><div class="hello"><h1>{{ msg }}</h1><div class="container"><div class="jumbotron"><h1>我的第一个 Bootstrap 页面</h1><p>重置窗口大小，查看响应式效果！</p> <div><button type="button" class="btn btn-success" @click="testWebsocket()">使用websocket发送信息到服务端</button></div></div><div class="row"><div class="col-sm-4"><h3>Column 1</h3><p>学的不仅是技术，更是梦想！</p><p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p></div><div class="col-sm-4"><h3>Column 2</h3><p>学的不仅是技术，更是梦想！</p><p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p></div><div class="col-sm-4"><h3>Column 3</h3> <p>学的不仅是技术，更是梦想！</p>s<p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p></div></div></div></div>
</template><script>
export default {name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App'}},methods:{testWebsocket:function(){   this.socketApi.sendSock("这是客户端使用websocket传递的信息。")this.socketApi.websocketclose(); //调用关闭处理函数},}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {font-weight: normal;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

服务端的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 中添加一下内容，显示如图则安装成功

<el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button>
</el-row>

附：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图表的组件

<template><div class="x-bar"><div :id="id" :option="option"></div></div>
</template>
<script>import HighCharts from 'highcharts'export default {// 验证类型props: {id: {type: String},option: {type: Object}},mounted() {HighCharts.chart(this.id, this.option)}}
</script>

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

<template><div class="hello"><div class="charts"><x-chart :id="id" :option="option"></x-chart></div></div>
</template><script>// 导入chart组件import XChart from './comp.vue'export default {data() {return {id: 'test',option: {chart: {type: 'line'},title: {text: '月平均气温'//表头文字},subtitle: {text: '数据来源: WorldClimate.com'//表头下文字},xAxis: {//x轴显示的内容categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],plotbands:[{//可以显示一个方块，如果需要的话可以更改透明度和颜色from:4.5,to:6.5,color:''rgba(68,170,213,0)//透明度和颜色}]},yAxis: {//y轴显示的内容title: {text: '气温 (°C)'}},plotOptions: {line: {dataLabels: {enabled: true // 开启数据标签},enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效}},series: [{//两条数据name: '东京',data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]}, {name: '伦敦',data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]}]}}},components: {XChart}}
</script>

效果如下