基于Vue2.js全家桶的移动端AppDEMO实现
好久没更新过Vue的⼩⽂章，上次做了⼀个基于Vue+Mint-ui的移动端AppDemo，集成了推送功能，然后通过cordova打包⽣成apk，移动端表现还不错，今天把这个⼩东西分享出来，希望有更多的⼩伙伴能够⽤Vue去做⼀些有意思的东西，本⼈才疏学浅，有说的不对的地⽅，还请⼤家多多指教。下⾯按照惯例放上demo地址和源码地址，希望⼤家能给我点下star：
(进去需要先注册才能登录,⽤的localstorage，随便写符合格式的就⾏)
搭建项⽬
项⽬结构
本项⽬才⽤Vue-cli脚⼿架⾃动⽣成，这是⼀个Vue⽣态系统中⼀个伟⼤创举。这意味着我们不需要⼿动构建我们的项⽬，⽽它就可以很快地为我们⽣成。下图是⼀个完整的项⽬结构，如图所⽰：
项⽬流程：
npm i -g vue-cli
vue init webpack vue-demo-orderApp
cd vue-demo-orderApp
npm i
npm install vue-router vuex --save
npm install mint-ui --save
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" ></div></mt-swipe-item>
<mt-swipe-item><div class="banner2 banner" ></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()">
js实现轮播图最简代码
<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 => ders_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" ></div></mt-swipe-item>            <mt-swipe-item><div class="banner2 banner" ></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>
同步成功</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 = igin + window.location.pathname + '#!/login'
console.log('请登录')
this.$({path:'/login'})
}
},
data(){
let popupVisible = false
return {popupVisible}
},
vuex:{
getters:{
order_status: state => ders_status
},
actions:{
synchroOrder
}
},
methods:{
getOrders: function(that){
this.synchroOrder(that)
der_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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。