webpack+vue项目实战(三,配置功能操作页和组件的按需加载)

1.前言

上篇文章(webpack+vue项目实战(二,开发管理系统主页面)),实现了,侧边栏的一个操作,点击侧边栏的一些操作,最重要的就是路由的切换。看了上一篇的伙伴也不难发现,除了点击侧边栏‘首页’之外,点击其它的都是白色的一片。原因我想大家都知道,就是因为对应的组件文件没有。而今天,就是要做那个对应的组件文件。

2.使用element-ui开发功能操作页面

element-ui是什么就不多解释了,就是一个基于vue开发的一个组件库。里面有很多可以用的组件,样式也不错。 好,介绍就到这,下面开始页面的布局。我是按照自己的想法弄的,毕竟,后台的管理系统,不会有什么设计图,效果图的,能用就好,练习的小伙伴也可以发挥自己的想象。

开始动手了,首先我就挑一个‘回款管理’这个模块吧!首页在目录上建立回款模块的这个组件。

看到这个目录,大家不要懵了哦,还是之前那个目录,只是现在这里是在编辑器截图而已。没有改变,大家回想一下就知道了。

然后下一步就是配置这个文件的路由了!从上一篇文章知道回款模块对应的url是‘/cash/cashList’。(下面的图片截图就是snav-component.vue这个文件,对应的就是menus这个数组变量,就是侧边栏数据)

然后去到router.js配置回款模块的组件。

然后,在浏览器上,点击回款管理的模块,还是白色的一片,没有东西。因为cashList.vue这个文件没有任何东西。 现在加上‘回款管理’,检验下,发现就正常,已经找到了这个组件。

路由怎么找到这个组件的。第一篇已经说,路由匹配到了url,index.html中的<router-view></router-view>就输出相对应的组件的内容。(在这里栗子这里,url是/cash/cashList,自然而然,输出的组件就是cashList.vue。内容也就是这个组件文件里面包含的内容,还没理清关系的伙伴,现在复习下)

首页是头部,代码就是这么几行,样式我不多说了,都很简单。按钮还是element-ui提供的组件。

<div class="cash-title">
    <span>回款管理</span>
</div>
<div class="cash-search">
    <span class="fs14 mr15">筛选:</span>
    <el-button type="primary" size="small" icon="search"></el-button>
    <el-button type="danger" size="small">重置</el-button>
</div>

然后就是列表。代码比较多,但是很多都是重复的,这个基本都是element-ui提供的组件。el-table这个组件,大家可以看下官网的具体使用,也比较简单。

<div class="cash-table">
    <el-table :data="cashList" border style="width: 100%" highlight-current-row>
        <el-table-column label="编号" width="180">
            <template scope="scope">
                <a href="javascript:;">{{scope.row.cashId}}</a>
            </template>
        </el-table-column>
        
        <el-table-column label="客户名称" width="200">
            <template scope="scope">
                <span>{{ scope.row.custoName }}</span>
            </template>
        </el-table-column>
        ....
    </el-table>
</div>

cashList这个数据是我模拟的。我也发两个,让大家可以进行测试下!大家也可以随意的模拟一下这个数据!

[
    {
        "cashId": "M2017062900049001",
        "ordId": "O2017062900075030",
        "cashType": 0,
        "payChannel": null,
        "payType": null,
        "cashStatus": 0,
        "custoName": "UFO",
        "userName": "陈",
        "userMobile": "16936025651",
        "merchandisers": "文",
        "cashAmount": 1832500,
        "cashDate": 1498718850000,
        "cashAccountType": 0,
        "payNo": null
    },
    {
        "cashId": "M2017062900049002",
        "ordId": "O2017062900075031",
        "cashType": 0,
        "payChannel": null,
        "payType": null,
        "cashStatus": 0,
        "custoName": "UFO",
        "userName": "天使",
        "userMobile": "13926085651",
        "merchandisers": "乐",
        "cashAmount": 1832500,
        "cashDate": 14987188558400,
        "cashAccountType": 0,
        "payNo": null
    }]

发现是不是一下的功夫,就把排版给搞定了(有些小细节还是得自己动手,这个小伙伴自己动手操作吧)!这是当然的,因为样式和组件的操作,element-ui都提供了,我们需要做的,就是套一下数据。

3.其它页面

然后,其它的功能页面呢,也是这样做!比如我挑一个‘开票管理’页面吧!也是同样的操作!

步骤1,创建文件invoiceList.vue

步骤2,在router.js中引入组件,配置路由

这个path的值怎么得到的?之前说过,看snav-component.vue。得到对应的url。然后用这个url去router.js中配置。现在算是一个复习,小伙伴们记住了!(如果需要添加新页面,在snav-component.vue,没有记录过的页面,那么就得在snav-component.vue加上页面所对应的各种信息,然后再配置路由!)

