业务后台商业组件ViewUI（iView）入门

  • 2021-12-24
  • Admin

1 安装View UI组件

1.1 什么是View UI

后台管理信息系统（MIS）是软件开发的一个重要领域，如OA、ERP、商城后台等等都属于MIS系统。业务人员需要在MIS系统中操作大量的表单和数据，传统的服务器（同步）页面伴随着大量刷新，用户体验很差，所以开发界喜欢选择以vue为代表的新一代前后端分离技术以实现流程的操作。

在MIS系统开发中，需要大量的表单、表格、日历、选项卡等复杂组件来完成业务功能，这些组件实现起来都比较复杂，作为普通程序员，一般会选择现成的商业组件。

业界比较成熟的后台商业组件主要有：Element UI、View UI 和 Ant Design，这些组件的功能和使用方式都大同小异，这里介绍View UI给大家使用。

官网：iView - A high quality UI Toolkit based on Vue.js

View UI的前身是iView，至今已经是4.0版，由于最新版引入了商业模式，因此代码更新较快。

1.2 安装View UI

官方的安装教程：https://www.iviewui.com/docs/guide/install

为vue项目安装View UI组件有很多方式，这里使用最简便得方法，就是直接使用vue-cli得ui向导来完成安装。新版得vue-cli不仅可以通过命令行来完成项目创建，还可以通过web可视化方式创建，View UI可以作为vue-cli的插件添加到项目中。

（1）使用vue-cli可视化项目管理器

在命令行中输入以下指令：

vue ui

（2）添加插件：axios 和 view-ui

 

 完成上述操作后，一个包含view-ui插件库的vue工程就创建好了，正常进入项目目录执行：

npm run serve

2 项目布局：

2.1 栅格系统

类似BootStrap中的12栅格系统，View UI通用把页面分为行（Row）和列（Col），使用24栅格进行布局。

官方的栅格教程：https://www.iviewui.com/components/grid

2.2 设置路由：

（1）分层次创建组件

（2）设置父子级别路由： 

  1. const routes = [
  2. 2
  3.     {
  4. 3
  5.       path: '/',
  6. 4
  7.       name: 'home', 
  8. 5
  9.       component: Home,
  10. 6
  11.       children:[
  12. 7
  13.         {
  14. 8
  15.           path:'/',
  16. 9
  17.           name:'default',
  18. 10
  19.           component:Default,
  20. 11
  21.           meta:{
  22. 12
  23.             title: '后台首页'
  24. 13
  25.           }
  26. 14
  27.         },
  28. 15
  29.         {
  30. 16
  31.           path:'/categories',
  32. 17
  33.           name:'categories',
  34. 18
  35.           component:Categories,
  36. 19
  37.           meta:{
  38. 20
  39.             title: '分类管理'
  40. 21
  41.           }
  42. 22
  43.         },
  44. 23
  45.         {
  46. 24
  47.           path:'/products',
  48. 25
  49.           name:'products',
  50. 26
  51.           component:Products,
  52. 27
  53.           meta:{
  54. 28
  55.             title: '商品管理'
  56. 29
  57.           }
  58. 30
  59.         },
  60. 31
  61.       ]
  62. 32
  63.     },
  64. 33
  65.     {
  66. 34
  67.       path:'/login',
  68. 35
  69.       name:'login',
  70. 36
  71.       component:Login
  72. 37
  73.     }
  74. 38
  75.   ]

2.3 布局

业务系统通常由比较严谨的布局，View UI为我们准备好了多种布局风格，这里使用“顶部-侧边布局”作为示例：

