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项目实战(二,开辟治理体系主页面)