01 2019 档案
摘要:vue实现部分页面导入底部 vue配置公用头部、底部,可控制显示隐藏
在app.vue文件里引入公共的header 和 footer
header 和 footer 默认显示,例如某个页面不需要显示header
可以使用 this.$emit('header',false); 来控制header不显示
例如:test页面不需要显示header,在页面被创建的时候广播(this.$emit)告诉上级不显示header,
并且在当前页面写自己的header代码,就可以了
阅读全文
摘要:vue用mand-mobile ui做交易所移动版实战示例
阅读全文
摘要:Vue用axios跨域访问数据
axios是vue-resource的替代品,vue-resource不再维护。
安装axios:npm install axios
使用vue-cli开发时,由于项目本身启动本地服务是需要占用一个端口的,所以会产生跨域的问题。在使用webpack做构建工具的项目中,使用proxyTable代理实现跨域是一种比较方便的选择。
通过this.$http去调用axios,如果之前你的vue-resourse也是这么写的话,可以无缝切换。换成this.axios也是没有问题的。
proxyTable相关配置及使用说明:
在config/index.js文件中,找到dev对象下proxyTable对象进行跨域设置
阅读全文
摘要:vue axios使用form-data的形式提交数据
vue axios request payload form data
由于axios默认发送数据时,数据格式是Request Payload,而并非我们常用的Form Data格式,PHP后端未必能正常获取到,所以在发送之前,需要使用qs模块对其进行处理。
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios请求不携带cookie
this.axios.defaults.withCredentials = true;// 跨域携带cookie
在跨域的情况下不仅前端要设置withCredentials,后端也是要设置Access-Control-Allow-Credentials的。
阅读全文
摘要:基于Vue的Quasar Framework 介绍 这个框架UI组件很全面
基于Vue的Quasar Framework 中文网
quasarframework/quasar: Quasar Framework
https://github.com/quasarframework/quasar
Quasar(发音为/kweɪ.zɑɹ/)是MIT许可的开源框架(基于Vue),可帮助Web开发人员创建:响应式网站
阅读全文
摘要:Vue单元测试Karma+Mocha
Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。
换句话说,它是一个测试工具,能让你的代码在浏览器环境下测试。需要它的原因在于,你的代码可能是设计在浏览器端执行的,在node环境下测试可能有些bug暴露不出来;另外,浏览器有兼容问题,karma提供了手段让你的代码自动在多个浏览器(chrome,firefox,ie等)环境下运行。如果你的代码只会运行在node端,那么你不需要用karma。
Mocha是一个测试框架,在vue-cli中配合chai断言库实现单元测试。
Mocha的常用命令和用法不算太多,看阮一峰老师的测试框架 Mocha 实例教程就可以大致了解了。
而Chai断言库可以看Chai.js断言库API中文文档,很简单,多查多用就能很快掌握。
阅读全文
摘要:Vue将px转化为rem适配移动端
1.下载lib-flexible
我使用的是vue-cli+webpack,所以是通过npm来安装的
npm i lib-flexible --save
2.引入lib-flexible
在main.js中引入lib-flexible
import 'lib-flexible/flexible'
3.设置meta标签
通过meta标签,设置设备宽度以及缩放比例
4.安装px2rem-loader
npm install px2rem-loader
5.配置px2rem-loader
阅读全文
摘要:vscode格式化代码
安装 VsCode 格式化代码插件
搜索并安装 Beautify 格式化代码插件
使用:打开要格式化的文件 —> F1 —> Beautify file —> 选择你要格式化的代码类型
格式化对齐快捷键:
Windows: Ctrl + K + F
Windows:Shift + Alt + F
Mac: Shift + Option + F
Ubuntu: Ctrl + Shift + I
阅读全文
摘要:vue项目初始化时npm run dev报错webpack-dev-server解决方法
原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好
webpack-dev-server 版本需要从最新版本降低到如下版本,因为开始构建项目所用的插件版本太低
(1)、npm uninstall webpack-dev-server
(2)、npm install webpack-dev-server@2.9.1
(3)、npm run dev
===================
如何执行npm uninstall webpack-dev-server 也报错的话只能用下面方法了
原因是你的node_modules有意外改动,导致依赖库不完整。
解决:
1.删除项目下的node_modules
2.在项目目录下重新执行npm install 或者cnpm install,会重新生成node_modules
3.执行npm run build 或者cnpm run build
4.执行npm run dev 或者cnpm run de
阅读全文
摘要:在vue项目中引入jquery
cnpm install jquery --save
在main.js中引入,加入下面这行代码:
import 'jquery'
注:有些项目是按需加载的,在main.js里面引入不起作用
需要在对应xx.vue里面引入import $ from 'jquery'
阅读全文
摘要:vue全局使用axios插件请求ajax
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方宣布停止更新vue-resource,并推荐大家使用axios,越来越多的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目会使用 Vuex 来管理数据。
之前一直使用的是 vue-resource插件,在主入口文件引入import VueResource from 'vue-resource'之后,直接使用Vue.use(VueResource)之后即可将该插件全局引用了;
Axios 是一个基于 promise 的 HTTP 库,并没有install方法,所以是不能使用vue.use()方法的。
简单点就是每个文件引用一次,import axios from 'axios';
全局使用的解决方法有很三种:
1.结合 vue-axios使用
2. axios 改写为 Vue 的原型属性
3.结合 Vuex的action
阅读全文
摘要:移动手机版要求我们在制作嵌入h5的时候去适配不同的手机。适配有多重模式,有flex、百分比等。字体大小的控制也有px、百分比、rem等单位,webpack中 px转rem。
vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
1 安装依赖包 npm install postcss-pxtorem --save-dev
2 创建 .postcss.js文件,做webpack相关配置
阅读全文
摘要:快速搭建Vue项目
第一次安装vue项目
Vue推荐开发环境
Node.js 6.2.0、npm 3.8.9、webpack 1.13、vue-cli 2.5.1、webstrom2016
阅读全文
摘要:vue mand-mobile按2.0文档默认安装的是1.6.8版本
npm list mand-mobile
bigbullmobile@1.0.0 E:\webcode\bigbullmobile
`-- mand-mobile@1.6.8
按2.0文档弄个底部导航的一直出不来,原来是默认安装的是1.6.8版本的
https://github.com/mand-mobile/vue-cli3-example
用vue-cli3重新创建个项目好了
阅读全文
摘要:请问这种列表的要用那个组件好呢?
Cellitem 只能用到两列,这个要三列的怎么弄?
mand的好像没有listview,grid组件的
问了mandmobile的群主说是可以通过Cellitem的slot插槽left default right来实现的
阅读全文
摘要:16款优秀的Vue UI组件库推荐
Vue 是一个轻巧、高性能、可组件化的MVVM库,API简洁明了,上手快。从Vue推出以来,得到众多Web开发者的认可。
在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用。
开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了。
在选择Vue UI组件库的过程中,通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素,也收集整理了一些优秀的Vue UI组件库。
PS:国内的UI组件大部分都只有一部分的,常用的头部导航,底部导航,listview,grid表格很多都是没有的。
阅读全文
摘要:usdt节点启动慢和队列深度超出了范围问题
usdt的连接节点报错Work queue depth exceeded(队列深度超出了范围)大概是什么问题?重启了几次节点都不行
队列深度超出了范围,估计是usdt的node配置弄错了
阅读全文
摘要:vue移动端金融UI组件库滴滴MandMobile面向金融场景设计附功能思维导图
Mand Mobile是面向金融场景设计的移动端组件库,基于Vue.js实现。
目前已实际应用于滴滴四大金融业务板块的10余款产品中。
丰富的组件,40+的实用组件,能够满足移动端开发的基本需求,尤其是对金融场景的需求进行了特别支持
统一的视觉规范
由滴滴金融设计师设计并维护,保证了应用的项目内部、项目之间都能保持高度的视觉一致性
阅读全文
摘要:为什么区块链投资人都应该了解德州扑克?
首先,我们旗帜鲜明地反对赌博,德扑也不应该成为赌博谋利的工具,它是一种益智体育,为的是在智力运动中锻炼心性,提高决策能力。
美国传奇股票投资家和基金经理彼得·林奇说:“华尔街的股票投资人和证券经纪们,你们应该学习德州扑克,这里面的道理可以让你们受益终身”。
阅读全文
摘要:vue用npm安装删除模块element-ui mint-ui
在vue项目中先引入了element-ui,后来发现移动版的需要用mint-ui,所以需要先卸载了再安装。
卸载element-ui:
npm uninstall element-ui
然后再安装mint-ui:
npm i mint-ui -S
阅读全文
摘要:vue运行时 eslint 报“import/first” WARN deprecated browserslist 问题解决
这个信息的意思是导入文件顺序不对,绝对导入应该放在相对导入前面。将绝对导入代码放到相对导入前面就行了。
原因是eslint是严格语法检查的,如果出现连续两个空行也会报错编译不过。
在搭建vue框架,新建一个webpack打包项目时,会出现
npm WARN deprecated browserslist
阅读全文
摘要:vue解决启动报错cjs loader.js Error: Cannot find module '../config'问题
config目录下缺少了index.js文件导致的
阅读全文
摘要:vue使用桌面Element-UI和移动端MintUI的UI框架
Element - 网站快速成型工具
安装:npm install --save element-ui
Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机移动端有对应框架是 Mint UI 。
pc端和手机端的UI还是完全不一样的
基于vue.js的移动端UI框架mint-ui
阅读全文
摘要:Web前端开发规范文档
规范目的:使开发流程更加规范化。
阅读全文
摘要:nodejs高并发大流量的设计实现,控制并发的三种方法
eventproxy、async.mapLimit、async.queue控制并发
Node.js是建立在Google V8 JavaScript引擎之上的网络服务器框架,允许开发者能够用客户端使用的语言JavaScript在服务器端编码。
node.js优缺点:
优点: 高并发,io密集型处理, 可以作为单页面应用,便于爬虫抓取。
缺点:不适合cpu计算密集型, 对关系数据库支持不好
阅读全文
摘要:区块链到底是什么?和普通人有什么关系?
简单讲,区块链就是一个去中心化的信任机制。
本问答主要针对想了解区块链,无专业技术和金融背景的普通人。会尽量回避一切技术术语。
问:什么是区块链?
答:区块链(Blockchain)是指通过去中心化和去信任的方式集体维护一个可靠数据库的技术方案。
通俗一点说,区块链技术就指一种全民参与记账的方式。所有的系统背后都有一个数据库,你可以把数据库看成是就是一个大账本。
阅读全文
摘要:vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器
在 2.3 发布后我们发布了一份完整的构建 Vue 服务端渲染应用的指南。这份指南非常深入,适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读。
Vue SSR 指南 | Vue.js 服务器端渲染指南
Nuxt.js从头搭建一个服务端渲染的应用是相当复杂的。幸运的是,我们有一个优秀的社区项目 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架,为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是,你甚至可以用它来做为静态站生成器。推荐尝试。
阅读全文
摘要:vue深入响应式原理
深入响应式原理 — Vue.js
https://cn.vuejs.org/v2/guide/reactivity.html
注意:这里说的响应式不是bootsharp那种前端UI的响应式,而是数据绑定的响应。
Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。
这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以回避一些常见的问题。在这个章节,我们将进入一些 Vue 响应式系统的底层的细节。
阅读全文
摘要:网页设计公众号相关资源网站
查看公众号文章的工具 http://chuansong.me/
交互、UI 设计资源整理:
阅读全文
摘要:vuejs-devtools浏览器调试chrome插件(360极速浏览器也可以安装,需要FQ)
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg/related
vue.js devtools浏览器插件使用
阅读全文
摘要:vue-i18n国际化插件
安装,到项目目录下执行:
npm install vue-i18n
配置
在src\main.js里面引入vue-i18n
// 语言包插件
import VueI18n from 'vue-i18n'
import chinese from './assets/lang/chinese'
import english from './assets/lang/english'
Vue.use(VueI18n)
const i18n = new VueI18n({ locale: 'chinese', messages:{ 'chinese': chinese, 'english': english }})
把 i18n 挂载到 vue 根实例上
阅读全文
摘要:Vuejs vm对象详解
vue数据是怎么驱动视图的?
一堆数据放在那里是不会有任何作用的,它必须通过我们的View Model(视图模型)才能操控视图。
阅读全文
摘要:35 个最好用的 Vue 开源库
Vue.js 是一个非常易用的渐进式 JavaScript 框架,用于构建用户界面。
1.Vue Dark Mode
Vue.js 的一个极简主义的深色设计系统。它提供了基本组件,用于构建失眠者最喜欢的深色界面。
地址:https://github.com/LeCoupa/vuedarkmode
VS Code 的 Vue 工具。如果你是 Vue.js 超级用户,必须尝试一下!
阅读全文
摘要:2019,全栈开发者应该学些什么?
人生苦短,所以尽量少做无用功。如果你希望保持最新状态并成为全栈开发者,你需要了解以下的 2019 年趋势。
HTML、CSS 和 JavaScript 是必须掌握的,你还需要学习 React、Vue 或 Angular 等前端框架或库。但是,你应该选择哪一个?对于一个真正的全栈开发者,你可以在 2019 年选择这三个框架中的任何一个。
Vue 3.0
2018 年,Vue 持续获得开发者的青睐,2019 年将会继续增长……但它是否足以超越其他两大玩家?我们拭目以待。
Vue 生态系统正在不断发展,而且,随着 Vue 3.0 的发布极其改进的 Vue CLI,2019 年的开发者体验将比以往更好。
开发者可以使用 Vue Native 进行跨平台开发(就像 React Native 那样)
阅读全文
摘要:如何快速三个月成为一个领域的高手的四个方法
学习是有方法的,如果你用对了方法,只需要三个月时间,就可以成为一个细分领域的高手。
方法一:找100个问题
方法二:与高手深入交流
方法三:通过社群来学习
方法四、多实践和总结
阅读全文
摘要:px-pt-dp-rem像素单位的换算问题
dp 的意思
从 MDPI 到 XXXHDPI 每单位物理尺寸的像素数越来越大。
也就是说
mdpi 时 1dp = 1px
xxxhdpi 时 1dp = 4px
mdpi 时 1px = 1dp
xxxhdpi 时 1px= 0.25dp
dp=pt
所以屏幕分辨率高了需要的物理尺寸就是 PX 换算比就会增大
阅读全文
摘要:蓝湖 - 高效的产品设计协作平台
https://lanhuapp.com
交互原型和设计,逻辑连线,切图,批注都集成在一起了
点击原型预览界面左侧的“分享”按钮,直接复制原型链接,发送给同事,同事在电脑端、手机端都可以直接打开预览和操作;
一分钟教程 · Lanhu-help
https://sos.lanhuapp.com/quick_view.html
阅读全文
摘要:vue对比其他框架详细介绍
对比其他框架 — Vue.js
https://cn.vuejs.org/v2/guide/comparison.html
阅读全文
摘要:Vue.js是什么,vue介绍
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
如果你想在深入学习 Vue 之前对它有更多了解,我们制作了一个视频,带您了解其核心概念和一个示例工程。
如果你已经是有经验的前端开发者,想知道 Vue 与其它库/框架有哪些区别,请查看对比其它框架。
阅读全文
摘要:vue生命周期图示中英文版Vue实例生命周期钩子。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
也有一些其它的钩子,在实例生命周期的不同阶段被调用,如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
阅读全文
摘要:vue使用tradingview开发K线图相关问题
1.TradingView中文开发文档
https://b.aitrade.ga/books/tradingview/CHANGE-LOG.html
2.vue开源项目:
https://github.com/webdatavisualdev/vue-tradingview
https://github.com/472647301/tradingView-webSocke
https://github.com/webdatavisualdev/vue-tradingview
阅读全文
摘要:usdt转入转出出入金开发
USDT是基于比特币omni协议的一种代币: https://omniexplorer.info/asset/31 ID是31
USDT 的协议结构从底层到顶层大致是:「比特币协议 -> Omni 层协议 -> USDT」,也就是说,USDT 是基于比特币的一种代币(token);
另外USDT也出了最新的以太坊(ERC20 标准)版本,但发行量和流通量都太小,所以还是基于比特币 Omni 层协议的经典USDT。
可以安装并运行一个 Omni Core 节点客户端,然后利用其提供的 RPC 接口,实现我们 USDT 出入金所需的代币发送、接收等功能。
调用时http响应时间默认设置3秒超时会失败,实际已转出成功,需要改成10秒或更长后才可以正常接收到返回状态。
usdt基于btc的,所以钱包里转入转出都需要通过比特币链上操作都需要btc手续费,这也是很多交易所有最低充值额度的限制的原因。
阅读全文
摘要:比特币节点同步问题
有朋友搭建了几个比特币节点,数据是同步最新的,高度都是最新的,但节点里都只能查到一部分交易记录,不知道是什么原因。
可能是国内的节点太少了,相邻节点数太少,自己的节点服务器在国内导致的,一般放到新加波那边比较好,或者改配置文件把相邻节点数调大。
另外还可能是有些节点设置了轻钱包,只保存自己的交易记录导致的
阅读全文
摘要:Vue用axios跨域访问数据
axios是vue-resource的替代品,vue-resource不再维护。
安装axios:npm install axios
使用vue-cli开发时,由于项目本身启动本地服务是需要占用一个端口的,所以会产生跨域的问题。在使用webpack做构建工具的项目中,使用proxyTable代理实现跨域是一种比较方便的选择。
proxyTable相关配置及使用说明:
在config/index.js文件中,找到dev对象下proxyTable对象进行跨域设置,配置如下:
阅读全文
摘要:vue之vue-cookies安装和使用说明
安装,在对应项目根目录下执行:
npm install vue-cookies --save
使用:
import Vue from 'Vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
阅读全文
摘要:vuejs目录结构启动项目安装nodejs命令,api配置信息思维导图版
阅读全文
摘要:使用以太坊智能合约实现面向需要做凭证的企业服务帮助企业信息凭证区块链化
以太坊除数字货币方面的应用外,还可以存储无法被篡改/删除的数据,发送不超过44KB的数据
将任意文件写入以太坊区块的方法,把重要事件,历史事件,人生轨迹加密记录到区块链永久封存 - 流风,飘然的风 - 博客园
https://www.cnblogs.com/zdz8207/p/qkl-eth-event.html
阅读全文