From 7155f78be7b77d72bcb65c12d94e858de6d1ec39 Mon Sep 17 00:00:00 2001 From: TIGERB <624661874@qq.com> Date: Fri, 22 Jul 2016 15:48:10 +0000 Subject: [PATCH] feat(src/components&view):add barBottom component and three page views --- README.md | 9 +++++- app.js | 17 ++++++++---- src/components/bar.vue | 20 ------------- src/components/barBottom.vue | 54 ++++++++++++++++++++++++++++++++++++ src/components/barTop.vue | 25 +++++++++++++++++ src/components/card.vue | 46 ++++++++++++++++++++++++++++++ src/views/home.vue | 22 --------------- src/views/pageone.vue | 34 +++++++++++++++++++++++ src/views/pagethree.vue | 34 +++++++++++++++++++++++ src/views/pagetwo.vue | 34 +++++++++++++++++++++++ 10 files changed, 247 insertions(+), 48 deletions(-) delete mode 100644 src/components/bar.vue create mode 100644 src/components/barBottom.vue create mode 100644 src/components/barTop.vue delete mode 100644 src/views/home.vue create mode 100644 src/views/pageone.vue create mode 100644 src/views/pagethree.vue create mode 100644 src/views/pagetwo.vue diff --git a/README.md b/README.md index c762d38..9e9a09b 100644 --- a/README.md +++ b/README.md @@ -3,12 +3,19 @@ > a easy sample to use vue to implement easy web ### Version 0.1.1 +--- > [download](https://github.com/TIGERB/easy-vue/releases/tag/v0.1.1) +### Demo +--- + +> + ### How To Use ? +---- -* `php environment to use server.php simulate api` * `npm install` * `bower install` * `npm run test (develop environment) OR npm run build (production environment)` +* `php environment to use server.php simulate api` diff --git a/app.js b/app.js index 5574c6a..d65f6a2 100644 --- a/app.js +++ b/app.js @@ -3,17 +3,24 @@ var VueRouter = require('vue-router'); //get vue-router var App 　　　 = require('./app.vue');// get root module Vue.use(VueRouter);//error:　Please install the Router with Vue.use() before creating an instance -var router = new VueRouter();//init +var router = new VueRouter({ + // history: true, //this config is to del anchor point like "#!" + // saveScrollPosition: true +});//init var viewPath = './src/views/';//component src router.map({ '/':{ name:'', - component:require(viewPath+'home.vue') + component:require(viewPath+'pageone.vue') }, - '/home':{ - name:'home', - component:require(viewPath+'home.vue') + '/two':{ + name:'two', + component:require(viewPath+'pagetwo.vue') + }, + '/three':{ + name:'three', + component:require(viewPath+'pagethree.vue') } }); diff --git a/src/components/bar.vue b/src/components/bar.vue deleted file mode 100644 index 34cffff..0000000 --- a/src/components/bar.vue +++ /dev/null @@ -1,20 +0,0 @@ - - - - - diff --git a/src/components/barBottom.vue b/src/components/barBottom.vue new file mode 100644 index 0000000..9f9328b --- /dev/null +++ b/src/components/barBottom.vue @@ -0,0 +1,54 @@ + + + + diff --git a/src/components/barTop.vue b/src/components/barTop.vue new file mode 100644 index 0000000..3ec43c5 --- /dev/null +++ b/src/components/barTop.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/src/components/card.vue b/src/components/card.vue index c174706..e5bd98d 100644 --- a/src/components/card.vue +++ b/src/components/card.vue @@ -20,6 +20,26 @@ .then(function(response) { return response.json() }).then(function(json) { + //fake data + json = [ + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + ]; self.results = json; }).catch(function(ex) { console.log(ex); @@ -33,12 +53,38 @@ .then(function(response) { return response.json() }).then(function(json) { + //fake data + json = [ + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + 'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000, + ]; self.results = self.results.concat(json); }).catch(function(ex) { console.log(ex); }); this.busy = false; } + }, + events:{ + //catch refresh event boardcast by parent component + 'refresh': function(){ + this.results = []; + } } } diff --git a/src/views/home.vue b/src/views/home.vue deleted file mode 100644 index a99327a..0000000 --- a/src/views/home.vue +++ /dev/null @@ -1,22 +0,0 @@ - - - - - diff --git a/src/views/pageone.vue b/src/views/pageone.vue new file mode 100644 index 0000000..5927920 --- /dev/null +++ b/src/views/pageone.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/src/views/pagethree.vue b/src/views/pagethree.vue new file mode 100644 index 0000000..5927920 --- /dev/null +++ b/src/views/pagethree.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/src/views/pagetwo.vue b/src/views/pagetwo.vue new file mode 100644 index 0000000..5927920 --- /dev/null +++ b/src/views/pagetwo.vue @@ -0,0 +1,34 @@ + + + + +