不久前第四届Vue.js开发者大会在杭州举行，会上Vue.js 作者尤雨溪携团队核心成员对Vue3 生态进展和计划进行了详细的汇报。华为云云享专家玉城将在本次直播中对会上了解到的一手资讯及前沿知识进行全面解读。 直播时间2021.6.3  20：00 直播地址https://bbs.huaweicloud.com/live/education_live/202106032000.html分享下方海报，和伙伴们一起看直播，赢大奖~  活动介绍云享MindTalks是由华为云DevCloud团队携手云享专家共同策划的系列技术交流活动各业界大咖纷纷现身群聊，以直播形式，进行最直接的技术交流和思想碰撞不同领域的专家，各样的业界话题尽在此处直播时长不超过40分钟，极简高效！直播结束参与群内有奖答题答题成功者获得抽奖资格有机会获得华为云开发者精美周边听说，和小伙伴一起参与，机会更大哦~ 活动规则1.扫码加入华为开发者企业微信群聊，先扫先进，人数有限2.直播结束参与问卷答题，回答全部正确者将获得限量云享MindTalks VIP资格3.参与答题即可抽奖 抽奖奖品为华为云开发者鼠标垫X1

【功能模块】开发高级页面组件【操作步骤&问题现象】1、组件预览就提示VueRouter is not defined2、组件中的element ui也报错 _this.$message is not a function代码是设备管理组件里的代码【截图信息】【日志信息】（可选，上传日志内容或者附件）

https://bbs.huaweicloud.com/blogs/254544成绩出炉，小伙伴们可以填地址领奖了

已结束，成绩正在统计中不知不觉中，移动应用开发全栈成长计划第二阶段VUE&H5所有课程内容都已经全部更新完毕。大家积极的学习态度，遇到问题及时在学习群内提出，让本阶段全栈课程可以顺利完成再次感谢大家：◎积极完成每章的随堂测验打卡，做到了课后的知识强化与巩固；◎认真完成每周读书笔记打卡，将自己的学习心得总结下来；◎有活力地问答官打卡，分享自己在学习中的问题和经验。十分感谢大家能顺利完成第一阶段的学习内容，我们也在大家学习的过程中，总结了优缺点，让大家可以做一个全能型移动端开发者。所以，对下阶段课程作出更佳的完善，敬请期待！预告：移动应用开发全栈成长计划第三阶段-小程序&angular课程将于2021年3月22日开启，大家千万不要错过最后一个阶段哦~现在，大家迎来了第一阶段考核，让我们来看一下考核的具体内容▶考核打卡时间：2021.03.08-2021.03.21 23:59 ▶考核途径：点击下方链接，选择【第二阶段VUE&H5篇-考核作业】https://classroom.devcloud.huaweicloud.com/classdetail/1d186e167a434a6da7d00762268783bc/job▶考核要求：进入考核页面后，点击“查看习题描述”，详细阅读考核要求和评判标准后按要求进行考核，提交机会有2次，请大家认真作答。▶打卡要求：由于本阶段涵盖知识点比较多，所以上传形式为按考核要求在本地编辑器运行后，将压缩包上传至classroom后台，并提交。并且按以下要求进行截图打卡！只有在按照要求进行打卡才会得到第二阶段考核证书！只有在按照要求进行打卡才会得到第二阶段考核证书！只有在按照要求进行打卡才会得到第二阶段考核证书！▶打卡方式：方式：打卡正确的回复格式：华为云账号+姓名（显示在考核证书上面名字）+提交完考核页面截图1张例如：华为云账号：grandmaster  姓名：华为云小助手01 考核截图如下重要提示：请严格按照回复示例进行回复，本次为阶段末考核项目，如果没有按照要求的格式进行回复，版主将不予提示，同时不计入考核结果，会影响考核证书及奖品的发放哦~▶考核评分：提交考核内容后由专家老师根据评分标准评分，满分100分，分数将于开始审核后15个工作日内公布，分数会公布在博客里面，具体请大家留意小助手信息。▶评分标准：1.项目整体编译无报错、运行效果流畅2.配置化越灵活，得分越高3.代码书写越规范，得分越高4.扩展越丰富，得分越高5.用户体验越佳、得分越高▶考核奖励：◎参与最后考核并按要求回复本帖，就可得到电子版证书（证书上会根据大家的回复的真实姓名填写信息，请大家在留信息时注意）参与考核，人人有份，证书由01小助手微信点对点发放，没添加小助手企业微信的伙伴可以扫描下方二维码添加，证书将在第一阶段结束后15个工作日内发放，请大家耐心等待小助手的通知哦~（注意：凭各阶段电子证书最后可兑换实体证书哦~）◎考核分数≥60分并回复本帖，可得到考核积分额外的3积分！◎本阶段会有专家老师评审出排名1位“完美代码”（提交代码分数最高，同分看打卡回帖提交时间）获奖者，还会额外得到华为云无线鼠标+10积分哦~◎本阶段会有专家老师评审出排名2、3位“优佳代码”（同分看打卡回帖提交时间）获奖者，还会额外得到7积分和5积分哦~◎特别提示：参加了移动应用开发所有阶段考核的同学们，最后可凭每阶段证书兑换整阶段实体证书一份，请大家关注后续规则！     ◎参与考核即可获得20积分累计到总积分中，赢取最后积分大奖；大家别忘了随堂测验，读书笔记和问答官排位赛回复打卡截止日期为03月21日23:59，抓紧时间打卡呀~积分排行细则积分排行榜奖品全阶段累计积分奖励活动注意事项1.由于本帖回复内容为阶段考核测试内容，并涉及到个人隐私，已设置回帖仅版主可见，请大家放心回复2.请大家务必在考核规定时间03月21日 23:59内完成考核回帖打卡，否侧将影响证书和奖品的发放3.积分和考核奖品信息我们会在考核阶段结束后15个工作日内整理完毕，发放奖品4.华为云账号为实名认证，每个实名认证账号/或同一收货地址收货人只能获得一份奖品，请大家注意！

