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

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

搭建项目

项目结构

本项目才用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

项目的框架已经搭建好了,接下来就是为项目添砖加瓦。

页面结构分析

clipboard.png

--
本项目为一个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

clipboard.png

将不同的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里面进行统一的管理,然后再对应的模块里面来处理这些方法,在不同的模块里面我们只能操作对应模块的数据和状态,这对于状态管理来说简直是非常完美。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 基于vue.js的移动设计是一种应用vue.js框架开发移动应用的设计方法。vue.js是一种轻量级、灵活、易学易用的JavaScript框架,可以用于构建用户界面。在移动设计中,vue.js可以帮助我们实现响应式的界面设计,提供良好的用户体验。 基于vue.js的移动设计具有以下特点和优势: 1. 组件化开发:vue.js使得我们可以将页面划分为多个组件,每个组件都有自己的功能和样式。这样我们可以方便地对不同的组件进行修改和重用,提高开发效率。 2. 响应式设计:vue.js采用了双向数据绑定的方式,可以实时更新界面上的数据。这使得移动应用能够根据用户的操作动态地改变界面显示,提供更好的交互体验。 3. 轻量级框架:vue.js的文件大小较小,加载速度快,适合用于移动应用的开发。同时,它也具有良好的性能,可以在移动设备上流畅运行。 4. 强大的生态系统:vue.js拥有丰富的插件和第三方库,可以方便地扩展功能。这使得我们可以快速地添加一些常用的组件和工具,提高开发效率。 基于vue.js的移动设计需要了解vue.js的基本语法和特性,并熟悉移动开发的相关技术和工具。同时,还需要考虑移动设备的特点,如不同尺寸的屏幕、触摸操作等,来优化用户体验。在具体的项目中,我们可以使用vue-cli创建项目、使用vue-router进行页面导航、使用vuex进行状态管理等。 总之,基于vue.js的移动设计可以帮助我们开发出高质量的移动应用,提供良好的用户体验。它是一种灵活、高效的设计方法,值得我们在移动应用开发中探索和应用。 ### 回答2: 基于vue.js的移动设计是指利用vue.js这个优秀的前框架来构建适用于移动设备的网页或应用程序。vue.js是一个轻量级的框架,具有响应式设计和双向数据绑定的特性,非常适合用于开发移动的用户界面。 使用vue.js可以提供更好的用户体验和性能表现。它的虚拟DOM机制可以高效地对应用的视图进行更新和渲染,减少了页面重新加载的次数,使得移动的网页或应用程序更加流畅。 在开发移动设计时,vue.js还提供了丰富的组件库,可以方便地构建各种移动页面需要的交互元素和视图组件,例如按钮、表单、列表等。这样不仅可以快速构建界面,还能保持一致的设计风格,提高用户的使用体验。 另外,vue.js还支持移动常用的触摸事件,可以通过监听用户的触摸手势来实现更多的交互效果。同时,vue.js也可以与其他常用的移动开发工具和插件进行集成,例如打包工具webpack,移动UI库Vant等,进一步丰富功能和提升开发效率。 总之,基于vue.js的移动设计具有响应式设计、高性能、丰富的组件库和易于集成等特点,能够帮助开发者快速构建出优秀的移动网页和应用程序。 ### 回答3: 基于Vue.js的移动设计是一种使用Vue.js框架来开发移动应用程序的方法。Vue.js是一种流行的JavaScript框架,它通过响应式的数据绑定和组件化的开发方式,可以简化移动应用开发的复杂性。 首先,基于Vue.js的移动设计可以利用到Vue.js强大的数据绑定功能。Vue.js使用了双向数据绑定的概念,它可以确保数据和视图的自动同步。在移动设计中,我们可以将应用的数据和视图绑定起来,当数据发生变化时,视图会自动更新,从而提供更好的用户体验。 其次,基于Vue.js的移动设计还可以充分利用Vue.js的组件化开发方式。组件化开发将应用的各个功能模块划分为独立的组件,每个组件都有自己的数据、视图和逻辑。这种方式有助于代码的复用性和维护性,同时也能提高开发效率。 另外,Vue.js还提供了一些移动开发常用的插件和工具,例如Vue Router和Vuex。Vue Router可以用来管理移动应用的路由,实现页面之间的跳转和导航;而Vuex则可以用来管理应用的状态,实现不同组件之间的状态共享。 总体而言,基于Vue.js的移动设计具有简洁、高效和灵活等优点。它能够帮助开发人员快速搭建出结构清晰、交互流畅的移动应用,同时也为项目的维护和后续的扩展提供了便利。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值