资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/基于Vue2全家桶的移动端AppDEMO实现

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

Jiavan / 2510人阅读

好久没更新过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

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

页面结构分析

--
本项目为一个demo项目,主要为了练习vue2的使用，结构上借鉴了官方的写法，界面为通用的app样式，才用饿了么团队的Mint-Ui的制作。
这个demo的每一个页面都是一个.vue文件，利用Vue的单文件组件，非常便于管理每个页面的状态，样式和数据，首页主要是展示页，和操作面板页。下面是主页的代码：

先看代码部分Vue2相比Vue1相比还是变化很多的，首先就是计算属性比以前更好用了，其次是生命周期部分和以前相比变化很大，这点要注意下。其次是Vue2更推崇ES6的写法，并且支持了promise，这是非常好的地方，而且官方的迭代文档也写的很全，基本上很容易从1迭代到2。并且Vue2不再支持双向绑定（sync）这个方法了，它使用了一种更好的方式来进行父子组件之间的通信（emit），这样子组件就不会影响到父组件的状态。下面我放出这个主页Vue1的代码，大家可以比较一下：





将不同的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里面进行统一的管理，然后再对应的模块里面来处理这些方法，在不同的模块里面我们只能操作对应模块的数据和状态，这对于状态管理来说简直是非常完美。
超融合服务器 idc机房托管 基于腾讯云实现移动直播 web端基于webrtc实现直播 webrtc 移动端实现 基于webrtc实现对讲

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81344.html

相关文章

  • vue2全家桶写的material design风格的cnode社区

    摘要：社区项目地址点此查看预览地址点此查看使用模拟手机查看基于全家桶的风格社区尽量接近原生的风格，参考了，的客户端。 vue-md-cnode社区 项目地址：点此查看预览地址：点此查看（使用chrome模拟手机查看） 基于vue全家桶的Material Design风格Cnode社区 尽量接近原生App的Material Design风格，参考了Google Play，Cnode的Andr...

    孙吉亮 评论0 收藏0

  • 前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

    摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处 查看github最新的Vue...

    izhuhaodev 评论0 收藏0

  • 【收藏】2019年最新Vue相关精品开源项目库汇总

    摘要：前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日，很多内容早已过期或是很多近期优秀组件未被收录，所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误，可以通过反馈给小肆。 前言 本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日，很多内容早已过期或是很多近期优...

    williamwen1986 评论0 收藏0

  • 基于 Vue2+Node+mongoDB 的前后端分离全栈练手小项目

    摘要：本文源码简介之前刚入门并做好了一个简而全的纯全家桶的项目，数据都是本地模拟请求的详情请移步这里为了真正做到数据库的真实存取，于是又开始入门了并以此来为之前的页面写后台数据接口。 本文源码：Github 简介： 之前刚入门vue并做好了一个简而全的纯vue2全家桶的项目，数据都是本地 json 模拟请求的；详情请移步这里：vue-proj-demo 为了真正做到数据库的真实存取，于是又...

    jay_tian 评论0 收藏0

发表评论

登陆后可评论

0条评论

Jiavan

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<