From b2fc42da0d2faf332d3d49b5c45d5d790499c47e Mon Sep 17 00:00:00 2001 From: tigerb <624661874@qq.com> Date: Tue, 22 Nov 2016 11:48:01 +0800 Subject: [PATCH 1/3] feat: vue 2.0 --- .babelrc | 3 ++ README.md | 6 ++-- app.js | 66 ++++++++++++++++++++---------------- app.vue | 26 +------------- package.json | 17 +++++----- src/components/barBottom.vue | 48 +++++++++++++------------- src/components/barTop.vue | 3 +- src/components/card.vue | 17 ++++++---- src/views/pageone.vue | 13 +++---- src/views/pagethree.vue | 13 +++---- src/views/pagetwo.vue | 13 +++---- store.js | 40 ++++++++++++++++++++++ webpack.config.js | 7 ++-- 13 files changed, 146 insertions(+), 126 deletions(-) create mode 100644 .babelrc create mode 100644 store.js 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..a07f119 100644 --- a/README.md +++ b/README.md @@ -3,8 +3,10 @@ > 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/25) +- 0.5.0 + + use vue 2.0 - 0.3.0 + change UI for easy-vue + use vue-progressbar @@ -14,7 +16,7 @@ + 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 diff --git a/app.js b/app.js index 2b36f8a..8dca8e8 100644 --- a/app.js +++ b/app.js @@ -1,35 +1,41 @@ -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 root module -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 -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); //error:　Please install the Router with Vue.use() before creating an instance +var options = { + color: '#bffaf3', + failedColor: '#874b4b', + thickness: '5px', + 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: 'left', + inverse: false +}; +Vue.use(VueProgressBar, options); + +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); + } + // store, +}).$mount('#app'); diff --git a/app.vue b/app.vue index b035e62..ddfa022 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..a7a3483 --- /dev/null +++ b/store.js @@ -0,0 +1,40 @@ +var Vue = require('vue'); // get vue +var Vuex = require('vuex'); // get vuex + +Vue.use(Vuex); + +var state = { + cardData: [], + isRefresh: false, + test: 1 +}; + +var mutations = { + addData(state, data){ + state.cardData = state.cardData.concat(data); + }, + clearData(state){ + state.cardData = []; + } +}; + +var actions = { + addData(context, data){ + context.commit('addData', data); + }, + clearData(context){ + context.commit('clearData'); + } +}; + +var moduleCard = { + state: state, + mutations: mutations, + actions: actions +}; + +export default new Vuex.Store({ + modules: { + moduleCard: moduleCard + } +}); diff --git a/webpack.config.js b/webpack.config.js index a9b0a97..3cb615f 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 = 'http://easy-vue.local'; // 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=.*))$/, From 8c28cb2e8680b6a4afb76a10b7e7976dc8086980 Mon Sep 17 00:00:00 2001 From: tigerb <624661874@qq.com> Date: Tue, 22 Nov 2016 12:26:38 +0800 Subject: [PATCH 2/3] fix: use vue-infinite-scroll --- app.js | 2 ++ app.vue | 2 +- src/components/card.vue | 12 +++++------- src/views/pageone.vue | 3 +-- store.js | 7 +++++++ 5 files changed, 16 insertions(+), 10 deletions(-) diff --git a/app.js b/app.js index 8dca8e8..9939d8b 100644 --- a/app.js +++ b/app.js @@ -4,7 +4,9 @@ var store　　 = require('./store.js'); // get root module var VueRouter = require('vue-router'); //get vue-router var VueProgressBar = require('vue-progressbar'); // get vue-progressbar +var infiniteScroll = require('vue-infinite-scroll'); +Vue.use(infiniteScroll) Vue.use(VueRouter); //error:　Please install the Router with Vue.use() before creating an instance var options = { color: '#bffaf3', diff --git a/app.vue b/app.vue index ddfa022..260c0c6 100644 --- a/app.vue +++ b/app.vue @@ -1,7 +1,7 @@ diff --git a/src/components/card.vue b/src/components/card.vue index b43f428..a69617c 100644 --- a/src/components/card.vue +++ b/src/components/card.vue @@ -1,5 +1,4 @@