亲爱的开发者们大家心心念念的【移动应用开发全栈成长计划】已开课我们也特别为大家设置了【学习任务打卡】环节为的就是让大家巩固学习成果，紧跟学习进度请将需要完成的每章随堂测验按要求回复到本帖下方按要求格式回复即可获得积分累计阶段奖品，还能有机会获得附加幸运奖哦~征集时间2021.01.06-2021.03.21 23:59征集要求在本帖中，回复自己本章随堂测验内容打卡要求在本帖中，回复对应章节的随堂测验并提交截图 ↓章节作业位置：打卡回复格式：华为云ID+课程完成截图，如图所示↓↓↓华为云ID：grandmaster奖励方式每周每篇有效笔记可获得2积分阶段学习将以积分排行榜的形式，对前300名小伙伴进行奖励哦！此外还有附加奖励，每周在本周内提交学习笔记的用户中，抽取10位幸运奖由于第二阶段课程内容较多，每周随堂测验抽奖与每周读书笔记抽奖改为每两周抽取一次，从即日起抽奖时间为（0131/0221/0307）还有三次抽奖机会哦，大家一定不要忘记打卡哦~奖励华为云定制敏捷扑克牌 各阶段积分排行榜奖品三个阶段总积分排行榜奖品 活动注意事项1. 学习任务提交后，小助手会在本阶段学习周期内，按序完成审核，并增加活动积分；2. 本次活动通过完成提交学习笔记任务，可获得的积分上限为2积分/每章；3. 请务必按照上述要求提交内容，以免影响积分增加；4. 若积分值相同则以完成学习任务的时间先后排序，其中任务完成时间的判定优先级为：阶段考核>问答官>分享转发>每周学习笔记>每章随堂测验；5. 其他积分获取方式请查看活动社群公告。想了解更多关于全栈成长计划课程内容请移步主帖：https://bbs.huaweicloud.com/forum/thread-84766-1-1.html除了本帖任务，其他学习任务可以通过以下链接进行查看：查看每周读书笔记打卡帖：https://bbs.huaweicloud.com/forum/thread-99474-1-1.html查看问答官排位打卡帖：https://bbs.huaweicloud.com/forum/thread-99471-1-1.html

