webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)

1.媒介

上篇文章(webpack+vue项目实战(二,开辟治理体系主页面)),完成了,侧边栏的一个操纵,点击侧边栏的一些操纵,最主要的就是路由的切换。看了上一篇的同伴也不难发明,除了点击侧边栏‘首页’以外,点击别的的都是白色的一片。缘由我想人人都晓得,就是由于对应的组件文件没有。而本日,就是要做谁人对应的组件文件。

2.运用element-ui开辟功用操纵页面

element-ui是什么就不多诠释了,就是一个基于vue开辟的一个组件库。内里有许多能够用的组件,款式也不错。
好,引见就到这,下面最先页面的规划。我是根据本身的主意弄的,毕竟,背景的治理体系,不会有什么设计图,效果图的,能用就好,演习的小同伴也能够发挥本身的设想。

最先着手了,起首我就挑一个‘回款治理’这个模块吧!首页在目次上竖立回款模块的这个组件。
《webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)》
看到这个目次,人人不要懵了哦,照样之前谁人目次,只是如今这里是在编辑器截图罢了。没有转变,人人追念一下就晓得了。

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

《webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)》

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

《webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)》

然后,在浏览器上,点击回款治理的模块,照样白色的一片,没有东西。由于cashList.vue这个文件没有任何东西。
如今加上‘回款治理’,磨练下,发明就一般,已找到了这个组件。

《webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)》

路由怎样找到这个组件的。第一篇已说,路由婚配到了url,index.html中的<router-view></router-view>就输出相对应的组件的内容。(在这里栗子这里,url是/cash/cashList,自然而然,输出的组件就是cashList.vue。内容也就是这个组件文件内里包括的内容,还没理清关联的同伴,如今温习下)

《webpack+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>

《webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)》

然后就是列表。代码比较多,然则许多都是反复的,这个基础都是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
    }]

《webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)》

发明是否是一下的工夫,就把排版给搞定了(有些小细节照样得本身着手,这个小同伴本身着手操纵吧)!这是固然的,由于款式和组件的操纵,element-ui都供应了,我们须要做的,就是套一下数据。

3.别的页面

然后,别的的功用页面呢,也是如许做!比方我挑一个‘开票治理’页面吧!也是一样的操纵!

步骤1,建立文件invoiceList.vue
《webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)》

步骤2,在router.js中引入组件,设置路由
《webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)》

《webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)》这个path的值怎样获得的?之前说过,看snav-component.vue。获得对应的url。然后用这个url去router.js中设置。如今算是一个温习,小同伴们记住了!(假如须要增加新页面,在snav-component.vue,没有记录过的页面,那末就得在snav-component.vue加上页面所对应的种种信息,然后再设置路由!)
《webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)》

步骤3,整顿invoiceList.vue代码
为了轻易看到测试效果,我把cashList.vue全部文件的内容,直接复制粘贴到方才新建的invoiceList.vue内里,除了一个题目,别的都不改!

《webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)》

步骤4,看效果,在回款治理和开票治理往返切换,是否是就是一般显现了!

《webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)》

《webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)》

另有一些页面,我就不操纵了!也是根据这个步骤,依葫芦画瓢!

4.按需加载

人人有无想到这个题目。比方,一最先接见,只显现和输出了’首页’的的组件(welcome.vue)。然则实际上,’回款治理’和’开票治理’的组件文件也是加载了。由于在router.js文件内里import进来的时刻,引入的都加载了!

《webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)》

如今只是三个文件,状况还好。编译后打包的大小,index.js照样84.3k,(vendors.js是公用模块,比方vue,vue-router这些文件,别的是热革新的文件。)

《webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)》

然则,假如今后须要引进100个,1000个组件文件呢!这下index.js的大小没法预估!。所以下面援用按需加载来处置惩罚。写法没有什么区别

《webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)》

然后检察效果。是否是小许多了,然后invoiceList.js和cashList.js是按需加载的,就是须要的时刻才加载。如许至少在体验上是更好了!

魔法解释的作用就是,比方前面用了/*webpackChunkName: "cashList"*/响应的文件,编译出来就是命名为'cashList.js',不加就是‘1.js也许2.js3.js’.

《webpack+vue项目实战(三,设置功用操纵页和组件的按需加载)》

相干材料 路由懒加载异步组件代码星散

5.未完待续

本日,到此为止了。本日主如果运用vue-router完成了在单页面差别的组件切换的一个功用,以及element-ui的简朴运用!这个也是单页面运用的一个小模板也许模子了!假如想在项目上加其他页面,也是根据上面所说的要领!
根据步骤处置惩罚就好!本日做好的功用操纵页,比方‘回款治理’,‘开票治理’页面,是一写很简朴的展现页面。
下篇文章也许会提到一些页面上的一些操纵开辟。也会提到怎样运用vue-resource来跟背景举行数据的交互操纵,前端又应当怎样把数据展现在页面上。

6.往期占坑

假如看着有点懵的话,发起再看下我之前发的两篇文章
webpack+vue项目实战(一,搭建运转环境和相干设置)
webpack+vue项目实战(二,开辟治理体系主页面)

    原文作者:守候
    原文地址: https://segmentfault.com/a/1190000010053886
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