基於Vue2全家桶的移動端AppDEMO實現

搭建項目

項目結構

本項目才用Vue-cli腳手架自動生成，這是一個Vue生態系統中一個偉大創舉。這意味着咱們不須要手動構建咱們的項目，而它就能夠很快地爲咱們生成。下圖是一個完整的項目結構，如圖所示：

• components:包含全部的頁面組件

• vuex:包含vuex相關文件

• modules:存放每一個頁面單獨的state和mutation

• static:靜態文件存放（圖片和圖標庫等）

• index.html：渲染的頁面

• main.js:應用入口點，包含根實例

• App.vue：主頁面組件       

項目流程：

• 安裝Vue-cli(要有node與npm)

npm i -g vue-cli

• 建立一個webpack項目，而且下載依賴

vue init webpack vue-demo-orderApp cd vue-demo-orderApp npm i

• 安裝Vue-router，Vuex和Mint-ui

npm install vue-router vuex --save npm install mint-ui --save

• 熱加載打開頁面(生產的時候運行npm run build)

npm run dev

項目的框架已經搭建好了，接下來就是爲項目添磚加瓦。

頁面結構分析

本項目爲一個demo項目,主要爲了練習vue2的使用，結構上借鑑了官方的寫法，界面爲通用的app樣式，才用餓了麼團隊的Mint-Ui的製做。
這個demo的每個頁面都是一個.vue文件，利用Vue的單文件組件，很是便於管理每一個頁面的狀態，樣式和數據，首頁主要是展現頁，和操做面板頁。下面是主頁的代碼：

<template> <div class="index-container"> <!-- 輪播圖部分 --> <mt-swipe :auto="4000"> <mt-swipe-item><div class="banner1 banner" style="background:url('./static/banner1.jpg');background-size: cover;"></div></mt-swipe-item> <mt-swipe-item><div class="banner2 banner" style="background:url('./static/banner2.jpg');background-size: cover;"></div></mt-swipe-item> </mt-swipe> <!-- 訂單同步狀態部分 --> <mt-popup class="status" v-model="popupVisible" popup-transition="popup-fade" position="top"> 同步{{ orders_status }} </mt-popup> <!-- 首頁功能欄部分 --> <ul class="icon-list"> <li class="icon"> <router-link to="order" class="iconlink"></router-link> <img src="../assets/scan.png" class="clear"> <h4>訂單管理</h4> <p>掃描盤點，手工盤點</p> <i></i> </li> <li class="icon"> <router-link to="goods" class="iconlink"></router-link> <img src="../assets/ana.png" class="clear"> <h4>渠道管理</h4> <p>掃描盤點，手工盤點</p> <i></i> </li> <li class="icon"> <router-link to="order" class="iconlink"></router-link> <img src="../assets/store.png" class="clear"> <h4>訂單發佈</h4> <p>掃描盤點，手工盤點</p> <i></i> </li> <li class="icon" @click="getOrders()"> <router-link to="test" class="iconlink"></router-link> <img src="../assets/goods.png" class="clear"> <h4>訂單同步</h4> <p>快速同步渠道訂單，方便快捷</p> <i></i> </li> <li class="icon"> <router-link to="personinfo" class="iconlink"></router-link> <img src="../assets/download.png" class="clear"> <h4>我的中心</h4> <p>信息管理，logo更換</p> <i></i> </li> </ul> </div> </template> <script type="text/javascript"> import { MessageBox } from 'mint-ui' import { mapState } from 'vuex' export default{ created:function(){ if(window.localStorage.user == null){ this.$router.push({path: '/login'}) } }, data(){ let popupVisible = false let orders_status return {popupVisible, orders_status} }, computed:mapState({ orders_status: state => state.news.orders_status, }), methods:{ getOrders: function(){ const that = this this.$store.dispatch('synchroOrder', this).then(function(){ that.popupVisible = true }) } } } </script>

先看代碼部分Vue2相比Vue1相比仍是變化不少的，首先就是計算屬性比之前更好用了，其次是生命週期部分和之前相比變化很大，這點要注意下。其次是Vue2更推崇ES6的寫法，而且支持了promise，這是很是好的地方，並且官方的迭代文檔也寫的很全，基本上很容易從1迭代到2。而且Vue2再也不支持雙向綁定（sync）這個方法了，它使用了一種更好的方式來進行父子組件之間的通訊（emit），這樣子組件就不會影響到父組件的狀態。下面我放出這個主頁Vue1的代碼，你們能夠比較一下：

