VueJS组件库爬坑记 (4) - 基于官方文档制作模态框

开篇序在家园工作室已经有半年之久了,在这期间,我学会了很多实用的技能。曾经认为很难驾驭的Vue.js,到现在已经能够很熟练地用它开发大大小小的项目。不久之前,我加入了云家园项目组,开始正式参与云家园项目的研发与维护。在此期间,我浏览了一遍云家园的前端代码,发现整体的架构还是相当复杂、庞大,并且过于繁冗。我参考了云家园项目中Bootstrap的引入方式与使用方式,发现项目中基本没有出现可复用组件(当然,也有一部分的组件是几位先辈封装的),但是Vue组件化的概念并未贯彻整个项目的代码中。于是我萌生出想要开发一个属于家园工作室自己的可复用的UI组件库的想法。这个想法提出来,有两位学长表示他们早就想做这个,然后用这个UI组件库去重构云家园的前端代码。所以我们三人在3天前的3月21日开启了制作一套基于Vue.js 2.0的UI组件库之旅。从这片文章开始,我将会记录我们在开发这套UI组件库中遇到的种种困难与解决这些问题的方案。实践性的内容将占到绝大部分,也有少部分偏理论的内容。我们可以将这个系列的博客理解为从零开始开发Vue.js组件库到其初具雏形再到其羽翼丰满的全过程的记录,一颗牙当作经验的积累。简介这片文章主要记录了基于Vue.js官方文档中关于模式组件而开发的一个模态框组件的过程。开发过程代码分析根据官方文档,一个受推荐的模式组件的代码应当形如下面:进一步观察发现,官方提供Demo在技术上具有如下特性:采用v-if控制模态框的显示与隐藏,而不是国内某些UI组件库普遍采用的v-model采用<transition>控制模态框的过渡动效采用Div编写模式组件,而不是常用的iframe组件内采用$emit回传动作信息(…

寒假比赛总结(八) - 比赛总结

前言到今天(2018-03-01)20点,为期一个多月的寒假比赛就结束了。按照惯例,每次比赛结束都写一些总结,把比赛过程中学到了什么、有哪些地方做得好的、哪些地方没做好的都记录一下。也可以当作反思。在比赛中吸取经验,这样会成长得更快。学到了什么规范的操作无论做什么事情,规范是必需遵守的。在比赛时,为了更好地与后端进行合作,我从前端页面的角度制定了一篇文档,在上面详细描述了每个页面所需接口的字段名、方法等等。(这篇文档目前还在:http://docs.lenconda.top/petlog/)在实际的操作中,我前端这边是严格按照文档规定的格式编写调用后端接口的逻辑。然而,后端似乎并没有认真按照这篇文档的规范进行编写:很多接口都是规定GET方法,后端却只允许POST方法;有很多接口的字段存在拼写错误(avatar拼成avater、字段名中少了s或多了s、follow漏了ed(原本是followed)等等),给前后端对接交互造成很大的麻烦,也浪费了很多时间(我们从2月26日开始对接,到2月28日修改完Bug进入预备阶段,前后花了两天的时间),而且后端接口初次测试十有八九都是500,这些500中肯定有很多是没有遵守规范造成的。这件事给我很深的感触,我认为前后端分离的开发模式下,规范一定是要严格遵守的东西。但是就我这次和两位后端的合作过程来看,家园的研发培训时并没有强调规范的重要性,或者说家园研发的新生并没有很强的规范意识,…

寒假比赛总结(四) - 重新认识'router-link'

前言接触Vue.js的时间有半年了,正式将Vue.js用于项目开发也有将近三个月了。Vue中有个<router-link>的东西比较有意思,这个组件里有很多很有意思的小细节当时没注意到,不过比赛项目正好又要用上这个东西。一个看似不起眼的需求我们的比赛项目采用的布局是目前流行的APP布局,即:顶部一个Panel,中间是内容,底部是一个两个或两个Logo以上的Tabbar,用于不同功能之间的切换。而问题出在这个被激活的Tabbar元素上:这个匹配到当前路由的Tab需要被点亮,就像下图:因为我这边Tabbar采用的是Flexbox布局,然后每个元素用一层<router-link>包起来,然后分别跳转到各自匹配的路由上去。但是如何将匹配到的Tab点亮呢??绞尽脑汁想了很久,还是没有一个比较完美的解决方案,期间想过Vuex,想过在data中绑定,但是每个想法都十分麻烦。发现ActiveClass突然想起一个月前在观看慕课网上一个Vue.js高仿饿了么的视频,里面貌似用过这个东西,好像是顶部的Tabbar,也是匹配了不同的路由,当点击其中一个时,文字变红,底部多了一个红色的下划线,切换另一个时,另一个变成上述状态,先前那个恢复原状。于是赶紧翻开视频,发现讲师演示代码的时候没有过任何与之相关的代码编写,当其在Chrome中展示的时候,发现被激活的Tab的<a&…

HackWeek踩坑记(2) - 在Webpack中引入jQuery

第二个坑:在Webpack中引入jQuery jQuery从诞生起,就以其简洁、高效迅速得到开发者的认可,如今绝大多数网站都采用jQuery库。而在我们组的项目中,我也想使用jQuery编写Ajax、元素选取之类的代码,但是我发现直接在HTML入口文件src/index.html中加入一个引入jQuery的script标签似乎并不会其任何作用,相反,引入JS文件之后反而给整个项目带来一大堆的报错。我也尝试过很多种方法将jQuery代码放在不同的位置,但是都不奏效。所以迫于时间压力,我不得不放弃在项目中引入jQuery的想法,这也成了这个项目中最大的遗憾。 尝试引入 今天HackWeek刚结束,我就迫不及待开始在Google上查阅相关资料。在查阅资料的过程中,我偶然发现其实jQuery也可以向其他的库一样通过模块的方式引入,于是我尝试在项目根目录下执行npm install jquery,执行成功,随后我再去JS入口文件src/main.js中写入 import $ from 'jquery' 在页面写好一段jQuery代码,发现console还是报错: 回头一看main.js发现import jQuery的那一行代码还是灰色的,应该是还有哪个地方没有配置好导致$没被使用,造成在代码中使用$之后报错。 解决问题 最后我在百度中寻找到了一种比较可行的办法,大概的意思就是将jQuery库当做一个插件写入Webpack的基本配置文件中,大概的解决办法是: 先在src/main.js中写入:…

VueJS爬坑记(3) - 打包后无法渲染页面

起因 使用Webpack学习VueJS一段时间之后,准备使用Webpack的build编译生成上线代码。 然而,在将npm run build之后生成的dist/目录部署上线时,却是一片空白 问题分析 打开Chrome开发者工具的Network板块时,发现大量的文件无法加载: 对首页路由进行元素分析,结果如下: 我的猜测如下: 经过Webpack打包的项目,默认的路由根目录都是#/开始的,而该页面所有的scripts引用的都是/static下,而非#/static下的,而这就是为什么整个项目的脚本源码文件都无法加载的原因。 填坑 经过上网查阅资料,我找到了Vue-cli项目中的打包配置文件的所在:/config/index.js,其中的build字段如下: 既然是针对build的配置,而且编译后所有的scripts都是放在#/static/下的,于是想到使用相对路径的根目录./代替绝对路径的根目录/,再次执行npm run build,问题解决。…

VueJS爬坑记(2) - 依赖问题和Webpack打包

起因 从入坑Webpack已经有一个礼拜了,在这期间我注意到,通过Vue脚手架搭建的Web应用程序通常需要非常多的依赖,但是如果遇上多人协作共同开发这个APP的话,如果依赖问题处理不了,应该是一件十分尴尬的事。还有一点就是Vue的应用程序不可能在生产环境下也用NodeJS跑,这是在开发过程中维拉方便调试和新增或删除模块而使用npm的run功能来快速搭建一个支持热更新的Web应用程序。 填坑! 解决代码迁移带来的依赖问题 就像上文中说到的,我们构建一个应用程序时遇到多人协作,将Node模块一块儿共享出去是完全不符合常理的,而且这期间我在GitHub上寻找了一些使用Vue-cli或者是其他NodeJS项目构建的WebApp,发现代码结构中并没有存放NodeJS模块的.node_modules目录,通过.gitignore将这个目录排除在外,说明依赖信息应该装载在某个文件中(目前还在研究),而他人只需要把其他主要的代码克隆下来,在根据这个依赖信息寻找必要的NodeJS包。 那么问题来了:手动安装全部的依赖并不合理,一定还有某种自动化的方式将依赖部署到位。 经过GitHub上类似项目的README和百度、Google的查找,同时经过自己的验证,最终发现了两种方法可以达到目的: 通过npm install 这是最简单的方法,一键搞定所有依赖关系,只需在项目根目录下运行下面的命令: npm install 再执行: npm run dev 即可完成所有的依赖工作,并在本地NodeJS服务器中以开发模式运行。 通过yarn install yarn是又一个强大的工具,和npm使用相似: 首先要通过npm安装yarn: npm…

VueJS爬坑记(1) - 关于在单文件中的根节点

前言 最近在通过Vue-cli配合Webpack构建VueJS应用学习VueJS,但是由于对NodeJS用法和Webpack语法不熟悉,导致错误的排查很困难。所以,我准备在博客里开一个专栏记录VueJS爬坑过程。顺便结合VueJS学习ES6的语法。 起因 最近开始接触VueJS的脚手架工具vue-cli,并逐步了解VueJS的单文件组件的写法。在最近的某一天,我使用单文件创建了一个导航栏的组件Navbar.vue,并希望将其引入视图入口文件/src/App.vue中,结果页面突然抛出一段报错信息,截图如下(情景再现): 寻找解决方案 首先,得到这个信息,就基本上可以确定是/src/App.vue出现了问题,而且一定是引入了组件之后产生的; 这种NodeJS的报错对于我来说还是十分陌生的,,这一报错也让我措手不及,最开始我还以为是我引入组件的语法或者路径出现了错误,但是仔细检查之后发现并没有此类问题; 于是我又返回报错页面查看报错信息,终于从结尾处找到了一条貌似有用的信息 Component template should contain exactly one root element. If you are using v-if ... 仔细琢磨这句话我好像明白了点什么,“组件模板必须包含一个根组件”。但是我并没有完全弄明白是怎么回事,…