iviewui前端开发实例技术指南

安装nodejs，参考

https://blog.csdn.net/yan_dk/article/details/90633166

安装nodojs环境不再细述。

开发实例1-后台系统

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

解压后的目录是这样。

 

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

• 安装依赖包

>cnpm install

也可以安装ivew版本包

>cnpm install iview@3 --save

• 执行项目构建

>npm run dev

• 运行访问

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

登录：super_admin---admin

显示页面

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

新建一个view页面，如下

 我们在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

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

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

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

 

异常问题

• 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);
};

本文持续改进完善...