<template> <div class="index-container"> <mt-swipe :auto="4000"> <mt-swipe-item><div class="banner1 banner" style="background:url('./static/banner1.jpg');background-size: cover;"></div></mt-swipe-item> <mt-swipe-item><div class="banner2 banner" style="background:url('./static/banner2.jpg');background-size: cover;"></div></mt-swipe-item> </mt-swipe> <ul class="icon-list"> <li class="icon"> <img src="../assets/scan.png" class="clear"> <h4>訂單管理</h4> <p>掃描盤點，手工盤點</p> <i></i> </li> <li class="icon"> <img src="../assets/ana.png" class="clear"> <h4>渠道管理</h4> <p>掃描盤點，手工盤點</p> <i></i> </li> <li class="icon"> <img src="../assets/store.png" class="clear"> <h4>訂單發佈</h4> <p>掃描盤點，手工盤點</p> <i></i> </li> <li class="icon" @click="getOrders(this)"> <img src="../assets/goods.png" class="clear"> <h4>訂單同步</h4> <p>快速同步渠道訂單，方便快捷</p> <i></i> </li> <li class="icon"> <img src="../assets/download.png" class="clear"> <h4>我的中心</h4> <p>信息管理，logo更換</p> <i></i> </li> </ul> <mt-popup :visible.sync="popupVisible" popup-transition="popup-fade" position="top"> 同步成功</mt-popup> </div> </template> <script type="text/javascript"> import { synchroOrder } from '../vuex/action' import { MessageBox } from 'mint-ui' export default{ init:function(){ if(window.localStorage.user == null){ //window.location.href = window.location.origin + window.location.pathname + '#!/login' console.log('請登陸') this.$router.go({path:'/login'}) } }, data(){ let popupVisible = false return {popupVisible} }, vuex:{ getters:{ order_status: state => state.orders_status }, actions:{ synchroOrder } }, methods:{ getOrders: function(that){ this.synchroOrder(that) if(this.order_status){ this.popupVisible = !this.popupVisible } } } }

上面的代碼比較能夠看出，VueX和Vue-router的變化也很大，這裏我就詳細說這二者的變化了，有啥問題能夠討論討論，大概說下，首先是Vue-router部分,再也不支持之前V-link的這種方式了，變爲採用router-link這種方式。VueX方面我感受變化最大的就是寫法和之前不同了。Vuex才用this.$store.dispatch('xxx')來派發一個action,經過commit委託給mutation來執行相應的操做，而且支持異步的寫法，就是ES6的promise,給一段官方的異步寫法：

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => { setTimeout(() => { commit('someMutation') resolve() }, 1000) }) } }

。還有一個明顯的變化是mapActions和mapState屬性，mapActions能夠用來指明一個組件的方法去調用store.dispatch()方法。經過mapState屬性咱們能夠去定義一些計算函數和鍵值對，主要是爲了方便運用多個states屬性和getters。還有一個比較大的變化就是Vuex2能夠支持將store轉變爲Module的寫法，來更細緻的去管理狀態。個人這個小demo也用上了這個新特性，它能讓大型的頁面也能有很好的狀態管理。
能夠對比一下同一個項目基於Vue1和Vue2的寫法。這樣更可以直觀的去了解到不一樣之處，而且能夠去細想一下做者爲何這個改，這對咱們編程思想的提示是頗有幫助的。

基於模塊化的Vuex

 

將不一樣的Vuex狀態放在對應的頁面狀態模塊裏，這樣當須要管理的數據不少的時候也能從容的應對。
能夠看下這裏面是怎麼寫的，下面是news.js裏面的：

import * as types from '../mutation-types' const state = { news:{}, orders_status: '成功', selected:'首頁' } const mutations = { [types.SYNCHRO_ORDER](state, items){ state.news = items console.log(state.news.length) if(state.news.length != 0){ state.orders_status = '成功' } else{ state.orders_status = '失敗' } }, [types.CHANGE_SELECTED](state, item){ state.selected = item } } export default{ state, mutations }

下面是mution-types.js

export const CHANGE_ORDER = 'CHANGE_ORDER' export const CHANGE_STATUS = 'CHANGE_STATUS' export const DISPLAY_STATUS = 'DISPLAY_STATUS' export const CHANGE_PERSON = 'CHANGE_PERSON' export const SYNCHRO_ORDER = 'SYNCHRO_ORDER' export const CHANGE_POP = 'CHANGE_POP' export const CHANGE_SELECTED = 'CHANGE_SELECTED'

能夠看到咱們將全部的mutaions方法都放在了mution-types裏面進行統一的管理，而後再對應的模塊裏面來處理這些方法，在不一樣的模塊裏面咱們只能操做對應模塊的數據和狀態，這對於狀態管理來講簡直是很是完美。