前端之旅第12页

去分类设置中添加分类描述吧

vue-cli 项目中引入jquery

2017-06-06admin阅读(2179)评论(0)

首先安装jquery

npm install jquery --save

1	npm install jquery --save

然后打开 webpack.base.conf.js

配置如下:

var webpack = require('webpack')
顶部引入webpack
resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
            'jquery': 'jquery'
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            jquery: "jquery",
            "window.jQuery": "jquery"
        })
    ],

var webpack = require('webpack')

顶部引入webpack

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

'jquery': 'jquery'

}

plugins: [

new webpack.ProvidePlugin({

$: "jquery",

jQuery: "jquery",

jquery: "jquery",

"window.jQuery": "jquery"

})

npm run dev ,就可以全局使用 $ 了!

记录两个关于图片和文件的Html5新属性

2017-06-06admin阅读(2157)评论(0)

第一, 将图片转为base64编码

let reader = new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onload = function(e){
    console.log(this.result);
};

let reader = new FileReader();

reader.readAsDataURL(e.target.files[0]);

reader.onload = function(e){

console.log(this.result);

};

第二, 创建预览图,

let img = new Image();
thumbUrl = img.src = URL.createObjectURL(e.target.files[0]);

1 2	let img = new Image(); thumbUrl = img.src = URL.createObjectURL(e.target.files[0]);

生成的预览图Url如下: blob:http://localhost:8080/d627b6fd-60e9-4604-a77f-62e3d90673eb

关于移动端在QQ内置浏览器打开页面分享自定义内容问题

2017-05-05admin阅读(2882)评论(1)

起因

微信里分享到QQ,微信,朋友圈等等都有借口可以使用,虽然复杂但是可用,QQ里分享一直以为不能自定义,前几天无意间看到QQ也能自定义,于是我自己试了一下,测试可用!

具体做法是直接修改meta标签,加入指定的标签就可以!

<meta name="description" itemprop="description" content="这是来自{$pro.nickname}的全景,超炫酷,快来看看吧!">
<meta itemprop="name" content="{$pro.name}">
<meta itemprop="image" content="{$pro.thumb_path}"><!-- 图片 -->

很简单就这三行代码,就可以配制出QQ的分享文案!

Web/PHPStorm ES6 语法支持以及实时编译

2017-04-26admin阅读(4317)评论(0)

最近用PHPstorm 写了点es6的语法的东西, what ? 编辑器报错了

查了查, 原来把编辑器设置一下,就可以了,

Preferences > Languages & Frameworks > JavaScript

然后,运行代码, what? 又报错了…

看来我们需要自动转码为Es5,不然还不行.

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在浏览器或其他环境执行。这意味着，你可以用ES6的方式编写程序，又不用担心现有环境是否支持。

而且你还希望每次修改代码时能自动转码，所以还要用到编辑器的file watcher（当然还有其他解决方案）

在根目录新建一个package.json

{
  "name": "hello",
  "version": "1.0.0",
}

{

"name": "hello",

"version": "1.0.0",

}

然后 npm install -g babel

安装babel

Preferences > Tools > File watchers

File Type：配置该监听器监听的文件类型，可以在Preferences > Editor > File types中配置
Scope：配置该监听器的监听范围，可自定义新的范围，也可以使用Preferences > Appearance & Behavior > Scopes
Program：babel的安装位置
Arguments：命令执行参数，参见Babel CLI
Working directory：babel命令执行的位置，默认为文件所在目录

但是还没搞定！现在只是搞定了自动转换的功能，系统默认把ES6 compile成了ES6..（你应该会发现compile出来的东西跟原来的一样..Generator函数并没有被转换成ES5的格式）

所以我们需要安装Babel的preset以正确识别ES6代码；和刚才一样，在npm安装babel的ES6的preset
npm install --save-dev babel-preset-es2015

在根目录下新建一个.babelrc文件（就是babel在当前项目的配置文件），写上

{
  "presets": [
    "es2015"
  ]
}

{

"presets": [

"es2015"

]

}

OK搞定！保存再回去看一下main-compiled.js 应该就变成这个样子啦，现在你在main.js里直接写ES6代码，IDE都会自动compile成ES5的代码在这里啦～

这样对文件做修改会随时生成编译成ES5的文件以及sourceMap文件

function he(a=1,b=2) {
    console.log(123);
}

function he(a=1,b=2) {

console.log(123);

}

编译后

"use strict";

function he() {
    var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
    var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;

    console.log(123);
}
//# sourceMappingURL=c.js.map

"use strict";

function he() {

var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;

var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;

console.log(123);

}

//# sourceMappingURL=c.js.map

大功告成!

微信小程序框架 wepy 实现组件事件交互及通讯

2017-04-18admin阅读(8102)评论(0)

之前的微信小程序开发框架 wepy 试水记录记录了 wepy的安装过程,

今天有时间,又简单做了个小Demo试试,主要包含事件, 组件通讯,组件之间事件传输等等!

一组件事件传输

首先在 index.wpy 中, 引入我们的测试组件

import test from '../components/test

定义组件,定义一些数据

//定义组件
components = {
    footer:footer,
    header:header,
    list:list,
    search:search,
    test:test
}
//定义数据
data={
    imgUrls: [
        'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    parentTitle: '这是啥啥啥'
};

//定义组件

components = {

footer:footer,

header:header,

list:list,

search:search,

test:test

}

//定义数据

data={

imgUrls: [

'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'

indicatorDots: false,

autoplay: true,

interval: 5000,

duration: 1000,

parentTitle: '这是啥啥啥'

};

首先的话,我们看看组件之间的事件传输,

wepy.component 基类提供三个方法 $broadcast，$emit，$invoke，

因此任一页面或任一组件都可以调用上述三种方法实现通信与交互，
$broadcast事件是由父组件发起，所有子组件都会收到此广播事件，除非事件被手动取消。事件广播的顺序为广度优先搜索顺序

$emit与$broadcast正好相反，事件发起组件的父组件会依次接收到$emit事件

$invoke是一个组件对另一个组件的直接调用，通过传入的组件路径找到相应组件，然后再调用其方法。

如果想在Page_Index中调用组件A的某个方法：

this.$invoke('ComA', 'someMethod', 'someArgs');

如果想在组件A中调用组件G的某个方法：

this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');

我们打开 test.wpy 组件, 在组件渲染完成事件中调用一次父组件的方法!

onLoad () {
 this.$emit('some-event');
}

onLoad () {

this.$emit('some-event');

}

在父组件也就是 index.wpy 里面接收事件

//组件事件
events = {
    'some-event':function () {
        console.info('你好,我是子组件调用夫组件的方法');
    }
}

//组件事件

events = {

'some-event':function () {

console.info('你好,我是子组件调用夫组件的方法');

}

父组件给子组件传递事件

onLoad = function () {
    this.$broadcast('testClick');
    this.setData({title: 'this is title'});
}

onLoad = function () {

this.$broadcast('testClick');

this.setData({title: 'this is title'});

}

子组件里

events = {
    testClick(){
        console.info('我是夫组件调用的子组件方法');
    }
};

events = {

testClick(){

console.info('我是夫组件调用的子组件方法');

}

};

二 ,组件props数据传输

在父组件里先import 进来组件然后使用, 和Vue类似

import wepy from 'wepy'
import footer from '../components/common/footer'
import header from  '../components/common/header'
import list from '../components/list'
import search from '../components/panel'
import test from '../components/test'
export default class Index extends wepy.page {
    config = {
        navigationBarTitleText: 'test'
    };
    //定义组件
    components = {
        footer:footer,
        header:header,
        list:list,
        search:search,
        test:test
    },

import wepy from 'wepy'

import footer from '../components/common/footer'

import header from '../components/common/header'

import list from '../components/list'

import search from '../components/panel'

import test from '../components/test'

export default class Index extends wepy.page {

config = {

navigationBarTitleText: 'test'

};

//定义组件

components = {

footer:footer,

header:header,

list:list,

search:search,

test:test

数据定义

data={
    imgUrls: [
        'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    parentTitle: '这是啥啥啥'
};

data={

imgUrls: [

'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'

indicatorDots: false,

autoplay: true,

interval: 5000,

duration: 1000,

parentTitle: '这是啥啥啥'

};

index.wpy的模板里

<test title="我是夫组件传下来的" :img="imgUrls" :syncTitle.sync="imgUrls" :twoWayTitle="parentTitle"></test>

1	<test title="我是夫组件传下来的" :img="imgUrls" :syncTitle.sync="imgUrls" :twoWayTitle="parentTitle"></test>

test.wpy 组件

import wepy from 'wepy'
export default class Test extends wepy.component {
    props = {
        title:String,
        syncTitle: {},
        twoWayTitle: {
            type: Number,
            default: 50,
            twoWay: true
        }
    };
    data = {
        listd: []
    };
    events = {
        testClick(){
            console.info('我是夫组件调用的子组件方法');
        }
    };
    onLoad () {
        console.log(this.title);
        console.log(this.syncTitle);
        console.log(this.twoWayTitle);
        this.$emit('some-event');
    }
}

import wepy from 'wepy'

export default class Test extends wepy.component {

props = {

title:String,

syncTitle: {},

twoWayTitle: {

type: Number,

default: 50,

twoWay: true

}

};

data = {

listd: []

};

events = {

testClick(){

console.info('我是夫组件调用的子组件方法');

}

};

onLoad () {

console.log(this.title);

console.log(this.syncTitle);

console.log(this.twoWayTitle);

this.$emit('some-event');

}

附加==> 小程序Wepy文档

等有时间了,自己也写个小程序玩玩!!

微信小程序开发框架 wepy 试水记录

2017-04-10admin阅读(4819)评论(0)

###代码规范：

变量与方法使用尽量使用驼峰式命名，避免使用$开头。以$开头的方法或者属性为框架内建方法或者属性，可以被使用，使用前请参考API文档。
入口，页面，组件的命名后缀为.wpy。外链的文件可以是其它后缀。请参考wpy文件说明
使用ES6语法开发。框架在ES6下开发，因此也需要使用ES6开发小程序，ES6中有大量的语法糖可以让我们的代码更加简洁高效。
使用Promise 框架默认对小程序提供的API全都进行了 Promise 处理，甚至可以直接使用async/await等新特性进行开发。

安装wepy

以下安装都通过npm安装

安装 wepy 命令行工具

npm install wepy-cli -g

在开发目录生成开发DEMO

wepy new weixin

开发实时编译

wepy build --watch

编辑器配置,由于本人使用的是PHPstorm 编辑器,对于 .wpy 后缀的文件默认是不会产生高亮效果的,于是开始配置编辑器,

打开Preferences，搜索Plugins，搜索Vue.js插件并安装。
打开Preferences，搜索File Types，找到Vue.js Template，在Registered Patterns添加*.wpy，即可高亮。

settings->editor->file and …

接下来编辑器就支持.wpy文件了,

使用微信web开发者工具,找到dist编译目录,

页面有报错,找到如图,关掉,

好了,接下来就可以跑代码了!

redis PHP操作手册

2017-03-17admin阅读(1855)评论(0)

String 类型操作

string是redis最基本的类型，而且string类型是二进制安全的。意思是redis的string可以包含任何数据。比如jpg图片或者序列化的对象

$redis->set('key','TK');
$redis->set('number','1');
$redis->setex('key',5,'TK'); //设置有效期为5秒的键值
$redis->psetex('key',5000,'TK'); //设置有效期为5000毫秒(同5秒)的键值
$redis->setnx('key','XK'); //若键值存在返回false 不存在返回true
$redis->delete('key'); 删除键值 可以传入数组 array('key1','key2')删除多个键
$redis->getSet('key','XK'); //将键key的值设置为XK， 并返回这个键值原来的值TK
$ret = $redis->multi() //批量事务处理,不保证处理数据的原子性
->set('key1', 'val1')
->get('key1')
->setnx('key', 'val2')
->get('key2')
->exec();
$redis->watch('key'); // 监控键key 是否被其他客户端修改
如果KEY在调用watch()和exec()之间被修改，exec失败
function f($redis, $chan, $msg) { //频道订阅
switch($chan) {
case 'chan-1':
echo $msg;
break;

case 'chan-2':
echo $msg;
break;

case 'chan-2':
echo $msg;
break;
}
}

$redis->subscribe(array('chan-1', 'chan-2', 'chan-3'), 'f'); // subscribe to 3 chans

$redis->publish('chan-1', 'hello, world!'); // send message.
$redis->exists('key'); //验证键是否存在，存在返回true
$redis->incr('number'); //键值加1
$redis->incrby('number',-10); //键值加减10
$redis->incrByFloat('number', +/- 1.5); //键值加减小数
$redis->decr('number'); // 键值减1
$redis->decrBy('number',10); // 键值减10
$mget = $redis->mget(array('number','key')); // 批量获取键值,返回一个数组
$redis->mset(array('key0' => 'value0', 'key1' => 'value1')); // 批量设置键值
$redis->msetnx(array('key0' => 'value0', 'key1' => 'value1'));
// 批量设置键值，类似将setnx()方法批量操作
$redis->append('key', '-Smudge'); //原键值TK，将值追加到键值后面，键值为TK-Smudge
$redis->getRange('key', 0, 5); // 键值截取从0位置开始到5位置结束
$redis->getRange('key', -6, -1); // 字符串截取从-6(倒数第6位置)开始到-1(倒数第1位置)结束
$redis->setRange('key', 0, 'Smudge');
// 键值中替换字符串，0表示从0位置开始
有多少个字符替换多少位置，其中汉字占2个位置
$redis->strlen('key'); //键值长度
$redis->getBit('key');
$redis->setBit('key');

string是redis最基本的类型，而且string类型是二进制安全的。意思是redis的string可以包含任何数据。比如jpg图片或者序列化的对象

$redis->set('key','TK');

$redis->set('number','1');

$redis->setex('key',5,'TK'); //设置有效期为5秒的键值

$redis->psetex('key',5000,'TK'); //设置有效期为5000毫秒(同5秒)的键值

$redis->setnx('key','XK'); //若键值存在返回false 不存在返回true

$redis->delete('key'); 删除键值可以传入数组 array('key1','key2')删除多个键

$redis->getSet('key','XK'); //将键key的值设置为XK，并返回这个键值原来的值TK

$ret = $redis->multi() //批量事务处理,不保证处理数据的原子性

->set('key1', 'val1')

->get('key1')

->setnx('key', 'val2')

->get('key2')

->exec();

$redis->watch('key'); // 监控键key 是否被其他客户端修改

如果KEY在调用watch()和exec()之间被修改，exec失败

function f($redis, $chan, $msg) { //频道订阅

switch($chan) {

case 'chan-1':

echo $msg;

break;

case 'chan-2':

echo $msg;

break;

case 'chan-2':

echo $msg;

break;

}

$redis->subscribe(array('chan-1', 'chan-2', 'chan-3'), 'f'); // subscribe to 3 chans

$redis->publish('chan-1', 'hello, world!'); // send message.

$redis->exists('key'); //验证键是否存在，存在返回true

$redis->incr('number'); //键值加1

$redis->incrby('number',-10); //键值加减10

$redis->incrByFloat('number', +/- 1.5); //键值加减小数

$redis->decr('number'); // 键值减1

$redis->decrBy('number',10); // 键值减10

$mget = $redis->mget(array('number','key')); // 批量获取键值,返回一个数组

$redis->mset(array('key0' => 'value0', 'key1' => 'value1')); // 批量设置键值

$redis->msetnx(array('key0' => 'value0', 'key1' => 'value1'));

// 批量设置键值，类似将setnx()方法批量操作

$redis->append('key', '-Smudge'); //原键值TK，将值追加到键值后面，键值为TK-Smudge

$redis->getRange('key', 0, 5); // 键值截取从0位置开始到5位置结束

$redis->getRange('key', -6, -1); // 字符串截取从-6(倒数第6位置)开始到-1(倒数第1位置)结束

$redis->setRange('key', 0, 'Smudge');

// 键值中替换字符串，0表示从0位置开始

有多少个字符替换多少位置，其中汉字占2个位置

$redis->strlen('key'); //键值长度

$redis->getBit('key');

$redis->setBit('key');

list链表操作

$redis->delete('list-key'); // 删除链表
$redis->lPush('list-key', 'A'); //插入链表头部/左侧，返回链表长度
$redis->rPush('list-key', 'B'); //插入链表尾部/右侧，返回链表长度
$redis->lPushx('list-key', 'C');
// 插入链表头部/左侧,链表不存在返回0，存在即插入成功，返回当前链表长度
$redis->rPushx('list-key', 'C');
// 插入链表尾部/右侧,链表不存在返回0，存在即插入成功，返回当前链表长度
$redis->lPop('list-key'); //返回LIST顶部（左侧）的VALUE ,后入先出(栈)
$redis->rPop('list-key'); //返回LIST尾部（右侧）的VALUE ,先入先出（队列）
$redis->blPop();
$redis->brPop();
$redis->lSize('list-key');
// 如果是链表则返回链表长度，空链表返回0
若不是链表或者不为空，则返回false ,判断非链表 " === false "
$redis->lGet('list-key',-1); // 通过索引获取链表元素 0获取左侧一个 -1获取最后一个
$redis->lSet('list-key', 0, 'X'); //0位置元素替换为 X
$redis->lRange('list-key', 0, 3);
//链表截取 从0开始 3位置结束 ，结束位置为-1 获取开始位置之后的全部
$redis->lTrim('list-key', 0, 1); // 截取链表(不可逆) 从0索引开始 1索引结束
$redis->lRem('list-key', 'C', 2); //链表从左开始删除元素2个C
$redis->lInsert('list-key', Redis::BEFORE, 'C', 'X');
// 在C元素前面插入X , Redis::AfTER(表示后面插入)
链表不存在则插入失败 返回0 若元素不存在返回-1
$redis->rpoplpush('list-key', 'list-key2');
//从源LIST的最后弹出一个元素
并且把这个元素从目标LIST的顶部（左侧）压入目标LIST。

$redis->brpoplpush();
//rpoplpush的阻塞版本，这个版本有第三个参数用于设置阻塞时间
即如果源LIST为空，那么可以阻塞监听timeout的时间，如果有元素了则执行操作。

Set集合类型

set无序集合 不允许出现重复的元素 服务端可以实现多个 集合操作
$redis->sMembers('key'); //获取容器key中所有元素
$redis->sAdd('key' , 'TK');
// (从左侧插入,最后插入的元素在0位置),集合中已经存在TK 则返回false
不存在添加成功 返回true
$redis->sRem('key' , 'TK'); // 移除容器中的TK
$redis->sMove('key','key1','TK'); //将容易key中的元素TK 移动到容器key1 操作成功返回TRUE
$redis->sIsMember('key','TK'); //检查VALUE是否是SET容器中的成员
$redis->sCard('key'); //返回SET容器的成员数
$redis->sPop('key'); //随机返回容器中一个元素，并移除该元素
$redis->sRandMember('key');//随机返回容器中一个元素，不移除该元素
$redis->sInter('key','key1');
// 返回两个集合的交集 没有交集返回一个空数组，若参数只有一个集合，则返回集合对应的完整的数组
$redis->sInterStore('store','key','key1'); //将集合key和集合key1的交集 存入容器store 成功返回1
$redis->sUnion('key','key1'); //集合key和集合key1的并集 注意即使多个集合有相同元素 只保留一个

$redis->sUnionStore('store','key','key1');
//集合key和集合key1的并集保存在集合store中, 注意即使多个集合有相同元素 只保留一个
$redis->sDiff('key','key1','key2'); //返回数组，该数组元素是存在于key集合而不存在于集合key1 key2

$redis->delete('list-key'); // 删除链表

$redis->lPush('list-key', 'A'); //插入链表头部/左侧，返回链表长度

$redis->rPush('list-key', 'B'); //插入链表尾部/右侧，返回链表长度

$redis->lPushx('list-key', 'C');

// 插入链表头部/左侧,链表不存在返回0，存在即插入成功，返回当前链表长度

$redis->rPushx('list-key', 'C');

// 插入链表尾部/右侧,链表不存在返回0，存在即插入成功，返回当前链表长度

$redis->lPop('list-key'); //返回LIST顶部（左侧）的VALUE ,后入先出(栈)

$redis->rPop('list-key'); //返回LIST尾部（右侧）的VALUE ,先入先出（队列）

$redis->blPop();

$redis->brPop();

$redis->lSize('list-key');

// 如果是链表则返回链表长度，空链表返回0

若不是链表或者不为空，则返回false ,判断非链表 " === false "

$redis->lGet('list-key',-1); // 通过索引获取链表元素 0获取左侧一个 -1获取最后一个

$redis->lSet('list-key', 0, 'X'); //0位置元素替换为 X

$redis->lRange('list-key', 0, 3);

//链表截取从0开始 3位置结束，结束位置为-1 获取开始位置之后的全部

$redis->lTrim('list-key', 0, 1); // 截取链表(不可逆) 从0索引开始 1索引结束

$redis->lRem('list-key', 'C', 2); //链表从左开始删除元素2个C

$redis->lInsert('list-key', Redis::BEFORE, 'C', 'X');

// 在C元素前面插入X , Redis::AfTER(表示后面插入)

链表不存在则插入失败返回0 若元素不存在返回-1

$redis->rpoplpush('list-key', 'list-key2');

//从源LIST的最后弹出一个元素

并且把这个元素从目标LIST的顶部（左侧）压入目标LIST。

$redis->brpoplpush();

//rpoplpush的阻塞版本，这个版本有第三个参数用于设置阻塞时间

即如果源LIST为空，那么可以阻塞监听timeout的时间，如果有元素了则执行操作。

Set集合类型

set无序集合不允许出现重复的元素服务端可以实现多个集合操作

$redis->sMembers('key'); //获取容器key中所有元素

$redis->sAdd('key' , 'TK');

// (从左侧插入,最后插入的元素在0位置),集合中已经存在TK 则返回false

不存在添加成功返回true

$redis->sRem('key' , 'TK'); // 移除容器中的TK

$redis->sMove('key','key1','TK'); //将容易key中的元素TK 移动到容器key1 操作成功返回TRUE

$redis->sIsMember('key','TK'); //检查VALUE是否是SET容器中的成员

$redis->sCard('key'); //返回SET容器的成员数

$redis->sPop('key'); //随机返回容器中一个元素，并移除该元素

$redis->sRandMember('key');//随机返回容器中一个元素，不移除该元素

$redis->sInter('key','key1');

// 返回两个集合的交集没有交集返回一个空数组，若参数只有一个集合，则返回集合对应的完整的数组

$redis->sInterStore('store','key','key1'); //将集合key和集合key1的交集存入容器store 成功返回1

$redis->sUnion('key','key1'); //集合key和集合key1的并集注意即使多个集合有相同元素只保留一个

$redis->sUnionStore('store','key','key1');

//集合key和集合key1的并集保存在集合store中, 注意即使多个集合有相同元素只保留一个

$redis->sDiff('key','key1','key2'); //返回数组，该数组元素是存在于key集合而不存在于集合key1 key2

Zset数据类型

**(stored set) 和 set 一样是字符串的集合，不同的是每个元素都会关联一个 double 类型的 score
redis的list类型其实就是一个每个子元素都是string类型的双向链表。**

$redis->zAdd('tkey', 1, 'A');
// 插入集合tkey中，A元素关联一个分数，插入成功返回1
同时集合元素不可以重复, 如果元素已经存在返回 0
$redis->zRange('tkey',0,-1); // 获取集合元素，从0位置 到 -1 位置
$redis->zRange('tkey',0,-1, true);
// 获取集合元素，从0位置 到 -1 位置, 返回一个关联数组 带分数
array([A] => 0.01,[B] => 0.02,[D] => 0.03) 其中小数来自zAdd方法第二个参数
$redis->zDelete('tkey', 'B'); // 移除集合tkey中元素B 成功返回1 失败返回 0
$redis->zRevRange('tkey', 0, -1); // 获取集合元素，从0位置 到 -1 位置，数组按照score降序处理

$redis->zRevRange('tkey', 0, -1,true);
// 获取集合元素，从0位置 到 -1 位置，数组按照score降序处理 返回score关联数组
$redis->zRangeByScore('tkey', 0, 0.2,array('withscores' => true));
//获取几个tkey中score在区间[0,0.2]元素 ,score由低到高排序,
元素具有相同的score，那么会按照字典顺序排列 , withscores 控制返回关联数组
$redis->zRangeByScore('tkey', 0.1, 0.36, array('withscores' => TRUE, 'limit' => array(0, 1)));
//其中limit中 0和1 表示取符合条件集合中 从0位置开始，向后扫描1个 返回关联数组
$redis->zCount('tkey', 2, 10); // 获取tkey中score在区间[2, 10]元素的个数
$redis->zRemRangeByScore('tkey', 1, 3); // 移除tkey中score在区间[1, 3](含边界)的元素
$redis->zRemRangeByRank('tkey', 0, 1);
//默认元素score是递增的，移除tkey中元素 从0开始到-1位置结束
$redis->zSize('tkey'); //返回存储在key对应的有序集合中的元素的个数
$redis->zScore('tkey', 'A'); // 返回集合tkey中元素A的score值
$redis->zRank('tkey', 'A');
// 返回集合tkey中元素A的索引值
z集合中元素按照score从低到高进行排列 ，即最低的score index索引为0
$redis->zIncrBy('tkey', 2.5, 'A'); // 将集合tkey中元素A的score值 加 2.5
$redis->zUnion('union', array('tkey', 'tkey1'));
// 将集合tkey和集合tkey1元素合并于集合union , 并且新集合中元素不能重复
返回新集合的元素个数， 如果元素A在tkey和tkey1都存在，则合并后的元素A的score相加
$redis->zUnion('ko2', array('k1', 'k2'), array(5, 2));
// 集合k1和集合k2并集于k02 ，array(5,1)中元素的个数与子集合对应，然后 5 对应k1
k1每个元素score都要乘以5 ，同理1对应k2，k2每个元素score乘以1
然后元素按照递增排序，默认相同的元素score(SUM)相加
$redis->zUnion('ko2', array('k1', 'k2'), array(10, 2),'MAX');
// 各个子集乘以因子之后，元素按照递增排序，相同的元素的score取最大值(MAX)
也可以设置MIN 取最小值
$redis->zInter('ko1', array('k1', 'k2'));
// 集合k1和集合k2取交集于k01 ，且按照score值递增排序
如果集合元素相同，则新集合中的元素的score值相加
$redis->zInter('ko1', array('k1', 'k2'), array(5, 1));
//集合k1和集合k2取交集于k01 ，array(5,1)中元素的个数与子集合对应，然后 5 对应k1
k1每个元素score都要乘以5 ，同理1对应k2，k2每个元素score乘以1
，然后元素score按照递增排序，默认相同的元素score(SUM)相加
$redis->zInter('ko1', array('k1', 'k2'), array(5, 1),'MAX');
// 各个子集乘以因子之后，元素score按照递增排序，相同的元素score取最大值(MAX)
也可以设置MIN 取最小值

**(stored set) 和 set 一样是字符串的集合，不同的是每个元素都会关联一个 double 类型的 score

redis的list类型其实就是一个每个子元素都是string类型的双向链表。**

$redis->zAdd('tkey', 1, 'A');

// 插入集合tkey中，A元素关联一个分数，插入成功返回1

同时集合元素不可以重复, 如果元素已经存在返回 0

$redis->zRange('tkey',0,-1); // 获取集合元素，从0位置到 -1 位置

$redis->zRange('tkey',0,-1, true);

// 获取集合元素，从0位置到 -1 位置, 返回一个关联数组带分数

array([A] => 0.01,[B] => 0.02,[D] => 0.03) 其中小数来自zAdd方法第二个参数

$redis->zDelete('tkey', 'B'); // 移除集合tkey中元素B 成功返回1 失败返回 0

$redis->zRevRange('tkey', 0, -1); // 获取集合元素，从0位置到 -1 位置，数组按照score降序处理

$redis->zRevRange('tkey', 0, -1,true);

// 获取集合元素，从0位置到 -1 位置，数组按照score降序处理返回score关联数组

$redis->zRangeByScore('tkey', 0, 0.2,array('withscores' => true));

//获取几个tkey中score在区间[0,0.2]元素 ,score由低到高排序,

元素具有相同的score，那么会按照字典顺序排列 , withscores 控制返回关联数组

$redis->zRangeByScore('tkey', 0.1, 0.36, array('withscores' => TRUE, 'limit' => array(0, 1)));

//其中limit中 0和1 表示取符合条件集合中从0位置开始，向后扫描1个返回关联数组

$redis->zCount('tkey', 2, 10); // 获取tkey中score在区间[2, 10]元素的个数

$redis->zRemRangeByScore('tkey', 1, 3); // 移除tkey中score在区间[1, 3](含边界)的元素

$redis->zRemRangeByRank('tkey', 0, 1);

//默认元素score是递增的，移除tkey中元素从0开始到-1位置结束

$redis->zSize('tkey'); //返回存储在key对应的有序集合中的元素的个数

$redis->zScore('tkey', 'A'); // 返回集合tkey中元素A的score值

$redis->zRank('tkey', 'A');

// 返回集合tkey中元素A的索引值

z集合中元素按照score从低到高进行排列，即最低的score index索引为0

$redis->zIncrBy('tkey', 2.5, 'A'); // 将集合tkey中元素A的score值加 2.5

$redis->zUnion('union', array('tkey', 'tkey1'));

// 将集合tkey和集合tkey1元素合并于集合union , 并且新集合中元素不能重复

返回新集合的元素个数，如果元素A在tkey和tkey1都存在，则合并后的元素A的score相加

$redis->zUnion('ko2', array('k1', 'k2'), array(5, 2));

// 集合k1和集合k2并集于k02 ，array(5,1)中元素的个数与子集合对应，然后 5 对应k1

k1每个元素score都要乘以5 ，同理1对应k2，k2每个元素score乘以1

然后元素按照递增排序，默认相同的元素score(SUM)相加

$redis->zUnion('ko2', array('k1', 'k2'), array(10, 2),'MAX');

// 各个子集乘以因子之后，元素按照递增排序，相同的元素的score取最大值(MAX)

也可以设置MIN 取最小值

$redis->zInter('ko1', array('k1', 'k2'));

// 集合k1和集合k2取交集于k01 ，且按照score值递增排序

如果集合元素相同，则新集合中的元素的score值相加

$redis->zInter('ko1', array('k1', 'k2'), array(5, 1));

//集合k1和集合k2取交集于k01 ，array(5,1)中元素的个数与子集合对应，然后 5 对应k1

k1每个元素score都要乘以5 ，同理1对应k2，k2每个元素score乘以1

，然后元素score按照递增排序，默认相同的元素score(SUM)相加

$redis->zInter('ko1', array('k1', 'k2'), array(5, 1),'MAX');

// 各个子集乘以因子之后，元素score按照递增排序，相同的元素score取最大值(MAX)

也可以设置MIN 取最小值

Hash数据类型

redis hash是一个string类型的field和value的映射表.它的添加，删除操作都是O(1)（平均）.hash特别适合用于存储对象。

$redis->hSet('h', 'name', 'TK'); // 在h表中 添加name字段 value为TK
$redis->hSetNx('h', 'name', 'TK');
// 在h表中 添加name字段 value为TK 如果字段name的value存在返回false 否则返回 true
$redis->hGet('h', 'name'); // 获取h表中name字段value
$redis->hLen('h'); // 获取h表长度即字段的个数
$redis->hDel('h','email'); // 删除h表中email 字段
$redis->hKeys('h'); // 获取h表中所有字段
$redis->hVals('h'); // 获取h表中所有字段value
$redis->hGetAll('h'); // 获取h表中所有字段和value 返回一个关联数组(字段为键值)
$redis->hExists('h', 'email'); //判断email 字段是否存在与表h 不存在返回false
$redis->hSet('h', 'age', 28);
$redis->hIncrBy('h', 'age', -2);
// 设置h表中age字段value加(-2) 如果value是个非数值 则返回false 否则，返回操作后的value
$redis->hIncrByFloat('h', 'age', -0.33);
// 设置h表中age字段value加(-2.6) 如果value是个非数值 则返回false 否则
返回操作后的value(小数点保留15位)
$redis->hMset('h', array('score' => '80', 'salary' => 2000)); // 表h 批量设置字段和value

$redis->hMGet('h', array('score','salary')); // 表h 批量获取字段的value

redis hash是一个string类型的field和value的映射表.它的添加，删除操作都是O(1)（平均）.hash特别适合用于存储对象。

$redis->hSet('h', 'name', 'TK'); // 在h表中添加name字段 value为TK

$redis->hSetNx('h', 'name', 'TK');

// 在h表中添加name字段 value为TK 如果字段name的value存在返回false 否则返回 true

$redis->hGet('h', 'name'); // 获取h表中name字段value

$redis->hLen('h'); // 获取h表长度即字段的个数

$redis->hDel('h','email'); // 删除h表中email 字段

$redis->hKeys('h'); // 获取h表中所有字段

$redis->hVals('h'); // 获取h表中所有字段value

$redis->hGetAll('h'); // 获取h表中所有字段和value 返回一个关联数组(字段为键值)

$redis->hExists('h', 'email'); //判断email 字段是否存在与表h 不存在返回false

$redis->hSet('h', 'age', 28);

$redis->hIncrBy('h', 'age', -2);

// 设置h表中age字段value加(-2) 如果value是个非数值则返回false 否则，返回操作后的value

$redis->hIncrByFloat('h', 'age', -0.33);

// 设置h表中age字段value加(-2.6) 如果value是个非数值则返回false 否则

返回操作后的value(小数点保留15位)

$redis->hMset('h', array('score' => '80', 'salary' => 2000)); // 表h 批量设置字段和value

$redis->hMGet('h', array('score','salary')); // 表h 批量获取字段的value

Hash（哈希）操作

/**
 *
 * Hash操作
 * 哈希操作
 * 可理解为数据库操作
 * 
 */

//为user表中的字段赋值。成功返回1，失败返回0。若user表不存在会先创建表再赋值，若字段已存在会覆盖旧值。
$redis->hSet('user', 'name', '222');

//获取user表中指定字段的值。若user表不存在则返回false。
$redis->hGet('user', 'realname');

//查看user表的某个字段是否存在，存在返回true，否则返回false。
$redis->hExists('user', 'realname');

//删除user表的一个字段，不支持删除多个字段。成功返回1，否则返回0。
$redis->hDel('user', '222');

//同时设置某个user表的多个字段值。成功返回true。
$redis->hMset('user', ['name' => 'jet', 'age' => 18]);

//同时获取某个user表的多个字段值。其中不存在的字段值为false。
$redis->hMget('user', ['name', 'age']);

//获取某个user表所有的字段和值。
$redis->hGetAll('user');

//获取某个user表所有字段名。user表不存在时返回空数组，key不为user表时返回false。
$redis->hKeys('user');

//获取某个user表所有字段值。
$redis->hVals('user');

//为user表中不存在的字段赋值。若user表不存在则先创建，若字段已存在则不做任何操作。设置成功返回true，否则返回false。
$redis->hSetNx('user', 'realname', 'jetwu');

//获取某个user表的字段数量。若user表不存在返回0，若user不是hash表则返回false。
$redis->hLen('user');

//为user表中的指定字段加上指定的数值，若user表不存在则先创建，若字段不存在则先初始化值为0再进行操作，若字段值为字符串则返回false。设置成功返回字段新值。
$redis->hIncrBy('user', 'age', 10);

//为user表中的指定字段加上指定浮点数值。

/**

* Hash操作

* 哈希操作

* 可理解为数据库操作

//为user表中的字段赋值。成功返回1，失败返回0。若user表不存在会先创建表再赋值，若字段已存在会覆盖旧值。

$redis->hSet('user', 'name', '222');

//获取user表中指定字段的值。若user表不存在则返回false。

$redis->hGet('user', 'realname');

//查看user表的某个字段是否存在，存在返回true，否则返回false。

$redis->hExists('user', 'realname');

//删除user表的一个字段，不支持删除多个字段。成功返回1，否则返回0。

$redis->hDel('user', '222');

//同时设置某个user表的多个字段值。成功返回true。

$redis->hMset('user', ['name' => 'jet', 'age' => 18]);

//同时获取某个user表的多个字段值。其中不存在的字段值为false。

$redis->hMget('user', ['name', 'age']);

//获取某个user表所有的字段和值。

$redis->hGetAll('user');

//获取某个user表所有字段名。user表不存在时返回空数组，key不为user表时返回false。

$redis->hKeys('user');

//获取某个user表所有字段值。

$redis->hVals('user');

//为user表中不存在的字段赋值。若user表不存在则先创建，若字段已存在则不做任何操作。设置成功返回true，否则返回false。

$redis->hSetNx('user', 'realname', 'jetwu');

//获取某个user表的字段数量。若user表不存在返回0，若user不是hash表则返回false。

$redis->hLen('user');

//为user表中的指定字段加上指定的数值，若user表不存在则先创建，若字段不存在则先初始化值为0再进行操作，若字段值为字符串则返回false。设置成功返回字段新值。

$redis->hIncrBy('user', 'age', 10);

//为user表中的指定字段加上指定浮点数值。

Vue开源项目库汇总

2017-03-16admin阅读(1935)评论(0)

最近做了一个Vue开源项目库汇总，里面集合了OpenDigg 上的优质的Vue开源项目库，方便移动开发人员便捷的找到自己需要的项目工具等，感兴趣的可以到GitHub上给个star。

UI组件

element ★9305 – 饿了么出品的Vue2的web UI工具套件
Vux ★6802 – 基于Vue和WeUI的组件库
mint-ui ★4776 – Vue 2的移动UI元素
iview ★4458 – 基于 Vuejs 的开源 UI 组件库
Keen-UI ★2363 – 轻量级的基本UI组件合集
vue-material ★2207 – 通过Vue Material和Vue 2建立精美的app应用
muse-ui ★1992 – 三端样式一致的响应式 UI 库
vuetify ★1678 – 为移动而生的Vue JS 2组件框架
vonic ★1494 – 快速构建移动端单页应用
eme ★1390 – 优雅的Markdown编辑器
vue-multiselect ★1166 – Vue.js选择框解决方案
vue-table ★824 – 简化数据表格
VueCircleMenu ★776 – 漂亮的vue圆环菜单
vue-chat ★748 – vuejs和vuex及webpack的聊天示例
radon-ui ★633 – 快速开发产品的Vue组件库
vue-waterfall ★605 – Vue.js的瀑布布局组件
vue-carbon ★595 – 基于 vue 开发MD风格的移动端
vue-beauty ★569 – 由vue和ant design创建的优美UI组件
vue-blu ★557 – 帮助你轻松创建web应用
vueAdmin ★556 – 基于vuejs2和element的简单的管理员模板
vue-syntax-highlight ★551 – Sublime Text语法高亮
vue-infinite-scroll ★524 – VueJS的无限滚动指令
Vue.Draggable ★493 – 实现拖放和视图模型数组同步
vue-awesome-swiper ★476 – vue.js触摸滑动组件
vue-calendar ★465 – 日期选择插件
bootstrap-vue ★458 – 应用于Vuejs2的Twitter的Bootstrap 4组件
vue-swipe ★361 – VueJS触摸滑块
vue-amap ★346 – 基于Vue 2和高德地图的地图组件
vue-chartjs ★333 – vue中的Chartjs的封装
vue-datepicker ★331 – 日历和日期选择组件
markcook ★318 – 好看的markdown编辑器
vue-google-maps ★287 – 带有双向数据绑定Google地图组件
vue-progressbar ★248 – vue轻量级进度条
vue-picture-input ★236 – 移动友好的图片文件输入组件
vue-infinite-loading ★224 – VueJS的无限滚动插件
vue-upload-component ★204 – Vuejs文件上传组件
vue-datetime-picker ★197 – 日期时间选择控件
vue-scroller ★196 – Vonic UI的功能性组件
vue2-calendar ★181 – 支持lunar和日期事件的日期选择器
vue-video-player ★178 – VueJS视频及直播播放器
vue-fullcalendar ★176 – 基于vue.js的全日历组件
rubik ★170 – 基于Vuejs2的开源 UI 组件库
VueStar ★169 – 带星星动画的vue点赞按钮
vue-mugen-scroll ★167 – 无限滚动组件
mint-loadmore ★167 – VueJS的双向下拉刷新组件
vue-tables-2 ★162 – 显示数据的bootstrap样式网格
vue-virtual-scroller ★158 – 带任意数目数据的顺畅的滚动
DataVisualization ★149 – 数据可视化
vue-quill-editor ★149 – 基于Quill适用于Vue2的富文本编辑器
Vueditor ★138 – 所见即所得的编辑器
vue-html5-editor ★132 – html5所见即所得编辑器
vue-msgbox ★127 – vuejs的消息框
vue-slider ★126 – vue 滑动组件
vue-core-image-upload ★124 – 轻量级的vue上传插件
vue-slide ★121 – vue轻量级滑动组件
vue-lazyload-img ★118 – 移动优化的vue图片懒加载插件
vue-drag-and-drop-list ★114 – 创建排序列表的Vue指令
vue-progressive-image ★107 – Vue的渐进图像加载插件
vuwe ★107 – 基于微信WeUI所开发的专用于Vue2的组件库
vue-dropzone ★105 – 用于文件上传的Vue组件
vue-charts ★101 – 轻松渲染一个图表
vue-swiper ★95 – 易于使用的滑块组件
vue-images ★93 – 显示一组图片的lightbox组件
vue-carousel-3d ★91 – VueJS的3D轮播组件
vue-region-picker ★89 – 选择中国的省份市和地区
vue-typer ★89 – 模拟用户输入选择和删除文本的Vue组件
vue-impression ★88 – 移动Vuejs2 UI元素
vue-datatable ★87 – 使用Vuejs创建的DataTableView
vue-instant ★86 – 轻松创建自动提示的自定义搜索控件
vue-dragging ★86 – 使元素可以拖拽
vue-slider-component ★85 – 在vue1和vue2中使用滑块
vue2-loading-bar ★76 – 最简单的仿Youtube加载条视图
vue-datepicker ★75 – 漂亮的Vue日期选择器组件
vue-video ★70 – Vue.js的HTML5视频播放器
vue-toast-mobile ★68 – VueJS的toast插件
vue-image-crop-upload ★67 – vue图片剪裁上传组件
vue-tooltip ★66 – 带绑定信息提示的提示工具
vue-highcharts ★66 – HighCharts组件
vue-touch-ripple ★62 – vuejs的触摸ripple组件
coffeebreak ★61 – 实时编辑CSS组件工具
vue-datasource ★60 – 创建VueJS动态表格
vue2-timepicker ★60 – 下拉时间选择器
vue-date-picker ★59 – VueJS日期选择器组件
vue-scrollbar ★58 – 最简单的滚动区域组件
vue-quill ★56 – vue组件构建quill编辑器
vue-google-signin-button ★55 – 导入谷歌登录按钮
vue-svgicon ★53 – 创建svg图标组件的工具
vue-float-label ★49 – VueJS浮动标签模式
vue-baidu-map ★46 – 基于 Vue 2的百度地图组件库
vue-social-sharing ★45 – 社交分享组件
vue2-editor ★44 – HTML编辑器
vue-tagsinput ★41 – 基于VueJS的标签组件
vue-easy-slider ★41 – Vue 2.x的滑块组件
datepicker ★38 – 基于flatpickr的时间选择组件
vue-chart ★37 – 强大的高速的vue图表解析
vue-music-master ★37 – vue手机端网页音乐播放器
handsontable ★35 – 网页表格组件
vue-simplemde ★35 – VueJS的Markdown编辑器组件
vue-popup-mixin ★35 – 用于管理弹出框的遮盖层
cubeex ★33 – 包含一套完整的移动UI
vue-fullcalendar ★32 – vue FullCalendar封装
vue-material-design ★32 – Vue MD风格组件
vue-morris ★31 – Vuejs组件封装Morrisjs库
we-vue ★30 – Vue2及weui1开发的组件
vue-image-clip ★29 – 基于vue的图像剪辑组件
vue-bootstrap-table ★29 – 可排序可检索的表格
vue-radial-progress ★28 – Vue.js放射性进度条组件
vue-slick ★28 – 实现流畅轮播框的vue组件
vue-pull-to-refresh ★27 – Vue2的上拉下拉
vue-form-2 ★26 – 全面的HTML表单管理的解决方案
vue-side-nav ★26 – 响应式的侧边导航
mint-indicator ★26 – VueJS移动加载指示器插件
chartjs ★24 – Vue Bulma的chartjs组件
vue-scroll ★24 – vue滚动
vue-ripple ★24 – 制作谷歌MD风格涟漪效果的Vue组件
vue-touch-keyboard ★22 – VueJS虚拟键盘组件
vue-chartkick ★22 – VueJS一行代码实现优美图表
vue-ztree ★21 – 用 vue 写的树层级组件
vue-m-carousel ★20 – vue 移动端轮播组件
vue-datepicker-simple ★20 – 基于vue的日期选择器
vue-tabs ★20 – 多tab页轻型框架
vue-verify-pop ★19 – 带气泡提示的vue校验插件
vue-parallax ★15 – 整洁的视觉效果
vue-img-loader ★14 – 图片加载UI组件
vue-typewriter ★13 – vue组件类型
vue-smoothscroll ★12 – smoothscroll的VueJS版本
vue-city ★10 – 城市选择器
vue-tree ★10 – vue树视图组件
vue-ios-alertview ★8 – iOS7+ 风格的alertview服务
dd-vue-component ★7 – 订单来了的公共组件库
paco-ui-vue ★7 – PACOUI的vue组件
vue-cmap ★5 – Vue China map可视化组件
vue-button ★4 – Vue按钮组件

开发框架

vue.js ★45466 – 流行的轻量高效的前端组件化方案
vue-admin ★3222 – Vue管理面板框架
electron-vue ★1273 – Electron及VueJS快速启动样板
vue-2.0-boilerplate ★241 – Vue2单页应用样板
vue-spa-template ★223 – 前后端分离后的单页应用开发
Framework7-Vue ★210 – VueJS与Framework7结合
vue-bulma ★132 – 轻量级高性能MVVM Admin UI框架
vue-webgulp ★100 – 仿VueJS Vue loader示例
vue-element-starter ★34 – vue启动页

实用库

vuex ★5997 – 专为 Vue.js 应用程序开发的状态管理模式
vuelidate ★750 – 简单轻量级的基于模块的Vue.js验证
qingcheng ★677 – qingcheng主题
vue-desktop ★461 – 创建管理面板网站的UI库
vue-meta ★257 – 管理app的meta信息
vue-axios ★209 – 将axios整合到VueJS的封装
vue-svg-icon ★116 – vue2的可变彩色svg图标方案
avoriaz ★110 – VueJS测试实用工具库
vue-framework7 ★83 – 结合VueJS使用的Framework7组件
vue-bootstrap-modal ★78 – vue的Bootstrap样式组件
vuep ★72 – 用实时编辑和预览来渲染Vue组件
vue-online ★67 – reactive的在线和离线组件
vue-lazy-render ★66 – 用于Vue组件的延迟渲染
vue-password-strength-meter ★65 – 交互式密码强度计
element-admin ★57 – 支持 vuecli 的 Element UI 的后台模板
vue-electron ★55 – 将选择的API封装到Vue对象中的插件
cleave ★55 – 基于cleave.js的Cleave组件
vue-events ★54 – 简化事件的VueJS插件
vue-shortkey ★53 – 应用于Vue.js的Vue-ShortKey 插件
vue-cordova ★50 – Cordova的VueJS插件
vue-router-transition ★49 – 页面过渡插件
vue-gesture ★48 – VueJS的手势事件插件
http-vue-loader ★46 – 从html及js环境加载vue文件
vue-qart ★46 – 用于qartjs的Vue2指令
vuemit ★44 – 处理VueJS事件
vue-websocket ★42 – VueJS的Websocket插件
vue-local-storage ★41 – 具有类型支持的Vuejs本地储存插件
lazy-vue ★41 – 懒加载图片
vue-bus ★36 – VueJS的事件总线
vue-reactive-storage ★35 – vue插件的Reactive层
vue-notifications ★32 – 非阻塞通知库
vue-lazy-component ★32 – 懒加载组件或者元素的Vue指令
v-media-query ★32 – vue中添加用于配合媒体查询的方法
vue-observe-visibility ★31 – 当元素在页面上可见或隐藏时检测
vue-ts-loader ★29 – 在Vue装载机检查脚本
vue-pagination-2 ★28 – 简单通用的分页组件
vuex-i18n ★26 – 定位插件
Vue.resize ★26 – 检测HTML调整大小事件的vue指令
vuex-shared-mutations ★25 – 分享某种Vuex mutations
vue-file-base64 ★16 – 将文件转换为Base64的vue组件
modal ★15 – Vue Bulma的modal组件
Famous-Vue ★15 – Famous库的vue组件
leo-vue-validator ★13 – 异步的表单验证组件
Vue-Easy-Validator ★11 – 简单的表单验证
vue-truncate-filter ★9 – 截断字符串的VueJS过滤器
vue-zoombox ★9 – 一个高级zoombox
vue-input-autosize ★5 – 基于内容自动调整文本输入的大小
vue-lazyloadImg ★3 – 图片懒加载插件

服务端

nuxt.js ★2743 – 用于服务器渲染Vue app的最小化框架
express-vue ★137 – 简单的使用服务器端渲染vue.js
vue-ssr ★67 – 非常简单的VueJS服务器端渲染模板
vue-ssr ★56 – 结合Express使用Vue2服务端渲染
vue-easy-renderer ★22 – Nodejs服务端渲染

辅助工具

DejaVue ★543 – Vuejs可视化及压力测试
vue-play ★445 – 展示Vue组件的最小化框架
vscode-VueHelper ★185 – 目前vscode最好的vue代码提示插件
vue-generate-component ★39 – 轻松生成Vue js组件的CLI工具
vue-multipage-cli ★33 – 简单的多页CLI
VuejsStarterKit ★26 – vuejs starter套件

应用实例

koel ★7175 – 基于网络的个人音频流媒体服务
pagekit ★4021 – 轻量级的CMS建站系统
vuedo ★1040 – 博客平台
jackblog-vue ★943 – 个人博客系统
vue-cnode ★597 – 重写vue版cnode社区
CMS-of-Blog ★405 – 博客内容管理器
rss-reader ★326 – 简单的rss阅读器
vue-ghpages-blog ★208 – 依赖GitHub Pages无需本地生成的静态博客
swoole-vue-webim ★97 – Web版的聊天应用
vue-dashing-js ★70 – nuvo-dashing-js的fork
fewords ★52 – 功能极其简单的笔记本
vue-blog ★33 – 使用Vue2.0 和Vuex的vue-blog

Demo示例

Vue-cnodejs ★2113 – 基于vue重写Cnodejs.org的webapp
NeteaseCloudWebApp ★1154 – 高仿网易云音乐的webapp
vue-zhihu-daily ★875 – 知乎日报 with Vuejs
vue-wechat ★732 – vue.js开发微信app界面
vue2-demo ★699 – 从零构建vue2 + vue-router + vuex 开发环境
eleme ★612 – 高仿饿了么app商家详情
vue-demo ★575 – vue简易留言板
maizuo ★498 – vue/vuex/redux仿卖座网
spa-starter-kit ★489 – 单页应用启动套件
vue-music ★485 – Vue 音乐搜索播放
douban ★402 – 模仿豆瓣前端
vue-Meizi ★394 – vue最新实战项目
zhihudaily-vue ★386 – 知乎日报web版
vue-demo-kugou ★310 – vuejs仿写酷狗音乐webapp
VueDemo_Sell_Eleme ★307 – Vue2高仿饿了么外卖平台
vue2.0-taopiaopiao ★246 – vue2.0与express构建淘票票页面
vue-leancloud-blog ★239 – 一个前后端完全分离的单页应用
node-vue-server-webpack ★239 – Node.js+Vue.js+webpack快速开发框架
mi-by-vue ★222 – VueJS仿小米官网
vue-fis3 ★199 – 流行开源工具集成demo
vue2.x-douban ★188 – Vue2实现简易豆瓣电影webApp
vue-demo-maizuo ★188 – 使用Vue2全家桶仿制卖座电影
vue-zhihudaily ★169 – 知乎日报 Web 版本
vue-adminLte-vue-router ★162 – vue和adminLte整合应用
vue-axios-github ★157 – 登录拦截登出功能
Zhihu-Daily-Vue.js ★134 – Vuejs单页网页应用
hello-vue-django ★113 – 使用带有Django的vuejs的样板项目
vue-cnode ★101 – vue单页应用demo
x-blog ★100 – 开源的个人blog项目
vue-express-mongodb ★96 – 简单的前后端分离案例
websocket_chat ★91 – 基于vue和websocket的多人在线聊天室
photoShare ★85 – 基于图片分享的社交平台
vue-zhihudaily-2.0 ★81 – 使用Vue2.0+vue-router+vuex创建的zhihudaily
notepad ★77 – 本地存储的记事本
vueBlog ★75 – 前后端分离博客
vue-ruby-china ★70 – VueJS框架搭建的rubychina平台
Zhihu_Daily ★70 – 基于Vue和Nodejs的Web单页应用
vue-koa-demo ★60 – 使用Vue2和Koa1的全栈demo
vue2.x-Cnode ★50 – 基于vue全家桶的Cnode社区
life-app-vue ★49 – 使用vue2完成多功能集合到小webapp
github-explorer ★49 – 寻找最有趣的GitHub库
vue-trip ★48 – vue2做的出行webapp
vue-ssr-boilerplate ★47 – 精简版的ofvue-hackernews-2
vue-bushishiren ★45 – 不是诗人应用
houtai ★44 – 基于vue和Element的后台管理系统
ios7-vue ★38 – 使用vue2.0 vue-router vuex模拟ios7
Framework7-VueJS ★38 – 使用移动框架的示例
cnode-vue ★37 – 基于vue和vue-router构建的cnodejs web网站SPA
vue-cli-multipage-bootstrap ★36 – 将vue官方在线示例整合到组件中
vue-cnode ★34 – 用 Vue 做的 CNode 官网
HyaReader ★30 – 移动友好的阅读器
zhihu-daily ★28 – 轻松查看知乎日报内容
seeMusic ★27 – 跨平台云音乐播放器
vue-cnode ★22 – 使用cNode社区提供的接口
zhihu-daily-vue ★20 – 知乎日报
sls-vuex2-demo ★20 – vuex2商城购物车demo
vue-dropload ★17 – 用以测试下拉加载与简单路由
vue-cnode-mobile ★17 – 搭建cnode社区
Vuejs-SalePlatform ★17 – vuejs搭建的售卖平台demo
v-notes ★17 – 简单美观的记事本
vue-starter ★16 – VueJs项目的简单启动页
vue-memo ★7 – 用 vue写的记事本应用

转载来自: http://blog.csdn.net/zk65645/article/details/61196074

node 模块镜像备注

2017-03-16admin阅读(2047)评论(0)

npm set registry https://registry.npm.taobao.org # 注册模块镜像
npm set disturl https://npm.taobao.org/dist # node-gyp 编译依赖的 node 源码镜像

## 以下选择添加
npm set chromedriver_cdnurl
http://cdn.npm.taobao.org/dist/chromedriver # chromedriver 二进制包镜像

npm set operadriver_cdnurl http://cdn.npm.taobao.org/dist/operadriver # operadriver 二进制包镜像

npm set phantomjs_cdnurl http://cdn.npm.taobao.org/dist/phantomjs # phantomjs 二进制包镜像
npm set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass # node-sass 二进制包镜像
npm set electron_mirror http://cdn.npm.taobao.org/dist/electron/ # electron 二进制包镜像
npm set selenium_cdnurl http://npm.taobao.org/mirrors/selenium
npm set node_inspector_cdnurl https://npm.taobao.org/mirrors/node-inspector
npm set selenium_cdnurl http://npm.taobao.org/mirrors/selenium
npm cache clean # 清空缓存

#复制下面信息直接跑一下就ok!!!

npm set registry https://registry.npm.taobao.org
npm set disturl https://npm.taobao.org/dist
npm set chromedriver_cdnurl http://cdn.npm.taobao.org/dist/chromedriver
npm set operadriver_cdnurl http://cdn.npm.taobao.org/dist/operadriver
npm set phantomjs_cdnurl http://cdn.npm.taobao.org/dist/phantomjs
npm set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass
npm set electron_mirror http://cdn.npm.taobao.org/dist/electron/
npm set selenium_cdnurl http://npm.taobao.org/mirrors/selenium
npm set node_inspector_cdnurl https://npm.taobao.org/mirrors/node-inspector
npm set selenium_cdnurl http://npm.taobao.org/mirrors/selenium
npm cache clean

使用 ionic 制作跨平台App小尝试

2017-03-13admin阅读(2012)评论(0)

前言

之前学习用原生安卓写了个小壳子,把我的博客嵌进去了,2017年,都在流行前后端分离,好吧,我再看看能不能把我博客改版一下!!!

刚才看到了 ionic 这个玩意儿,配合cordova做跨平台的移动app,之前也玩了好多这种类型的东西,今天也看看这个效果如何,

首先先把框架跑起来吧!

npm install -g cordova ionic (注意有墙)

注意: 此框架是基于 AngularJS !

使用ionic官方提供的现成的应用程序模板，或一个空白的项目创建一个ionic应用：

$ ionic start myApp tabs

等待下载完成,进入目录,

启动服务!

ionic serve

这时候由于我本地开启了加速器(翻墙)还有本地的localhost服务器以及路由器的ip,所以显示了这三,可以根据自己的情况选择一个,

******************************************************
Dependency warning – for the CLI to run correctly,
it is highly recommended to install/upgrade the following:

Please install your Cordova CLI to version >=4.2.0 npm install -g cordova

******************************************************

Multiple addresses available.
Please select which address to use by entering its number from the list below:
1) 172.17.20.87 (BeikeJsq)
2) 192.168.199.184 (WLAN)
3) localhost

启动成功后,浏览器自动打开,预览界面!

大概目录结构图:

我们打开官方文档,

这里找到一个中文文档,速度还不错

app.js 里面有文件路由,根据打开的文件地址找到路由,然后找到控制器DashCtrl及模板

.state('tab.dash', {
  url: '/dash',
  views: {
    'tab-dash': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'DashCtrl'
    }
  }
})

.state('tab.dash', {

url: '/dash',

views: {

'tab-dash': {

templateUrl: 'templates/tab-dash.html',

controller: 'DashCtrl'

}

})

我们随便选择一些模板,复制到templates/tab-dash.html文件里!

然后随便调一个借口玩玩看看效果!

angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope,$http,$ionicSideMenuDelegate) {
    $scope.getData = function () {
    };
    $scope.toggleLeft = function() {
        $ionicSideMenuDelegate.toggleLeft();
    };
    $scope.items = [];
    $http.post("http://api.he29.com/api/twitter/find")
        .success(function (response) {
            $scope.items = response.list
        });
})