diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..c13c5f6 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015"] +} diff --git a/README.md b/README.md index fea58cd..bbeaa66 100644 --- a/README.md +++ b/README.md @@ -3,8 +3,11 @@ > a easy example to use vue to implement easy web -## Latest Version 0.3.0(2016/09/03) +## Latest Version 0.5.0(2016/11/22) +- 0.5.0 + + use vue 2.0 + + use vuex 2.0 - 0.3.0 + change UI for easy-vue + use vue-progressbar @@ -14,15 +17,16 @@ + implements page change + optimize UI -> [latest version download](https://github.com/TIGERB/easy-vue/releases/tag/v0.3.0) +> [latest version download](https://github.com/TIGERB/easy-vue/releases/tag/v0.5.0) ## Demo > ## How To Use ? -* `update the variable "domain" to your domain in webpack.config.js` -* `npm install` -* `bower install` -* `npm run test (develop environment) OR npm run build (production environment)` -* `php environment to use server.php simulate api` +1. npm install +2. bower install +3. build + - develop environment: `DOMAIN=http://yourdomain npm run test` + - production environment: `DOMAIN=http://yourdomain npm run build` +4. php environment to use server.php simulate api diff --git a/app.js b/app.js index 2b36f8a..ec22827 100644 --- a/app.js +++ b/app.js @@ -1,35 +1,42 @@ -var Vue 　　　 = require('vue'); // get vue -var App 　　　 = require('./app.vue');// get root module +var Vue　　　 = require('vue'); // get vue +var App　　　 = require('./app.vue'); // get root module +var store　　 = require('./store.js'); // get vuxe -> store -var VueRouter = require('vue-router'); //get vue-router -var VueProgressBar = require('vue-progressbar');// get vue-progressbar +var VueRouter = require('vue-router'); //get vue-router +var VueProgressBar = require('vue-progressbar'); // get vue-progressbar +var infiniteScroll = require('vue-infinite-scroll');// get vue-infinite-scroll -Vue.use(VueRouter);//error:　Please install the Router with Vue.use() before creating an instance -Vue.use(VueProgressBar, { - color: 'rgb(143, 255, 199)', - failedColor: 'red', - height: '3px' -});// can use progressbar - -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+'pageone.vue') +Vue.use(VueRouter); +var options = { + color: '#fff', + failedColor: '#874b4b', + thickness: '3px', + transition: { + speed: '0.2s', + opacity: '0.6s' }, - '/two':{ - name:'two', - component:require(viewPath+'pagetwo.vue') - }, - '/three':{ - name:'three', - component:require(viewPath+'pagethree.vue') - } + autoRevert: true, + location: 'top', + inverse: false +}; +Vue.use(VueProgressBar, options); +Vue.use(infiniteScroll) + +var viewPath = './src/views/'; //component src +var routes = [ + { path: '/', component: require(viewPath + 'pageone.vue')}, + { path: '/two', component: require(viewPath + 'pagetwo.vue')}, + { path: '/three', component: require(viewPath + 'pagethree.vue')} +]; +var router = new VueRouter({ + routes: routes }); -router.start(App,'#app'); +//init +var app = new Vue({ + router: router, + store: store, + render: function (h) { + return h(App); + } +}).$mount('#app'); diff --git a/app.vue b/app.vue index b035e62..260c0c6 100644 --- a/app.vue +++ b/app.vue @@ -1,7 +1,7 @@ @@ -9,30 +9,6 @@ diff --git a/src/views/pagethree.vue b/src/views/pagethree.vue index 5927920..65274be 100644 --- a/src/views/pagethree.vue +++ b/src/views/pagethree.vue @@ -1,11 +1,10 @@ diff --git a/src/views/pagetwo.vue b/src/views/pagetwo.vue index 5927920..52cdd3f 100644 --- a/src/views/pagetwo.vue +++ b/src/views/pagetwo.vue @@ -1,11 +1,10 @@ diff --git a/store.js b/store.js new file mode 100644 index 0000000..f6af200 --- /dev/null +++ b/store.js @@ -0,0 +1,97 @@ +var Vue = require('vue'); // get vue +var Vuex = require('vuex'); // get vuex + +Vue.use(Vuex); + +var state = { + cardData: [], + isloadingComplete: false, + busy: false, + test: [ + '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, + ] +}; + +var getters = { + +} + +var mutations = { + updateLoadingState(state, data){ + state.isloadingComplete = data; + }, + updateBusyState(state, data){ + state.busy = data; + }, + addData(state, data){ + state.cardData = state.cardData.concat(data); + }, + refreshData(state, data){ + state.cardData = data; + } +}; + +var actions = { + getData(context, object){ + var progress = object.progress; + var isRefresh = object.refresh; + progress.$Progress.start(); + context.commit('updateLoadingState', false); + context.commit('updateBusyState', true); + fetch('/server.php') + .then(function(response) { + return response.json(); + }).then(function(json) { + context.commit('updateLoadingState', true); + context.commit('updateBusyState', false); + if (isRefresh === true) { + context.commit('refreshData', json); + }else { + context.commit('addData', json); + } + progress.$Progress.finish(); + }).catch(function(ex) { + console.log(ex); + context.commit('updateBusyState', false); + progress.$Progress.fail(); + }); + } +}; + +var moduleCard = { + state: state, + getters: getters, + mutations: mutations, + actions: actions +}; + +var store = new Vuex.Store({ + state: state, + getters: getters, + mutations: mutations, + actions: actions +}); + +module.exports = store; + +// export default new Vuex.Store({ +// modules: { +// moduleCard: moduleCard +// } +// }); diff --git a/webpack.config.js b/webpack.config.js index a9b0a97..cc0791a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,7 +7,7 @@ var CleanPlugin = require('clean-webpack-plugin');// clean bulid file var webpackConfig = module.exports = {};//　init object var production = process.env.NODE_ENV === 'production';// production environment -var domain = 'http://easy-vue.local'; // your domain +var domain = process.env.DOMAIN; // your domain process.env.DOMAIN // input webpackConfig.entry　 =　{ @@ -38,9 +38,10 @@ webpackConfig.module = { test: /\.vue$/, loader: 'vue' }, - { test: /\.js$/, + { + test: /\.js$/, loader: 'babel', - query: {compact: false} + exclude: /node_modules/ }, { test: /\.(eot(|\?v=.*)|woff(|\?v=.*)|woff2(|\?v=.*)|ttf(|\?v=.*)|svg(|\?v=.*))$/,