亲爱的开发者们大家心心念念的【移动应用开发全栈成长计划】已开课我们也特别为大家设置了【学习任务打卡】环节为的就是让大家巩固学习成果，紧跟学习进度请将需要完成的每周学习笔记按要求回复到本帖下方按要求格式回复即可获得积分累计阶段奖品，还能有机会获得附加幸运奖哦~征集时间2021.01.06-2021.03.21 23:59征集要求在本帖中，回复自己本周课程内容的学习笔记回复格式：华为云ID+第几周笔记+笔记内容，并分享些读书心得（字数≥200字）示例图如下：奖励方式每周每篇有效笔记可获得5积分阶段学习将以积分排行榜的形式，对前300名小伙伴进行奖励哦！此外还有附加奖励，每周在本周内提交学习笔记的用户中，抽取10位幸运奖由于第二阶段课程内容较多，每周随堂测验抽奖与每周读书笔记抽奖改为每两周抽取一次，从即日起抽奖时间为（0131/0221/0307）还有三次抽奖机会，读书笔记抽奖名额从原来的7位改成10位了哦~大家一定不要忘记打卡~奖励华为云定制文件收纳包 各阶段积分排行榜奖品三个阶段总积分排行榜奖品 活动注意事项1. 学习任务提交后，小助手会在本阶段学习周期内，按序完成审核，并增加活动积分；2. 本次活动通过完成提交学习笔记任务，可获得的积分上限为5积分/每周；3. 请务必按照上述要求提交内容，以免影响积分增加；4. 若积分值相同则以完成学习任务的时间先后排序，其中任务完成时间的判定优先级为：阶段考核>问答官>分享转发>每周学习笔记>每章随堂测验；5. 其他积分获取方式请查看活动社群公告。想了解更多关于全栈成长计划课程内容请移步主帖：https://bbs.huaweicloud.com/forum/thread-84766-1-1.html除了本帖任务，其他学习任务可以通过以下链接进行查看：查看随堂测验打卡帖：https://bbs.huaweicloud.com/forum/thread-99479-1-1.html查看问答官排位打卡帖：https://bbs.huaweicloud.com/forum/thread-99471-1-1.html

亲爱的开发者们大家心心念念的【移动应用开发全栈成长计划】已开课我们也特别为大家设置了【学习任务打卡】环节为的就是让大家巩固学习成果，紧跟学习进度现推出【问答官排位赛】，请各位同学详细查看本帖说明按要求格式回复即可获得积分累计阶段奖品，还能有机会获得附加幸运奖哦~ 活动时间：2021.01.06-2021.03.21 23:59  参与方式：用户在本帖里发布自己在学习移动端技术中产生的疑惑或实践问题，其他用户可通过在楼层下评论参与回答。 （回复格式参照本帖一楼）  参与规则：1. 同一ID不可自问自答；2. 同一ID可回复其他同一ID问题数量需≤3次，如，A最多可回答B的三个问题，但A可回答B、C、D、E、F等多人次问题。3. 每个人最多可发布10个有效问题，不可重复，不可灌水。4. 每个ID回答次数不设上限，但是否被采纳要依据专家评审后的结果。  活动奖励：由专家经过评审：（有效提问积分每周更新）◎每个有效提问可获得2积分。每周由专家评定，更新排行榜，上限为10个问题，不得灌水，不得与他人显示，问题具有意义，占楼无效。有效提问示例：无效提问示例：◎同一问题下确定一名最佳答案。提问者可获得5积分，被采纳的回答者可获得10积分。（最佳问答官阶段末评出，积分阶段末统计）活动结束后，会根据排位赛积分情况，评选出前5名优秀答题官，由专家根据问题质量评选出5名优秀提问官，获取活动奖品华为云定制双肩包。以下为中奖小伙伴华为云社区昵称，请看到自己昵称的小伙伴在3月31日前编辑“移动问答官+华为云账号+姓名+电话+地址”私信给7号版主（电脑版帖子左边版主头像下面发消息），过期不候哦~优秀提问官：@andyleung@蓝瘦的蜕变@加油O幸福@小艺同学@cobblestone优秀答题官：@运气男孩@花溪@考过IE励志当攻城狮@码农小杨@初学者7000各阶段积分排行榜奖品三个阶段总积分排行榜奖品 活动注意事项1. 学习任务提交后，小助手会在本阶段学习周期内，按序完成审核，并增加活动积分；2. 请务必按照上述要求提交内容，以免影响积分增加；3. 若积分值相同则以完成学习任务的时间先后排序，其中任务完成时间的判定优先级为：阶段考核>问答官>分享转发>每周学习笔记>每章随堂测验；4. 其他积分获取方式请查看活动社群公告。想了解更多关于全栈成长计划课程内容请移步主帖：https://bbs.huaweicloud.com/forum/thread-84766-1-1.html除了本帖任务，其他学习任务可以通过以下链接进行查看：查看随堂测验打卡帖：https://bbs.huaweicloud.com/forum/thread-99479-1-1.html查看每周读书笔记打卡帖：https://bbs.huaweicloud.com/forum/thread-99474-1-1.html

