elementui好看的表单样式卡片样式 elementui 图表

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>

效果如下