iviewui前端开发实例技术指南

迈不过友情╰ 2022-12-04 08:52 333阅读 0赞

安装nodejs，参考

> [https://blog.csdn.net/yan\_dk/article/details/90633166][https_blog.csdn.net_yan_dk_article_details_90633166]

安装nodojs环境不再细述。

## 开发实例1-后台系统 ##

下载开源的后台系统模板：[https://github.com/iview/iview-admin/tree/template][https_github.com_iview_iview-admin_tree_template]

解压后的目录是这样。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70][]

然后在当前目录，执行命令行cmd

*  安装依赖包

>cnpm install

也可以安装ivew版本包

>cnpm install iview@3 --save

*  执行项目构建

>npm run dev

![20200907161100408.png][]

*  运行访问

浏览器访问：http://localhost:8080

显示页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 1][] 我们在此项目中定制开发，现在我们新建一个页面，就是在左侧的树加一个节点，右边显示页面。操作如下：

新建一个view页面，如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 2][]

我们在src/view下，新建home\_test/test.vue

我们编辑test.vue，增加一个常用的表格组件，代码如下：

<template>
        <Table :columns="columns1" :data="data1"></Table>
    </template>
    <script>
        export default {
            data () {
                return {
                    columns1: [
                        {
                            title: 'Name',
                            key: 'name'
                        },
                        {
                            title: 'Age',
                            key: 'age'
                        },
                        {
                            title: 'Address',
                            key: 'address'
                        }
                    ],
                    data1: [
                        {
                            name: 'John Brown',
                            age: 18,
                            address: 'New York No. 1 Lake Park',
                            date: '2016-10-03'
                        },
                        {
                            name: 'Jim Green',
                            age: 24,
                            address: 'London No. 1 Lake Park',
                            date: '2016-10-01'
                        },
                        {
                            name: 'Joe Black',
                            age: 30,
                            address: 'Sydney No. 1 Lake Park',
                            date: '2016-10-02'
                        },
                        {
                            name: 'Jon Snow',
                            age: 26,
                            address: 'Ottawa No. 2 Lake Park',
                            date: '2016-10-04'
                        }
                    ]
                }
            }
        }
    </script>

然后配置路由节点src/router/routers.js

![20200907173334494.png][]

修改routers.js部分如下图，我们增加了一个树节点“测试” ，指向页面为前面的页面test.vue。红色部分就是增加的代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 3][]

这样，我们再刷新页面显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 4][]

这样，初步完成了一个定制页面的功能。

### 异常问题 ###

*  vue-router在3.0版本以上重复点击菜单报错的问题

解决方法：在src/main.js文件加如下代码：

import Router from 'vue-router';
    
    Vue.use(Router);
    // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
    const originalPush = Router.prototype.push
    Router.prototype.push = function push(location) {
      return originalPush.call(this, location).catch(err => err)
    }
    const originalReplace = Router.prototype.replace;
    Router.prototype.replace = function replace(location) {
      return originalReplace.call(this, location).catch(err => err);
    };

本文持续改进完善...

[https_blog.csdn.net_yan_dk_article_details_90633166]: https://blog.csdn.net/yan_dk/article/details/90633166
[https_github.com_iview_iview-admin_tree_template]: https://github.com/iview/iview-admin/tree/template
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70]: /images/20221123/aee381ee4d3644ab99f2d1f327cdfdd2.png
[20200907161100408.png]: /images/20221123/2cbdcf149ac34074a6b5cc16d8d509fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 1]: /images/20221123/a6f8409205e84174b832a4883dc7ac2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 2]: /images/20221123/2d24347c5e394277a4fef376657897a2.png
[20200907173334494.png]: /images/20221123/838c2c43c7c34d94ac54ff3e507a3986.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 3]: /images/20221123/01ff206f364342f3b3243b70f4014e49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 4]: /images/20221123/def4394ce42a4a618b969786a75f6483.png