标签归档文章: vue

vue+iviewui menu+tabs联动及tabs切换总结

因为试着开发一个含有前端的平台软件,所以学习了下前端框架。 纯属巧合接触到了vue(据网上查找资料,国内使用vue的相对更多)。作为一个vue新手,本着目的为导向,对vue的基础知识掌握的并不是很牢靠。凭着一点点的代码编写和逐渐的解决问题,终于有了一点眉目。 这里我使用了iviewui ui vue 组件(国人开发) ,简单的完成了menu(左侧菜单)和 tabs 联动,以及tabs之间跳转切换的功能。实现了我当初计划的功能。

这个平台前端页面分为3大块区域。 顶部菜单,左侧菜单,内容区(由iviewui 的tabs 实现)。
更多…

vs code ide中vue代码如何去掉 invalid-end-tag 的lint错误

vs code ide中vue代码如何去掉 invalid-end-tag 的lint错误
更多…

vue&webpack升级后代码无法runtime运行和编译的解决

前一段时间重装了系统, 准备重新调试下之前开发的简单spa应用(vue)。 安装了最新的node后, 重新安装vue和相关webpack,结果发现再次runtime运行和编译都不太正常。 尝试升级了很多package后, 还是有一些莫名其妙的错误。 除了package的要升级外, 可能还存在因为升级更新导致的config需要修改的情况。

尝试手动升级并解决的过程中,碰到有很多错误,均需要一点点排查比较费工夫。

例如:

更多…

vue如何批量导入一个文件夹下的多个vue component

假如我的代码文件结构如下:

如果我想在App.vue 中导入/src/component/*.vue 的所有vue component 该如何批量导入呢? 如果不进行批量导入的话,只能一行一行的import和Vue.component
更多…

vue iview ui 实现左侧menu菜单和tabs联动

想实现左侧menu菜单和tabs 联动, 因为对vue是初学不是特别熟悉, 还是折腾了好几天.   前些日期发现了iview ui, 感觉不错, 并不必bootstrap 差, 所以用iview 重新写了一个demo.  iview 貌似还是国人开发的, 值得推荐.

menu菜单和tabs的联动是指, 我在左侧点击某个菜单时, 右侧的tab页自动创建一个tab标签, 如果点击的该菜单已经存在于tab标签下, 则自动激活该标签显示该标签下内容.    标签下 面需要动态加载dynamic vue component 的内容.   单独的tab页,增加tab和移除tab 标签中并不复杂, 因为iview的tab 组件默认已经支持了.  所以我这里仅是实现menu和tab的联动.  menu 菜单点击后,  触发一个 select 操作,  那么我们需要获取tabs的component 设计activeKey即可实现.

更多…