vue安裝jquery：

?

1、使用vue-cli創(chuàng)建好vue項目后，在項目文件夾下，使用命令npm install jquery --save-dev 引入jquery。

2、修改項目文件 build/webpack.base.conf.js，添加如下內(nèi)容：

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 運(yùn)行項目，能夠在界面上看到，彈出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>重置窗口大小，查看響應(yīng)式效果！</p> </div><div class="row"><div class="col-sm-4"><h3>Column 1</h3><p>學(xué)的不僅是技術(shù)，更是夢想！</p><p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p></div><div class="col-sm-4"><h3>Column 2</h3><p>學(xué)的不僅是技術(shù)，更是夢想！</p><p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p></div><div class="col-sm-4"><h3>Column 3</h3> <p>學(xué)的不僅是技術(shù)，更是夢想！</p>s<p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p></div></div></div><h2>Essential Links</h2>

npm run dev 運(yùn)行項目，能夠在界面上看到如下效果則安裝成功。

?

?

?

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();}//連接發(fā)生錯誤的回調(diào)方法websock.onerror = function () {console.log("WebSocket連接發(fā)生錯誤");} }// 實際調(diào)用的方法 function sendSock(agentData,callback){ global_callback = callback;if (websock.readyState === websock.OPEN) {//若是ws開啟狀態(tài)websocketsend(agentData)}else if (websock.readyState === websock.CONNECTING) {// 若是 正在開啟狀態(tài)，則等待1s后重新調(diào)用setTimeout(function () {sendSock(agentData,callback);}, 1000);}else {// 若未開啟 ，則等待1s后重新調(diào)用setTimeout(function () {sendSock(agentData,callback);}, 1000);} }//數(shù)據(jù)接收 function websocketonmessage(e){ global_callback(JSON.parse(e.data)); }//數(shù)據(jù)發(fā)送 function websocketsend(agentData){websock.send(JSON.stringify(agentData)); }//關(guān)閉 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 按鈕發(fā)送信息到服務(wù)端，這里使用nodejs實現(xiàn)服務(wù)端響應(yīng)

this.socketApi.sendSock(agentData,this.getConfigResult);? ?【agentData：發(fā)送的參數(shù)；this.getConfigResult：回調(diào)方法】

?

HelloWorld.vue文件如下：

<template><div class="hello"><h1>{{ msg }}</h1><div class="container"><div class="jumbotron"><h1>我的第一個 Bootstrap 頁面</h1><p>重置窗口大小，查看響應(yīng)式效果！</p> <div><button type="button" class="btn btn-success" @click="testWebsocket()">使用websocket發(fā)送信息到服務(wù)端</button></div></div><div class="row"><div class="col-sm-4"><h3>Column 1</h3><p>學(xué)的不僅是技術(shù)，更是夢想！</p><p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p></div><div class="col-sm-4"><h3>Column 2</h3><p>學(xué)的不僅是技術(shù)，更是夢想！</p><p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p></div><div class="col-sm-4"><h3>Column 3</h3> <p>學(xué)的不僅是技術(shù)，更是夢想！</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(); //調(diào)用關(guān)閉處理函數(shù)},} } </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>

?

服務(wù)端的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成功，也實現(xiàn)了前后端分離。

?

?

?

?

?

vue中引入element-ui 組件庫：

?

Element UI 是一套采用 Vue 2.0 作為基礎(chǔ)框架實現(xiàn)的組件庫，提供了配套設(shè)計資源，幫助網(wǎng)站快速成型，可以較好的實現(xiàn)vue的組件開發(fā)。

1、在項目文件夾下，使用命令 npm install element-ui? -save-dev 引入element-ui組件庫

2、可以引入整個 Element組件庫，或是根據(jù)需要僅引入部分組件。完整引入則在src/main.js 添加如下：

import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

? ?

借助?babel-plugin-component，我們可以只引入需要的組件，以達(dá)到減小項目體積的目的。安裝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 中寫入以下內(nèi)容：

import { Button, Select } from 'element-ui';Vue.use(Button) Vue.use(Select)

?

3、測試：在 src/components/HelloWorld.vue 中添加一下內(nèi)容，顯示如圖則安裝成功

<el-row><el-button>默認(rèn)按鈕</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>

?

在需要使用的頁面調(diào)用組件

<template><div class="hello"><div class="charts"><x-chart :id="id" :option="option"></x-chart></div></div> </template><script>// 導(dǎo)入chart組件import XChart from './comp.vue'export default {data() {return {id: 'test',option: {chart: {type: 'line'},title: {text: '月平均氣溫'//表頭文字},subtitle: {text: '數(shù)據(jù)來源: WorldClimate.com'//表頭下文字},xAxis: {//x軸顯示的內(nèi)容categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],plotbands:[{//可以顯示一個方塊，如果需要的話可以更改透明度和顏色from:4.5,to:6.5,color:''rgba(68,170,213,0)//透明度和顏色}]},yAxis: {//y軸顯示的內(nèi)容title: {text: '氣溫 (°C)'}},plotOptions: {line: {dataLabels: {enabled: true // 開啟數(shù)據(jù)標(biāo)簽},enableMouseTracking: false // 關(guān)閉鼠標(biāo)跟蹤，對應(yīng)的提示框、點(diǎn)擊事件會失效}},series: [{//兩條數(shù)據(jù)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>

效果如下

總結(jié)

以上是生活随笔為你收集整理的vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。