初始化WebSocket initWebSocket(){ //初始化weosocket const wsuri = 'ws://10.100.45.8:8888/websocket';//ws地址 this.websock = new WebSocket(wsuri); this.websock.onopen = this.websocketonopen; this.websock.onerror = this.websocketonerror; this.websock.onmessage

在制作项目的时候遇到一个需求,点击一个按钮弹出一个input输入框,并让输入框获得焦点,项目中引用了ElementUI 在网上查找了很多方法,但是在实际使用中发现了一个问题无论是使用$ref获取input元素然后使用focus方法还是使用饿了么组件自带的autoFocus都只有在第一次点击按钮的时候可以让Input获得焦点,在不刷新页面的情况下,第二次以后的按钮点击都不会让Input获得焦点.我到现在也没有搞明白这是为什么,猜测了一下是存才一个全局变量,当我们第一次使Input获得焦点以后改变了

准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或  cnpm install echarts -S 安装完成之后,我们就可以开始引入我们需要的echarts了,接下来介绍几种使用echarts的方式. 全局引用: 首先在main.js中引入echarts,将其绑定到vue原型上:  import echarts from 'echarts' Vue.

直接上步骤: 1.通过命令,进入到当前项目所在目录 2.输入以下命令npm install vue-resource --save 3.安装完毕后,在main.js中导入,如下: import VueResource from 'vue-resource' Vue.use(VueResource) 这样就可以了

虽然vue不推荐直接操作DOM,而且也提供了操作DOM的方式.但是在某些时候还是要用到jquery,那么如何引入jquery呢? 费了半天劲,记录一下: 一 : 安装jquery npm install jquery --save 二 : 配置 在项目 build 里的webpack.base.conf.js 首先在webpack.base.conf.js里加入:(webpack的引入要在第一行) var webpack = require("webpack") 然后在module.e

新建map.js export const BaiduMap = { init: function() { const BMapURL = 'https://api.map.baidu.com/api?v=3.0&ak=' + AK + '&s=1&callback=onBMapCallback' return new Promise((resolve, reject) => { // 如果已加载直接返回 if (typeof BMap !== 'undefined') {

iview 安装 npm install iview --save 引入iview import Vue from 'vue' import App from './App' import router from './router' import iView from 'iview' //引入ivew库 import 'iview/dist/styles/iview.css' // 使用 CSS Vue.config.productionTip = false Vue.use(iView) /

<template> <div class="test"> </div> </template> <script> export default { name : 'test', data() { return { websock: null, } }, created() { this.initWebSocket(); }, destroyed() { this.websock.close() //离开路由之后断开webso

1.使用npm安装 npm i jquery --S //jquery要小写 2.在package.json文件dependencies里面加入jq 3.在build文件夹的webpack.base.conf.js文件 module.exports里面输入 前提要引入 const path = require('path') const webpack = require('webpack') 4.在min.js入口文件中引入一下 import $ from ‘jquery 5.输入npm ru

一.为什么需要websocket? 前端和后端的交互模式最常见的就是前端发数据请求,从后端拿到数据后展示到页面中.如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷. 因此,一种新的通信协议应运而生---websocket,他最大的特点就是服务端可以主动向客户端推送消息,客户端也可以主动向服务端发送消息,实现了真正的平等. websocket其他特点如下: (1)建立在 TCP 协议之上,服务器端的实现比较容易. (2)与 HTTP 协议有着良好的兼容性.默认端口也是80和4

最近遇到一个vue动态图片路径的引用问题?明明路径是正确的但是却渲染不出图片!先看我慢慢说来!! 1.当我们把图片的路径放置在data(){return:{}}中的数组中的时候,然后通过v-for循环数组. 当我们直接把图片路径给放在对象中的时候就像这样:{imgsrc:"../../assets/img/bbaa.jpg"},结果你发现图片在页面中渲染不出来. 但是当我们直接把图片放在<img src="../../assets/img/bbaa.jpg"

copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他代码... resolv

一.首先我们先了解一下websocket的使用: 1.创建websocket const ws = new WebSocket("ws://192.168.31.136:9998/ws"); 2.已连接上,使用 send() 方法发送用户信息给后端 ws.onopen = ()=>{  ws.send("发送数据"); } 3.收到消息 ws.onmessage=(evt)=>{ var received_msg = evt.data; } 4.连接断开

转载 2016年11月13日 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他代码... resolve: { extensions: ['', '.js', '.vue'], fa

一.NPM安装的jQuery 使用vue-cli构建的vue项目,需要修改的是build/webpack.base.conf.js 1.添加引入webpack,后面的plugins那里需要 const webpack = require('webpack') 2.增加一个plugins plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ $: "jquery&qu

vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPublicPath 中的'/'成为'./' 2.在build => util.js 里找到ExtractTextPlugin.extract增加一行:publicPath: '../../',主要解决背景图片路径的问题.

vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli //全局安装vue-cli 注意:上面这些装过一次之后都不需要再安装了比如说我的项目要生成在D:/project下面那么先进到目录里

# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQuery npm install jquery 2.安装Bootstrap npm 以上两步,也可以先在package.json 配置文件中指定版本号,然后运行 npm install 安装完了以后项目是跑不起来的,尽管二者都已经安装成功了,但还是会报错 "Bootstrap's JavaScript

手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是看网上的教程一步步搭下来,所以其中的一些步骤说法为了表达正确会进行一定参考. 一. 项目使用技术.框架简单介绍 我们使用vue-cli来搭建整个项目,vue-cli就是一个脚手架,步骤很简单,输入几个命令之后就会生成整个项目,里面包括了webpack.ESLint.babel很多配置等等,省了很多事

如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.org/docs/user-guide/configuring module.exports = { //此项是用来告诉eslint找当前配置文件不能往父级查找 root: true, //此项是用来指定eslint解析器的,解析器必须符合规则,babel-eslint解析器是对babel解析器的包装使

前言 作为一个网站应用,加载速度是非常重要的.加载速度,一个是程序的合理安排,如以组件按需加载,一个是js.css等资源的异步加载. 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首开的体验. 解决方法是,将引用的外部js.css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js.外