张老师告诉你怎么进华为拿高达本期活动正好赶上了2020感恩节，首先感谢张老师的倾情分享！我们可盐可甜的张老师为了应景，也特地带来了他心爱的高达，然后送给了群里的各位小伙伴两张高清**，再次感谢！为什么不送高达？“如果大家年底前入职华为，张老师就把这部高达送给他！”那一天张老师如是说。华为要求太高，进不了怎么办？“只要关注张老师，总有一天能进华为”那天张老师这样回答。年底前入职的小伙伴凭此帖找您要高达吗？“仅限参加云享MindTalks第五期的同学们~”那时张老师抱起高达，表情略微不自然。小编总结：想进华为拿高达，关注张老师学开发，仅限本期活动参与者。此期复盘到此为止，散了散了~好了，现在是返场时间，让我们简短地复盘、认真地划水。本期活动张老师主要介绍了vue.js.3.0的缘起，并带来了他心爱的高达。你以为那只是个高达？不，那还是个教具！尤雨溪尤大大创立这个开源项目最初起名《seed》很有可能就是源于这个名为“能天使”的高达的动画片，他在接受采访时身后vue.js的logo相框前就有着一个高达。或许这就是属于开发者的浪漫，这个高达已经不是简单的一个教具了。它是信仰！它还是群里小伙伴年底前入职华为的奖励！喜欢高达的小伙伴们一起去征服宇宙吧！字数凑够了，本期复盘真的结束了，下期活动见~或许你们会问，这么水的复盘你的领导真的会让你过吗？小编负责任地告诉大家，我也很担心呐也有小伙伴会问，二十分钟究竟能讲些什么内容？可能也就奖品有些吸引力罢了。小编同样很负责任地告诉大家，奖品真的很有吸引力！（划掉），能和业界有着那么多年经验的前辈像这样在一起交流的机会真的很少，不明白的事情要问了才知道呐~复盘结束，溜了溜了~例行问答环节（文末分享PPT自取）raotao：宇神！我现在可以用Vue写一些简单的页面和交互逻辑了，比如星巴克的官网，华为云课堂的页面，模仿头条的H5端页面。现在是进一步做项目，还是学习框架源码和加强JS呢？张老师：我建议先不着急看源码，可以在进一步做一些复杂度更高的项目，再操练一下.susan：张老师您好，请问华为云有类似 Firebase 的解决方案吗？  张老师：有类似的，华为云的appcube可以了解一下.raotao：请问宇神，原生DOM操作是不是也需要重点掌握，我发现用了框架后好像很少再用到原生DOM操作了。张老师： 需要，这个属于js基础，可以多看看我上次直播推荐的红宝书. 想要了解更多关于vue的小伙伴可以看看这个视频哦️《尤雨溪创立vue的心路历程》https://www.bilibili.com/video/BV1iE411H71U/?spm_id_from=333.788.videocard.18张老师新课链接来啦~https://classroom.devcloud.huaweicloud.com/joinclass/ebe16893863c449eadcd6573bb2d7030/1扫码加小助手进群，仅限200人开始时间11月26日 20:00活动介绍云享MindTalks是由华为云DevCloud团队携手云享专家共同策划进行的系列技术交流活动。各业界大咖纷纷现身群聊，以即时对话形式，来进行最直接的技术交流和思想碰撞。不同领域的专家，各样的业界话题尽在此处，为保证极简极高效，活动仅20分钟，限量200人，先进先得。这一期，我们可盐可甜的张老师又回来啦为我们分享vue.js3.0版本那些不为人知的秘密他还不是一个人来的，他带了谁？怎么还有会员卡？top100全球软件案例研究峰会、GIAC架构师大会覆盖6大核心研发角色一线技术带头人进行分享300+知名企业案例解读视频和PPT这样的会员卡，你不想拥有吗？ 专家介绍华为高校教育解决方案专家、华为云专家；拥有十多年一线互联网公司研发经验，曾任阿里技术专家、IBM架构师， 骨灰级码农，擅长全栈开发；曾担任H5金牌讲师，拥有多年教学经验，授课风格深入浅出，风趣幽默。活动规则1.扫码加小助手入群聊，仅限200人，先到先得。2.对未能及时回复的问题，由助手收集集中回答。3.更多资源和活动请进入云享MindTalks VIP群。4.抽奖奖品为限定HE2E知识卡牌、麦思博会员卡和《JavaScript高级程序设计》（第四版）。

