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

缺乏、安全感 2021-09-19 00:16 709阅读 0赞

## 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 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 运行项目，能够在界面上看到如下效果则安装成功。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70][]

## vue中封装websocket通讯： ##

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 1][]

## 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>

![20190419231941946.jpg][]

附：element-ui API文档  [https://element.eleme.io/\#/zh-CN/component/installation][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>

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70]: /images/20210726/21509ad7de3f4af2b0bf7d560b38d96c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 1]: /images/20210726/a9789a521c6c45d59f71704574e0c0b7.png
[babel-plugin-component]: https://github.com/QingWei-Li/babel-plugin-component
[20190419231941946.jpg]: /images/20210726/39ffa5386d0647b094028626b0bbeaba.png
[https_element.eleme.io_zh-CN_component_installation]: https://element.eleme.io/#/zh-CN/component/installation
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 2]: /images/20210726/baff86ac57b2473a9d1a1470eb785192.png