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如...
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>
效果如下
更多推荐
所有评论(0)