，我们主要讲怎么拿博客园的数据，以及怎么提交数据给博客园； 上几张新图： ?...electron提供的底层API； 然而怎么把访问到的东西呈现在自己的画面上呢 比如，我们在这个JS文件里拿到了博客分类的数据： var temp = $("#post_categories a[href...有人反映说，这样不是很方便，于是这个版本做了多标签页的功能； 首先，我用一个数组存储每个标签页的基础数据 tabs: [{text:"文章列表", url:"https://i.cnblogs.com.../posts", isHomePage:true, pageType:'list', data:null }], vue的模板代码里呈现这个数组的数据： <div @click=...因为我们这个程序，只有两种类型的画面，不是文章列表，就是编辑文章（添加文章和编辑文章是同样的画面） 所以，虽然是多个标签页，也不过是在这两种画面间切换 vue的模板代码如下 <div class="main
难怪这么多的开发者在你提起它的时候就开始跑开了。 但是，你不是一个普通的开发者。你就可以开始就使用TDD与Vue，所以你可以确信你的代码是完全如预期的。...让我们把这种方法用在我们的HelloWorld组件。我们期望什么样的行为？我们希望它能提供一组静态信息，而我们当前的测试涵盖了。如果动态MSG不呈现，那么我们可以相当肯定我们的内容渲染会有问题。...但是，让我们编写一个测试来确保所有链接都显示在页面上，即使出现了一个未知问题。 首先，让我们来考虑一下我们的测试。我们希望确保所有链接都显示正确。...在helloworld.vue我们有9个环节，所以我们希望我们的组件来呈现9个环节。...最后，我们编写了自己的测试，以确保我们的组件能按照我们期望的方式工作。 虽然我们涉及了很多，但这只是冰山一角。学习测试Vue我推荐你看看Vue课程 和TDD课程。
根据你的需求场景，Vue 可以按不同的方式使用： 增强静态的 HTML 而无需构建步骤 在任何页面中作为 Web Components 嵌入 单页应用 (SPA) 全栈 / 服务端渲染 (SSR) Jamstack...以前使用原生 JS 来写一个轮播图，那可能会有点麻烦，但是在 vue 里，我们使用第三方库，比如说ElementUI，里面已经包含了我们常用的轮播图等组件，直接拿过来跟我的应用进行结合，这样就会更加的方便...使用服务端渲染的网站，可以说是“所见即所得”，页面上呈现的内容，我们在 html 源文件里也能找到。...为什么使用服务端渲染，它解决的是什么问题 简单总结起来就是两点： 首屏加载快 相比于加载单页应用，我只需要加载当前页面的内容，而不需要像 React 或者 Vue 一样加载全部的 js 文件 SEO...服务端渲染并非完全之策（服务器稀少而宝贵），关于首屏渲染体验以及SEO的优化方案很多，在不使用服务端渲染这个操作下，我们最好的处理方式就是找寻替代优化方案。
最近搞了个APP（还没上线），打算把心得写到博客里，发现没有趁手的编辑器 于是动手重新搞这个东西 这次用Vue+electron来搞，算是技术的主流了 先把搞这个东西的心得写出来，希望大家不吝赐教。...界面 截几个图给大家看看， 列表界面： ? 文章编辑的界面： ?...我为什么不通过一个隐藏的iframe，来控制博客园的界面 通过它获取我想呈现在自己界面上的数据； 也通过它，提交我自己界面上的用户数据； 这样就只要用博客园前端页面内置的jquery获取文章数据； 然后再用...，所以window.top也访问不到它的宿主页面； 我的目的是让我的用户使用我开发的画面 我的客户在不需要的时候，不需要看到博客园的任何界面 所以这个webview默认是隐藏的； 在用户第一次打开应用的时候...， 我们的客户也是在与博客园的登录页面交互， 当用户登录成功之后，url又会变成https://i.cnblogs.com/posts， 此时，我又让webview隐藏起来，把我自己的界面呈现给用户 这个时候用户已经登录成功了
经过我的实测，上面的这两种方式在mpvue中也都是可用的。...但是，由于mpvue不像Vue Web单页应用那种单Vue实例的结构，而是采用了多Vue实例的结构（app和各个页面都会由单独的Vue实例来管理），所以我个人推荐采用上面所说的第二种用法，这种方式会更加灵活和简单一些...test1页面 最后，点击左上角返回按钮返回index页面，你将发现这个页面上的计数结果也已经发生了改变，自动同步成前面操作后的结果了： ?...返回index页面 小结 通过这个例子，是不是感觉到使用Vuex做页面间的传值和数据同步特别简单？...另外，你也可以在src/stores目录下按需创建多个store模块，独立管理不同业务范围的数据，并按需导入页面组件使用。 Vuex是开发中一件非常得力的工具，希望你能尽快掌握它。
Vue 进行开发，但是我在上一家公司积累了三年以上 React 开发经验。...便于使用图表软件创建 顺带一提，上图并不是基于某些官方标准，比如 UML 类图，它是我基本上创建的一套表达规则。...；在涉及 immutability 的库中，比如 React，你必须创建状态的副本而不是像在 Vue 中那样直接更改它们，并且使用嵌套数据这样做可能会创建笨拙，丑陋的代码。...如果你滥用watch而不是有限考虑以上原则，那么在 Vue 的使用中就可能由此引发的问题。我们来看一个基本的 Vue 示例。...如果不是要设计需要服务于特定的一次性场景的组件，那么设计组件的最终目标是让它与父组件松散耦合，呈现更好的复用性，而不是受限于特定的上下文环境。
前言 组件是大多数现代前端框架的基本概念之一。由@没有好名字了翻译分享。 我在最近的工作中开始使用 Vue 进行开发，但是我在上一家公司积累了三年以上 React 开发经验。...便于使用图表软件创建 顺带一提，上图并不是基于某些官方标准，比如 UML 类图，它是我基本上创建的一套表达规则。...；在涉及 immutability 的库中，比如 React，你必须创建状态的副本而不是像在 Vue 中那样直接更改它们，并且使用嵌套数据这样做可能会创建笨拙，丑陋的代码。...如果你滥用watch而不是有限考虑以上原则，那么在 Vue 的使用中就可能由此引发的问题。我们来看一个基本的 Vue 示例。...如果不是要设计需要服务于特定的一次性场景的组件，那么设计组件的最终目标是让它与父组件松散耦合，呈现更好的复用性，而不是受限于特定的上下文环境。
经过我的实测，上面的这两种方式在mpvue中也都是可用的。...但是，由于mpvue不像Vue Web单页应用那种单Vue实例的结构，而是采用了多Vue实例的结构（app和各个页面都会由单独的Vue实例来管理），所以我个人推荐采用上面所说的第二种用法，这种方式会更加灵活和简单一些...然后点击“进入计数器页面”进到test1页面，并在这个页面上点击加减按钮操作一下，当中显示的count数会发生改变： ?...小结 通过这个例子，是不是感觉到使用Vuex做页面间的传值和数据同步特别简单？...另外，你也可以在 src/stores目录下按需创建多个store模块，独立管理不同业务范围的数据，并按需导入页面组件使用。 Vuex是开发中一件非常得力的工具，希望你能尽快掌握它。
这是一个好问题，登录页虽然不是移动端那种首页，但也是最先呈现给内部用户的。 定位耗时 遇到这种问题，首先需要找出耗时都花在了哪里，然后再去想具体办法去解决。...我看了一下登录页逻辑很简单，不需要 lodash、moment，甚至连 iview 都不需要，完全可以自己去实现样式，这样就不必去加载体积这么大的 vendors chunk 了。...image m.script.text({ body: true }) 这句代码拿到的就是最后页面上渲染出来的 script 标签，如果在这里匹配到 vendors 包，把它给排除掉，之后在页面上就不会加载这个...我这里的方案是这样的，首先把登录页不需要且体积很大的几个包（iview、moment、lodash）给单独打了一个 my-vendors 的包。...服务端直出 除了上面两种方式之外，还有一种比较简单的方式。
这是一个挺好的问题，登录页虽然不是移动端那种首页，但也是最先呈现给内部用户的。 定位耗时 遇到这种问题，首先需要找出耗时都花在了哪里，然后再去想具体办法去解决。...我看了一下登录页逻辑很简单，不需要 lodash、moment，甚至连 iview 都不需要，完全可以自己去实现样式，这样就不必去加载体积这么大的 vendors chunk 了。...： m.script.text({ body: true }) 这句代码拿到的就是最后页面上渲染出来的 script 标签，如果在这里匹配到 vendors 包，把它给排除掉，之后在页面上就不会加载这个...我这里的方案是这样的，首先把登录页不需要且体积很大的几个包（iview、moment、lodash）给单独打了一个 my-vendors 的包，在 Nuxt 源码中用正则表达式去匹配这个文件名，然后手动...服务端直出 除了上面两种方式之外，还有一种比较简单的方式。
index.js----其他的东西都是在那里导入和导出，就像在一个普通的应用程序中一样。...对VuePress的改进 1.使用Vue 3 利用Vue 3改进的模板静态分析来尽可能对静态内容进行分类。...静态内容是作为字符串文字而不是JavaScript呈现函数代码发送的-JS有效负载因此解析起来便宜得多，并且合成也变得更快。...2.在后台使用vite 开发服务器启动更快 更快的热更新 更快的构建（内部使用汇总） 3.页面更轻 Vue 3 tree-shaking + Rollup 代码分割。...但是总的想法是，VitePress将具有尽可能少的主题API（最好使用JavaScript API而不是文件布局约定），并且可能没有插件（所有自定义均在主题中完成）。
以下是我对该文中总结部分的总结： 不是单页应用，会导致浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。 弹框类的功能无法应用到整个大应用中，只能在对应的窗口内展示。...这对于自定义标记结构来说通常不是那么容易 — 想想复杂的HTML（以及相关的样式和脚本），有时您不得不写代码来呈现自定义UI控件，并且如果您不小心的话，多次使用它们会使您的页面变得一团糟。...综上所述，Web Components是有能力以组件加载的方式将微应用整合在一起作为微前端的一种手段，但不幸的是，Web Components是浏览器的新特性，所以它的兼容性不是很好，如果有兼容性要求的项目还是无法使用...封装，提供了更加开箱即用的 API 技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架 HTML Entry 接入方式，让你接入微应用像使用...按需加载，开发者可以选择只加载微应用中需要的部分，而不是强制只能将整个应用全部加载。 应用间通信，每一个应用都可以进行状态共享，就像在使用npm模块进行开发一样便捷。
例如，出于一个非常简单的原因，我尝试避免使用饼图和树图–您看不到具有相似值的饼图字段之间的差异。...报告级别筛选器 –适用于所有页面，当用户应该浏览页面以在相同的过滤上下文中查看数据，但在每个页面上呈现不同的视图时，这些功能尤其有用。...选择过滤器并移至下一页后，筛选器将保持打开状态 还有两个画布内滤镜： 切片器（画布内筛选器） –筛选器可作为单选或多选复选框或下拉菜单使用。我还没有发现它们特别有用。...您可以考虑使用多页报告，其中包含页面，这些页面可以让您大致了解小时（如在交互示例中）或在特定任务下报告的时间详细信息（如上例）。 因此，如果您使用画布内筛选器，则需要在每个页面上分别选择感兴趣的项目。...请记住，您希望用户获得的信息是最重要的。这并不是在所有可能的维度上都有大量的数据视图。 要让读者一眼就能清楚看到是否有问题，是否需要进一步研究。
去年我写过一篇文章，叫《我是如何设计后台框架里那些锦上添花的动画效果》，那会其实已经隐约感觉到，似乎做的好的、被人熟知的几个后台框架，在功能和界面上已经开始趋于同质化了，很难做出差异。...当然这是一个很容易被用户忽略掉的细节，但我相信细节决定成败，我也希望使用的人在用这款产品的时候，能不经意的从一些小细节里发现亮点，内心里说一句「 Cool~ 」，并且这大半年来我也再反复地优化已有的一些功能...标签页拖拽排序 对拖拽的过程进行了优化，方便对比，下面是 Vue2 版本里的标签页拖拽排序效果。...但由于在 Vue2 版本里并不是强制开启，导致很多开发者如果没有仔细阅读文档的话，压根不知道这一特性。 而在 Vue3 版本里，我将这个配置项做为了标准特性，并且做了针对性的优化，覆盖更多的使用场景。...表单展示模式一键切换 在做后台开发的时候，我们通常会使用路由跳转的方式去处理表单详情页，但是如果表单内容量较少呢？
大家好，又见面了，我是你们的朋友全栈君。...想必大家在刨坑vue的时候也遇到过下面情形：比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种： 如果希望点击确定的时候，Dialog 对话框关闭的时候，当前http://localhost...下面我这边整理几种可圈可点的三种方式，大家可以自行的选择： 1、最直接整个页面重新刷新： location. reload() this. $router....，点击确定的时候先跳转到这个空白页，然后再立马跳转回来 空白页supplierAllBack.vue里面的内容： 这个方式，相比第一种不会出现一瞬间的空白页，只是地址栏有个快速的切换的过程，可采用...3、provide / inject 组合 方式是我试过最实用的，下面用项目截图给大家说明下：首先，要修改下你的app.vue 通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载
所以在培训课程和教程写作中，我更希望引导各位分清楚PPT的使用场景。 （参考文章：关于演示设计的场景分类） ? 但无论哪种场景，我们经常碰到的PPT内容逻辑问题总体有两种： 1....，主次分明的逻辑思路、表达方式和规范动作。...目录页，整个文档的结构可以通过目录页进行概览，对于内容和页数较多的报告类文档，目录是最简单直观的结构呈现方式。（告诉观众整个文档包含那些内容） ?...↓ Step 3、PPT页面元素结构设计与表现 概括要点（当前页面要传递的主要信息） 归类分组，确定组数量 逻辑递进 突出重点 我们建议在Xmind中，最好能细分到页面上的内容层级，即能写清楚具体到页面上的框架文案和要点...正如我们开始所提的，将文本编辑成PPT是为了更有效的传递信息，Power最基本的诉求就是简单直观的表现形式（报告不是发布会，用不着考虑多酷炫吸引力）；而Point就是逻辑清晰，层次分明的内容要点。
如果你还不知道 Fantastic-admin 是什么，那么我先用几张预览图给大家了解一番。...开发者在使用过程中遇到的很多问题，在其社区里提供的解决方案都是需要修改框架源码，这也让市面上出现了很多基于 vue-element-admin 的魔改版本。...但大部分也只是小修小改，如果要修改到框架本身的设计，都是牵一发而动全身的。这也是我早期使用 vue-element-admin 开发后的一些感触，于是才下定决定自己写一套可高度配置化的后台框架。...精灵图 这是 Fantastic-admin 单独提供的特性，如果在项目中使用了较多尺寸不大的素材图，你可以考虑使用精灵图的方式将多张小图合并成一张大图，通过 css 背景图定位的方式去展示使用，详细可阅读...的 cache 都是对页面缓存的配置，但背后的逻辑和使用方式却完全不一样 meta.breadcrumb meta.breadcrumb 是否在面包屑导航里显示 meta.affix / 标签页是否固定
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