不久前，尤雨溪发布了 Vue 3.0 Beta 版本。发布之后我们对社区里的前端开发者做了一次调查沟通，大家普遍认为 Vue 已经具备了商业项目开发的必备条件，如语法精炼、优雅而简洁、代码的可读性高、成熟的组件模块化能够让开发者从编码中获得乐趣等等，当然，还有商业项目开发最为看重的与第三方控件的结合能力。正是这些能力，确保了“后浪” Vue 能够与 React、Angular 等老牌前端开发框架并驾齐驱，在国内开发者当中占据越来越重要的位置，逐渐有发展成为国内三大前端框架之首的趋势。不过，在读者看来，Vue 作为近几年发展最快的JS框架， 其崛起主要原因不单单是因为粉丝的过度追捧，也并不是因为某个大公司的权威推动。和 React、Angular 相比，Vue 在可读性、可维护性和趣味性之间做到了很好的平衡，结合我们之前为大家推荐过的纯前端表格控件 SpreadJS，有用户表示仅通过一周的自学就搞出来了一个可供企业内部使用的表格协同文档系统。本文我们将通过分析  Vue 的特性，谈谈为什么商业项目开发我更推荐 Vue，而不是React 和 Angular。Vue、React、Angular 优势对比这个对比表应该可以代表大部分人对于三大前端框架的理解。React 的灵活性很高，这就决定了它的上限也很高。但 React 相对于 Vue，规矩更多，为了让项目代码等规矩更有条理性，需要更多的代码来实现，假如有一天我们不在依赖一大堆npm包和ES5编译器，要做出React应用简直是难如登天。而相比 React 所强调的所谓JS纯净性和代码可读性，Angular 的确算得上一款优秀的前端框架。Angular 可以帮助我们快速进入开发，在代码的头一千行，我们会感到很有趣，但在那之后，代码将开始变得糟糕起来。大部分时间，你都会迷失在各种指令和作用域里，代码管理难度将会劝退大部分新来的开发人员。因此，Angular 的主要问题就是太难了，入门难、做项目也难，哪怕是个资深的前端工程师也会头痛，但前期的投入换来的是后期的低维护压力。对此，网上专门有人总结了一个公式： React = Think in JS, everything is JS + Data (structure) Angular = Think in OO + Patterns (lots of) + 最佳实践Vue 很好的借鉴了二者的设计理念，并融会贯通。对于大部分开发者来说，它优雅而简洁，可以让我们把注意力集中在解决问题，而非代码逻辑上。Vue 的独特优势Vue 和其他前端框架相比，在结构、样式、业务分离等方面更清晰彻底，更符合前端多年来的编码习惯，更符合直觉、更容易学习和维护。入门非常容易，资料丰富，框架功能完善，加入非常多的特性，例如，if, for, async,为开发者节省很多垃圾代码。模板支持 html 和 jsx，支持自定义指令，方便操作 dom 的一致行为。一、门槛低、上手快Vue 上手简单的原因是无需复杂配置，只需要一个 HTML 与相关文件就能跑起来。从设计的角度上来看，Vue 考虑的也是如何降低门槛，让只掌握了 Web 基础知识 (HTML, CSS, JS) 的情况下，能够最快理解和上手，从而实现和完成一个应用。和 React、Angular 相比，Vue 的中文文档是写的最好的，再加上国内有非常丰富的视频、图文教程、各种开源的插件，哪怕是一个新手前端开发，学习一周左右就可以搞一个项目出来。就如我们开头所说，配合第三方前端表格控件 SpreadJS，自学一周就能做出一个企业级的表格协同文档。所以，它对于非专业前端，或者前端入门人士来说是非常适合的。其次，Vue 设定多，所以需要思考的就少。属性指令定义了一大堆，API 文档整理好的就在那里，需要什么一查，最佳实践的 demo 写好了放在那边，照着写就 OK 了。二、人性化，符合用户习惯React 的设计理念是提供强大而复杂的机制，让开发者来适应我；而 Vue 则是为了更适应开发者的使用习惯，在很多设定上都是让开发者怎么爽怎么来。比如 Vue 的 API 跟传统 Web 开发者熟悉的模板契合度非常高。Vue 的单文件组件是以模板+JavaScript+CSS 的组合模式呈现，它跟 Web 现有的 HTML、JavaScript、CSS 能够更好地配合；Vue 提供反应式的数据，当数据改动时，界面就会自动更新，而 React 里面则还需要调用方法 SetState。三、Vue + 第三方控件 = 效率高 & 使用便利 & 组件化架构前面我们提到了 Vue 的两个基础特性，但能成为时代的发展趋势，  说明 Vue 的能力远不止于此。从我们团队使用 Vue 的情况来看，Vue 使用起来异常简单，它从 React 那里借鉴了组件化、prop、单向数据流、性能、虚拟渲染，并意识到状态管理的重要性，并从 Angular 那里借鉴了模板，并赋予了更好的语法，以及双向数据绑定（在单个组件里），它不强制使用某种编译器，所以你完全可以在遗留代码里使用Vue，并对之前乱糟糟的jQuery代码进行改造。即便，仍然有很多人认为 Vue 只适合开发简单的网站或者单页面应用，但其实 Vue 有着比 React 和 Angular 更为丰富多元的第三方控件资源。配合这些资源使用，Vue 做企业级项目甚至比其他框架来的更加便利高效。这里我们还是用第三方控件 SpreadJS 举例，看看苏宁易购是如何在短短一周内，搭建并上线一个企业级的表格协同文档系统的。通过嵌入 SpreadJS 在线编辑器，开发的系统界面苏宁易购作为我国领先的 O2O 智慧零售商，在实现协同办公之前处理内部信息的办法是：在 Excel 上安装插件，通过插件与数据库通信，实现数据权限管控，这样做非常的低效且混乱。为了提升效率实现真正的协同办公，它们采购了 SpreadJS 纯前端表格控件，为其构建基于 Web 端 + Vue 集成的 Excel 数据管理系统 —— 「极客办公平台」。极客办公平台界面截图之所以选用 Vue 作为前端框架，是因为 Vue 本身通过提供现成的范式让整个项目的搭建过程更加快捷。题外话：其实在选择 Vue 之前，项目组已经尝试过 React 框架，但是一次又一次的整理prop和重构微组件的过程让其痛不欲生。而之所以选用 SpreadJS ，是因为它已经实现了微软 Office Excel 90%  以上的内置功能，开发人员无需安装任何软件，只需增加一些 UI 样式和下拉框，就可以迅速交付一套完整的基于 Web 的 Excel 功能模块。据苏宁易购系统架构师候健的分享所述，为保证新老系统顺利过渡，需要投入人力，完成大量的 Excel 数据迁移工作，因此，新老系统对 Excel 文件的兼容性至关重要。而借助 SpreadJS 纯前端无损导入导出 Excel 这一产品特性，极客办公平台才得以顺利完成交付并迅速投入使用。点击此处，了解 SpreadJS与Vue集成，苏宁集团“极客办公”系统的开发案例。为什么选择 Vue + SpreadJS？使用 Vue + SpreadJS 可以快速搭建一套在线协同表格文档，无论是对于文档的性能、项目研发效率，以及后期维护成本和新老系统数据迁移成本来说，它们都是一对“最佳拍档”。SpreadJS 提供了类 Excel 的操作界面和开放的 API，将其嵌入系统，可快速实现 Excel 导入导出、公式计算、在线填报数据、打印报送、实时预览、数据校验、服务端数据交互等功能，通过对其二次扩展，可以将 SpreadJS 作为在线文档协同编辑系统的核心模块，满足多人协作、实时编辑、数据同步、多级上报、历史查询等业务需求。经过实测，借助 Vue + SpreadJS，可以实现用不到 100 行代码，将 Excel 的功能和使用体验完美嵌入到在线文档系统中。如上面苏宁易购的例子，在 Vue 对应的页面组件 mount 中重新调用初始化方法，实现高度类似 Excel 的表单布局，仅需如下代码：Vue —— 契合当下的大势所趋我们已经在过去无数次尝试使用 Vue 为不同的项目开发了很多代码，结果也很令人满意（每个项目周期不超过 3 个月）。也许，3 个月对于后端开发来说算不上什么，但在JS世界里，它举足轻重。文无第一武无第二，无谓的争论谁比谁好并没有什么意义，本文也并不是希望将这三个框架分个高下，而是希望可以给大家提供更多参考信息，根据自身项目的实际需求来选择更适合的框架。从客观事实来说，最具创新力的是 React，而最具企业级能力的是 Angular，能够取长补短，各项数据介于两者之间的是 Vue。正是因为 Vue 具备门槛低、易上手、人性化、效率高等特点，外加有着最为丰富的中文资源和诸如 SpreadJS 等优秀的第三方控件加持，开发者们得以实现项目的“短平快”开发。在这个追求「快速」和「变化」的时代，这款前端框架的定位明显更契合时代的主流需求。即便 Vue 的作者尤雨溪曾多次表示，如果多年以后要论历史地位，React 肯定是高于 Vue 的。不过历史地位并不是开发者需要考虑的问题，我们可以为某一个编程语言、某一种框架的社区发展贡献力量，但在实际的项目中，不能盲目的被束缚住。文中资源扩展阅读：Vue  官方文档：https://cn.vuejs.org/v2/guide/SpreadJS 官网：https://www.grapecity.com.cn/developer/spreadjs苏宁集团开发案例：https://www.grapecity.com.cn/blogs/spreadjs-system-development-case-of-suning

