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回传动作信息(…

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 ... 仔细琢磨这句话我好像明白了点什么,“组件模板必须包含一个根组件”。但是我并没有完全弄明白是怎么回事,…

NodeJS服务器无法使用外部IP访问的解决方案

最近在学习上碰到了一些坑,每天基本上是踩着坑前进的QAQ。比如说在学习Vue-cli脚手架搭建Vue.JS应用,就碰到了一个情况:执行npm run dev之后只能从本机访问Vue APP,外部IP访问永远都是无响应。 寻找解决方案 端口被禁用? 正常人的第一反应肯定是端口的问题,于是我登上服务器执行iptables -F,清空IPTables中所有的规则,但很遗憾,并没有奏效。 可能仅仅只需要一个反向代理 首先想到的可能是需要Web服务器来实现外部访问。既然想到了这里,我就接着想到了利用反向代理的方法,将访问80端口的数据包代理到Node服务器监听的8080端口,再从8080端口取回response到80端口,从而实现外部IP访问Node服务器。 于是,我选择了反向代理性能卓越的Nginx作为Web服务器,查阅大量资料后写好了配置文件,重启Nginx成功,从外部访问80端口,仍然是默认的HTML页面,这使我很困惑,于是尝试不同参数的修改,但全都不奏效。 无奈之下,我只能从Node服务器本身入手。 监听的IP是什么?! 继续分析还有什么因素导致无法通过外部IP访问Node服务器。我突然想起之前在学习服务器架设的时候遇到的坑,就是服务监听的IP不同可能导致访问效果的不同,比如说Httpd服务器监听127.0.0.1:80之后,只能通过127.0.0.1、localhost之类的来访问这台主机的Web服务,…