​​​​​​https://www.iviewui.com/components/layout#DB-CBBJ

  1. <style scoped>
  2. 2
  3. ......
  4. 3
  5. .layout-logo{
  6. 4
  7.     ......
  8. 5
  9.     color:#fff;
  10. 6
  11.     line-height: 30px;
  12. 7
  13.     text-align: center;
  14. 8
  15. }
  16. 9
  17. ......
  18. 10
  19. style>
  20. 11
  21. <template>
  22. 12
  23.     <div class="layout">
  24. 13
  25.         <Layout>
  26. 14
  27.             <Header>
  28. 15
  29.                 <Menu mode="horizontal" theme="dark" active-name="1">
  30. 16
  31.                     <div class="layout-logo">
  32. 17
  33.                       <router-link to="/"><h3>趣物网 - 后台管理h3>router-link>  
  34. 18
  35.                     div>
  36. 19
  37.                     <div class="layout-nav">
  38. 20
  39.                         <MenuItem name="1">
  40. 21
  41.                             <Icon type="ios-navigate">Icon>
  42. 22
  43.                             Item 1
  44. 23
  45.                         MenuItem>
  46. 24
  47.                         <MenuItem name="2">
  48. 25
  49.                             <Icon type="ios-keypad">Icon>
  50. 26
  51.                             Item 2
  52. 27
  53.                         MenuItem>
  54. 28
  55.                         <MenuItem name="3">
  56. 29
  57.                             <Icon type="ios-analytics">Icon>
  58. 30
  59.                             Item 3
  60. 31
  61.                         MenuItem>
  62. 32
  63.                         <MenuItem name="4">
  64. 33
  65.                             <Icon type="ios-paper">Icon>
  66. 34
  67.                             Item 4
  68. 35
  69.                         MenuItem>
  70. 36
  71.                     div>
  72. 37
  73.                 Menu>
  74. 38
  75.             Header>
  76. 39
  77.             <Layout :style="{padding: '0 50px'}">
  78. 40
  79.                 <Breadcrumb :style="{margin: '16px 0'}">
  80. 41
  81.                     <BreadcrumbItem>后台管理BreadcrumbItem>
  82. 42
  83.                     <BreadcrumbItem>{{$route.meta.title}}BreadcrumbItem>
  84. 43
  85.                 Breadcrumb>
  86. 44
  87.                 <Content :style="{padding: '24px 0', minHeight: '280px', background: '#fff'}">
  88. 45
  89.                     <Layout>
  90. 46
  91.                         <Sider hide-trigger :style="{background: '#fff'}">
  92. 47
  93.                             <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
  94. 48
  95.                                 <Submenu name="1">
  96. 49
  97.                                     <template slot="title">
  98. 50
  99.                                         <Icon type="ios-navigate">Icon>
  100. 51
  101.                                         商品信息管理
  102. 52
  103.                                     template>
  104. 53
  105.                                     <MenuItem name="1-1">
  106. 54
  107.                                       <router-link to="/categories">分类管理router-link>
  108. 55
  109.                                     MenuItem>
  110. 56
  111.                                     <MenuItem name="1-2">
  112. 57
  113.                                       <router-link to="/products">商品管理router-link>
  114. 58
  115.                                     MenuItem>
  116. 59
  117.                                 Submenu>
  118. 60
  119.                                 <Submenu name="2">
  120. 61
  121.                                     <template slot="title">
  122. 62
  123.                                         <Icon type="ios-analytics">Icon>
  124. 63
  125.                                         客户订单管理
  126. 64
  127.                                     template>
  128. 65
  129.                                 Submenu>
  130. 66
  131.                             Menu>
  132. 67
  133.                         Sider>
  134. 68
  135.                         <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
  136. 69
  137.                           <router-view>router-view>
  138. 70
  139.                         Content>
  140. 71
  141.                     Layout>
  142. 72
  143.                 Content>
  144. 73
  145.             Layout>
  146. 74
  147.             <Footer class="layout-footer-center">2011-2016 © TalkingDataFooter>
  148. 75
  149.         Layout>
  150. 76
  151.     div>
  152. 77
  153. template>
  154. 78
  155. <script>
  156. 79
  157.   export default {}
  158. 80
  159. script>

3 常见组件的使用：

3.1 Table - 数据表格

表格组件通过columns属性绑定列，通过data属性绑定行数据。以分类管理组件（Categories.vue）为例：

  1.  <Table border :columns="columns" :data="categories"> 
  2. 2
  3.       <template slot="operation" slot-scope="{row}">
  4. 3
  5.         <Button type="primary" @click="showEdit(row)">修改Button> 
  6. 4
  7.         <Button type="error" @click="deleteCategory(row)">删除Button>
  8. 5
  9.       template>
  10. 6
  11.     Table>

背后绑定的数据：

  1. export default {
  2. 2
  3.   name:'categories',
  4. 3
  5.   data(){
  6. 4
  7.     return {
  8. 5
  9.       columns:[
  10. 
			
    
	
    
		
    免费ERP
    
	
    
		
    61ebf17978942.jpg
     注册    登录 
    用户名: demo; 密码: 123456
    
	
    

    
	
    
		
    最新
    
	
    
			
	
    

    
	
    
		
    最热

ERP

联系站长

QQ：769220720

Copyright © SibooSoft All right reserved 津ICP备19011444号