基于Vue2全家桶的移动端AppDEMO实现

时间 2019-11-09

原文原文链接

很久没更新过Vue的小文章，上次作了一个基于Vue+Mint-ui的移动端AppDemo,集成了推送功能，而后经过cordova打包生成apk，移动端表现还不错，今天把这个小东西分享出来，但愿有更多的小伙伴可以用Vue去作一些有意思的东西，本人才疏学浅，有说的不对的地方，还请你们多多指教。下面按照惯例放上demo地址和源码地址,但愿你们能给我点下star：
Demo(进去须要先注册才能登陆,用的localstorage，随便写符合格式的就行)
Demo基于Vue2源码
 Demo基于Vue1的源码javascript

搭建项目

项目结构

本项目才用Vue-cli脚手架自动生成，这是一个Vue生态系统中一个伟大创举。这意味着咱们不须要手动构建咱们的项目，而它就能够很快地为咱们生成。下图是一个完整的项目结构，如图所示：
html

components:包含全部的页面组件vue
vuex:包含vuex相关文件java
modules:存放每一个页面单独的state和mutationnode
static:静态文件存放（图片和图标库等）webpack
index.html：渲染的页面git
main.js:应用入口点，包含根实例github
App.vue：主页面组件web

项目流程：

安装Vue-cli(要有node与npm)vue-router

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里面进行统一的管理，而后再对应的模块里面来处理这些方法，在不一样的模块里面咱们只能操做对应模块的数据和状态，这对于状态管理来讲简直是很是完美。