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

显示页面

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

新建一个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);
};

本文持续改进完善...

iviewui前端开发实例技术指南相关推荐

Go 开发关键技术指南 | 敢问路在何方？(内含超全知识大图）
作者 | 杨成立(忘篱) 阿里巴巴高级技术专家 Go 开发关键技术指南文章目录: 为什么你要选择 Go? Go 面向失败编程带着服务器编程金刚经走进 2020 年敢问路在何方? Go 开发指南大图 ...
前端初学者开发学习视频_初学者学习前端开发的实用指南
前端初学者开发学习视频 by Nikita Rudenko 通过尼基塔·鲁登科(Nikita Rudenko) 初学者学习前端开发的实用指南 (A practical guide to learnin ...
北风网web前端开发培训课程 web前端开发实例视频教程下载
web前端开发视频教程 Web前端开发工程师培训零基础Web前端开发工程师高端培训配项目开发(月薪过万的最佳选择) 课程讲师:叮咚课程分类:套餐推荐适合人群:初级课时数量:305课时用到技术 ...
web前端技术亮点_Web前端开发职业技术要求规划
亲爱的朋友们: 大家好,我是演讲者-达达前端,也可以叫我 Jeskson ! 今天,我演讲的题目是<Web前端开发职业技术要求规划>.这个世界有很多不平凡的人,也有更多平凡的人,你是属于哪 ...
Web前端开发职业技术要求规划
亲爱的朋友们: 大家好,我是演讲者-达达前端,也可以叫我 Jeskson ! 今天,我演讲的题目是<Web前端开发职业技术要求规划>.这个世界有很多不平凡的人,也有更多平凡的人,你是属于哪 ...
Web前端开发面试考点指南
Web 前端面试指南与高频考题解析指南第一章面试准备:简历编写和面试前准备一般来说,跳槽找工作要经历投递简历.准备面试.面试和谈 offer 四个阶段.其中面试题目会因你的等级和职位而异,从入门 ...
Go 开发关键技术指南 | Go 面向失败编程 (内含超全知识大图）
作者 | 杨成立(忘篱) 阿里巴巴高级技术专家关注"阿里巴巴云原生"公众号,回复 Go 即可查看清晰知识大图! 导读:从问题本身出发,不局限于 Go 语言,探讨服务器中常常遇到的 ...
Go 开发关键技术指南 | 为什么你要选择 GO？（内含超全知识大图）
作者 | 杨成立(忘篱) 阿里巴巴高级技术专家关注"阿里巴巴云原生"公众号,回复 Go 即可查看清晰知识大图! 导读:从问题本身出发,不局限于 Go 语言,探讨服务器中常常遇到的 ...
jeecgboot前端开发_Jeecg-Boot 技术文档
## 2.4+ 新版本文档请移步到: http://doc.jeecg.com ## (重要的事情说三遍,注意注意注意啦!!!) *** --- __ ![输入图片说明](https://static ...

iviewui前端开发实例技术指南

开发实例1-后台系统

异常问题

iviewui前端开发实例技术指南相关推荐

最新文章

热门文章