iviewui前端开发实例技术指南

安装nodejs&＃xff0c;参考

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

安装nodojs环境不再细述。

开发实例1-后台系统

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

解压后的目录是这样。

 然后在当前目录&＃xff0c;执行命令行cmd

• 安装依赖包

>cnpm install

也可以安装ivew版本包

>cnpm install iview&＃64;3 --save

• 执行项目构建

>npm run dev

• 运行访问

浏览器访问&＃xff1a;http://localhost:8080

登录&＃xff1a;super_admin---admin

显示页面

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

新建一个view页面&＃xff0c;如下

 我们在src/view下&＃xff0c;新建home_test/test.vue

我们编辑test.vue&＃xff0c;增加一个常用的表格组件&＃xff0c;代码如下&＃xff1a;

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

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

 这样&＃xff0c;我们再刷新页面显示

这样&＃xff0c;初步完成了一个定制页面的功能。

异常问题

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

解决方法&＃xff1a;在src/main.js文件加如下代码&＃xff1a;

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

本文持续改进完善...