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

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

5.未完待续

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

6.往期占坑

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