先看效果：默认 按钮1 亮鼠标指针滑动到 按钮2 按钮2 字体颜色改变鼠标指针点击 按钮3， 按钮3亮起下面是实现过程：用的 float 布局，tabButtonActive 的 class 和 style 绑定，有需要的小伙伴可以参考<template><div class="tabBarArea">    <div class="tabButton" :class="[tabName=='按钮1'?'tabButtonActive':'']"         @click="tabName='按钮1'">按钮1</div>    <div class="tabButton" :class="[tabName=='按钮2'?'tabButtonActive':'']"         @click="tabName='按钮2'">按钮2</div>    <div class="tabButton" :class="[tabName=='按钮3'?'tabButtonActive':'']"         @click="tabName='按钮3'">按钮3</div>    <div class="tabButton" :class="[tabName=='按钮4'?'tabButtonActive':'']"         @click="tabName='按钮4'">按钮4</div></div></template><script>export default {  name: 'buttonTab',  data() {    return {      tabName: '按钮1',    };  },};</script><style scoped>  /*清除浮动*/  .tabBarArea:after{    display: block;    content: '';    clear: both;  }  .tabButton {    float: left;    margin-left: 30px;    border-radius: 10px;    cursor: pointer;    padding: 2px 10px;  }  .tabButton:hover {    color: #326BE8;  }  .tabButtonActive {    background-color: #326BE8;    color: #ffffff;    transition: all .5s;  }  .tabButtonActive:hover {    color: #ffffff;  }</style>

ERROR in ./node_modules/cluster/lib/master.jsModule not found: Error: Can't resolve 'dns' in 'D:\web\base-pc-front\node_modules\cluster\lib' @ ./node_modules/cluster/lib/master.js 440:6-20 @ ./node_modules/cluster/lib/cluster.js @ ./node_modules/cluster/index.js @ ./node_modules/log4js/lib/clustering.js @ ./node_modules/log4js/lib/log4js.js @ ./node_modules/esdk-obs-nodejs/lib/log.js @ ./node_modules/esdk-obs-nodejs/lib/obs.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/components/upload-content/index.vue?vue&type=script&lang=js& @ ./src/views/components/upload-content/index.vue?vue&type=script&lang=js& @ ./src/views/components/upload-content/index.vue @ ./src/views/components/index.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/modules/demo/index.vue?vue&type=script&lang=js& @ ./src/views/modules/demo/index.vue?vue&type=script&lang=js& @ ./src/views/modules/demo/index.vue @ ./src/config/component-importer.js @ ./src/config/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8001 (webpack)/hot/dev-server.js @babel/polyfill ./src/main.jsERROR in ./node_modules/assert/assert.jsModule not found: Error: Can't resolve 'util/' in 'D:\web\base-pc-front\node_modules\assert' @ ./node_modules/assert/assert.js 73:11-27 @ ./node_modules/browserify-zlib/lib/index.js @ ./node_modules/streamroller/lib/BaseRollingFileStream.js @ ./node_modules/streamroller/lib/RollingFileStream.js @ ./node_modules/streamroller/lib/index.js @ ./node_modules/log4js/lib/appenders/dateFile.js @ ./node_modules/log4js/lib/appenders/index.js @ ./node_modules/log4js/lib/log4js.js @ ./node_modules/esdk-obs-nodejs/lib/log.js @ ./node_modules/esdk-obs-nodejs/lib/obs.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/components/upload-content/index.vue?vue&type=script&lang=js& @ ./src/views/components/upload-content/index.vue?vue&type=script&lang=js& @ ./src/views/components/upload-content/index.vue @ ./src/views/components/index.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/modules/demo/index.vue?vue&type=script&lang=js& @ ./src/views/modules/demo/index.vue?vue&type=script&lang=js& @ ./src/views/modules/demo/index.vue @ ./src/config/component-importer.js @ ./src/config/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8001 (webpack)/hot/dev-server.js @babel/polyfill ./src/main.js

1.由于vue项目依赖 node.js npm 需要先安装. npm安装nodejs下载地址http://nodejs.cn/  选择与你电脑匹配的安装包进行安装下载完成之后双击打开安装包，进行默认安装，当点击下一步下一步到完成的时候即安装完成win+r   输入cmd回车，打开命令窗口  输入node -v  回车 检查node,js的版本  然后输入npm -v 回车检查npm版本或者可以通过淘宝镜像进行安装node$  npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org这样就可以使用cnpm 命令来安装模块了：2.安装vue-clinpm install -g @vue/cli安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。你还可以用这个命令来检查其版本是否正确：vue --version   vue -V选定路径，新建vue项目，这里我是在桌面上新建了demo文件夹，cd目录路径下面我以项目名为my-vue新建vue项目安装vue/cli-init依赖npm install -g @vue/cli-initvue init webpack  "my-vue"注意 如果这里不选择no 会选择严格格式 接下来编写项目的时候会出现很多警告错误现在已经创建好了 我们先进项目目录 cd my-vue  然后npm install 安装一下依赖你可以在你选择的文件加下看到这些文件 （其中node-modules是依赖安装后出现的，没安装依赖以前是没有node_modules文件夹的）这个Vue项目的package.json 这个文件里记录了一下 这个项目的基本信息 像是作者、工具等 npm run dev 执行命令运行http://localhost:8080 项目预览地址成功3.安装Element UInpm i element-ui -S这里就可以看到已经安装完成4.利用Element UI+vue创建一个简单的后台模板这里要用到路由跳转页面，先安装一下路由依赖体验一下 注意elementui和router 必须先引入后才能使用 不然会报错创建一个views文件夹 用来放置所用页面路由配置左侧导航配置index页面

一直卡着这个位置不动了

[内容拦截申诉] 博客拦截申诉发文的版块名：博客发文的标题及链接《web前端全栈成长计划》Vue第一章学习笔记（上）  https://bbs.huaweicloud.com/blogs/196720《web前端全栈成长计划》Vue第一章学习笔记（下）  https://bbs.huaweicloud.com/blogs/196719《web前端全栈成长计划》Vue第二章学习笔记（上）  https://bbs.huaweicloud.com/blogs/196721《web前端全栈成长计划》Vue第二章学习笔记（下）  https://bbs.huaweicloud.com/blogs/196722帖子内容：https://bbs.huaweicloud.com/forum/forum.php?mod=viewthread&tid=71831&authorid=70062&page=1附注：论坛都发出去了。博客被拒绝了。。。论坛地址：

HDZ研习社18期跟90后宝藏小姐姐学Vue3.0，养眼又欢颜点击下方链接，速速与颜值爆表小姐姐玩转Vue3.0直播报名链接：https://bbs.huaweicloud.com/signup/4b0de6fdeb874c2d8115da61ac4522da【活动一】扫描下方二维码填写问卷并邀请8名用户填写即可领取HDZ三合一数据线奖品数量有限，先到先得友情提示：问卷请使用浏览器打开哦！！！友情提示：问卷请使用浏览器打开哦！！！【活动二】直播开始前在本帖中针对“直播内容相关问题”或“想问女程序猿的相关问题”进行提问直播当天嘉宾会选出3名用户的问题进行回答被抽取到的用户可获得华为云保温杯1个【活动三】在直播期间没有被嘉宾答疑的同学可继续在本帖中发帖提问直播结束后嘉宾将选出5名优质互动的用户送出华为云定制鼠标垫【活动四】一节Vue3.0直播课不过瘾？？一个月的系统的Vue&node.js的课程学起来！集成华为研发精选的高质量前端课程WEB前端全栈计划第三阶段8月19日正式开课随时都可以报名哦路线更清晰，入门更容易扫描海报中二维码，立即学起来奥！直播当天在评论区针对直播内容进行提问嘉宾将选出3个问题进行答疑被嘉宾选中的用户分别获得机械键盘、无线鼠标、定制书包！ 扫码添加HDZ小助手微信了解更多详情 尹婷小姐姐直播分享的胶片来喽~~