步骤3,整理invoiceList.vue代码 为了方便看到测试结果,我把cashList.vue整个文件的内容,直接复制粘贴到刚刚新建的invoiceList.vue里面,除了一个标题,其它都不改!

步骤4,看结果,在回款管理和开票管理来回切换,是不是就是正常显示了!

还有一些页面,我就不操作了!也是按照这个步骤,依葫芦画瓢!

4.按需加载

大家有没有想到这个问题。比如,一开始访问,只显示和输出了'首页'的的组件(welcome.vue)。但是实际上,'回款管理'和'开票管理'的组件文件也是加载了。因为在router.js文件里面import进来的时候,引入的都加载了!

现在只是三个文件,情况还好。编译后打包的大小,index.js还是84.3k,(vendors.js是公用模块,比如vue,vue-router这些文件,其它是热刷新的文件。)

但是,如果以后需要引进100个,1000个组件文件呢!这下index.js的大小无法预估!。所以下面引用按需加载来处理。写法没有什么区别

然后查看结果。是不是小很多了,然后invoiceList.js和cashList.js是按需加载的,就是需要的时候才加载。这样至少在体验上是更好了!

魔法注释的作用就是,比如前面用了/*webpackChunkName: "cashList"*/相应的文件,编译出来就是命名为'cashList.js',不加就是‘1.js或者2.js3.js’.

相关资料 路由懒加载异步组件代码分离

5.未完待续

今天,到此为止了。今天主要是利用vue-router实现了在单页面不同的组件切换的一个功能,以及element-ui的简单应用!这个也是单页面应用的一个小模板或者模型了!如果想在项目上加其他页面,也是按照上面所说的方法! 按照步骤处理就好!今天做好的功能操作页,比如‘回款管理’,‘开票管理’页面,是一写很简单的展示页面。 下篇文章或许会提到一些页面上的一些操作开发。也会提到怎么利用vue-resource来跟后台进行数据的交互操作,前端又应该怎么把数据展示在页面上。

6.往期占坑

如果看着有点懵的话,建议再看下我之前发的两篇文章

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏乐百川的学习频道

Visual Studio Code介绍

应该有很多人都知道Atom编辑器吧,它是由Github开发的一个跨平台的编辑器。它使用了跨平台的Electron,用前端技术编写图形界面。一开始我也推荐过这个编...

29950
来自专栏沈唁志

WordPress基于腾讯云COS存储站点图片及跨域解决方法

83630
来自专栏张戈的专栏

博客文章重新启用评论,附一键填写评论中用户信息代码生成工具

博客关闭评论近一个月的时间,总体的感觉很是安逸,不过看了留言板的反馈,感觉关闭评论对一些真正需要帮助的朋友还是带来了些许不方便,思前考后,决定再次开放评论。 但...

36570
来自专栏Jack-Cui

Jetson TX1开发笔记(二):TX1开发前必做的几件事

嵌入式平台: Jeston TX1     在上篇博客中,博主已经使用Jetpack3.0为Jetson TX1刷了最新的系统。但是,在开发前,个人感觉有几个...

36060
来自专栏wOw的Android小站

[iOS] Win8下在Vmware11中安装使用苹果系统OS X 10.10

  近来因为需要做 iOS 的项目,所以需要多花一些时间看看敲敲代码。因为自己手头上并没有 Mac(过年为了闲的时候能玩玩游戏买了联想,唉),想想不能只靠每天在...

20200
来自专栏Windows Community

Windows 8.1 应用再出发 - 创建我的第一个应用

转眼间Windows 8.1已经发布了四个多月,之前因为开发需要对Windows 8.1新特性进行过零散的学习和使用,一直没有静下心来系统的学习过。近日部门有几...

368120
来自专栏游戏杂谈

Unity设置播放模式下始终先执行指定的场景

通过我们使用Unity开发游戏,是在PC/Mac上。而一个游戏通常也会有很多的场景,比如A、B、C、D三个场景,正常流程下的执行顺序是 A –> B –> C ...

58220
来自专栏电光石火

eclipse从数据库逆向生成Hibernate实体类

     做项目必然要先进行数据库表设计,然后根据数据库设计建立实体类(VO),这是理所当然的,但是到公司里做项目后,让我认识到,没有说既进行完数据库设计后...

24590
来自专栏FreeBuf

漏洞追踪:最新IE UXSS漏洞技术分析

最近David Leo在Full Disclosure上爆出了一个ie的 uxss 漏洞,可以绕过ie的同源策略。FreeBuf也有相关的报道(点我查看)。本文...

20870
来自专栏河湾欢儿的专栏

客户端和浏览器端交互模型

26110

扫码关注云+社区

领取腾讯云代金券