webpack+vue项目实战（三，配置功能操作页和组件的按需加载）

endless_road 发布于2019-08-20 17:46 / 1190人阅读

摘要：但是实际上，回款管理和开票管理的组件文件也是加载了。所以下面引用按需加载来处理。是不是小很多了，然后和是按需加载的，就是需要的时候才加载。

1.前言

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

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

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

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

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

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

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

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

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

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


    回款管理


    筛选:
    
    重置

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

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.js，3.js’.

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

5.未完待续

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

6.往期占坑

如果看着有点懵的话，建议再看下我之前发的两篇文章
webpack+vue项目实战（一,搭建运行环境和相关配置）
webpack+vue项目实战（二，开发管理系统主页面）

idc机房托管云服务器 webpack按需加载 vue组件 vue组件开发 vue父子组件通讯

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

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

webpack+vue项目实战（五，监听路由，实现同个页面不同状态的切换）

摘要：好了，闲话不多说今天要说的时利用监听路由的方式，实现同个页面不同状态的切换。只要等于，那么页面就是待确认回款页面进入待确认回款页面中，回款状态的筛选标签要加上。 1.前言今天发完这一篇，就要这个系列告一段落了！以后如果有什么要补充的会继续补充！因为在后台管理项目上，搭建的话，主要就是这样了！还有的一些是具体到交互的处理，那个是要根据后端的需求，来进来比较细化的工作，我在这里就不说了！...

guyan0319 2019-08-20 17:47 评论0 收藏0
实现element-ui的按需引入，按需打包加载

摘要：简单说明原理使用实现按需引入打包。这里采用多入口配置，实现各个功能模块分别打包成一个文件，并使用将样式进行抽离后，按入口进行打包为对应的文件。只要在指定入口名为。这个相关配置已经发布了包。简单说明原理：使用babel-plugin-component实现按需引入、打包。将webpack配置成多入口，保证最终打包的目录结构符合babel-plugin-component插件的要求，实...

TesterHome 2019-08-23 10:41 评论0 收藏0
webpack+vue项目实战（四，前端与后端的数据交互和前端展示数据）

摘要：简单点说呢，就是与后端的数据交互和怎么把数据展示出来，用到的资源主要是和，其它参考插件使用。当时，加载中的提示就会出现。后端返回的数据如上图，并不是所有的字段都是可以进行搜索的字段。 1.前言今天要做的，就是在上一篇文章的基础上，进行功能页面的开发。简单点说呢，就是与后端的数据交互和怎么把数据展示出来，用到的资源主要是element-ui和vue-resource，其它参考（vue-...

Yumenokanata 2019-08-20 17:47 评论0 收藏0
Vue组件库开发总结

摘要：组件库开发总结由于工作需要，最近在学习怎么开发一个组件库。按需打包的使用要使用按需打包，不仅组件库的打包需要做处理，项目中也需要做处理。 Vue组件库开发总结由于工作需要，最近在学习怎么开发一个Vue组件库。主要需要实现以下点：1.组件使用npm包引入2.实现按需引入及按需打包项目中许多实现是参考的element-ui，特别是webpack打包部分组织项目项目生成项目生成是直接...

longshengwang 2019-08-23 18:16 评论0 收藏0
webpack4大结局：加入腾讯IM配置策略，实现前端工程化环境极致优化

摘要：或者的，都会对其进行分析。舒适的开发体验，有助于提高我们的开发效率，优化开发体验也至关重要组件热刷新热刷新自从推出热刷新后，前端开发者在开环境下体验大幅提高。实现热调试后，调试流程大幅缩短，和普通非直出模式调试体验保持一致。 showImg(https://segmentfault.com/img/bVbtOR3?w=1177&h=635); webpack，打包所有的资源不知道不...

李增田 2019-08-30 11:09 评论0 收藏0