漫谈Vue组件库开发

2017年是Vue.js大爆发的一年,React迎来了一个强有力的竞争对手,王者地位受到挑战(撰写此文时github上Vue与React的star数量已逼近)。我们团队这一年有十多个大型项目采用了Vue技术栈,在开发效率、页面性能、可维护性等方面都有不错的收效。 我们希望把这些项目中可复用的功能组件提取出来,给后续项目使用,以减少重复开发,提高效率,同时也为了致敬前端界“出一个框架,造一遍轮子”的行规, 一个基于Vue 2的移动端UI组件库被提上日程。 组件库的开发过程总的来说还是比较顺利的,这里与大家分享一些问题与思考。 脚手架选择 尽管我们团队的这些Vue技术栈项目的脚手架大都使用的是webpack,在为组件库选择脚手架的时候我们还是在webpack与Rollup中犹豫了一下。 Rollup看起来更适合组件库的开发,它把所有模块构建在一个函数内,执行效率更高,它支持Tree Shaking,只打包需要的代码,输出文件更小(webpack后来也支持了)。但综合考虑之后,我们还是选择了webpack作为打包工具。首先,按照规划,demo演示和文档页面也在这个脚手架中,所以对代码分割、热加载等功能是有需求的,而这方面能力Rollup远不及webpack。另外,这个组件库由多人开发维护,基于现有webpack脚手架开发成本更低、效率更高。选择webpack,让我们可以更专注于造轮子。 打包 即便选择了webpack作为打包工具,我们也并不希望这个库的使用场景局限在webpack项目中,通过AMD/CMD方式、甚至通过script标签直接引用等场景都应该得到支持。为了达到这个目的,我们需要在webpack配置文件中设置输出格式,需要配置的选项是output.libraryTarget,有以下可选值: “var”(默认值)输出为一个变量

“this” 输出为this的一个属性

“window” 输出为window对象的一个属性

“global” 输出为global对象的一个属性

“commonjs” 输出为exports 的一个属性

“commonjs2” 以module.exports形式输出

“amd” 输出为AMD模块 “umd” 暴露给所有模块定义,允许它和CommonJS/AMD/全局变量一起工作 很显然,我们需要把output.libraryTarget的值设为“umd”,以使我们的库可以工作在各种场景下。 另一个与库打包有关的设置项是output.umdNamedDefine,在output.libraryTarget 设为umd,且output.library 也设置了的情况下,把此选项值设为true,将会为AMD模块命名。

Vue组件库只提供组件,Vue文件自身需要组件库使用者在项目中自行引入,库中无需打包。所以我们可以把Vue加到externals中。

这样Vue就不会被打包。不过,有个问题,就是用script标签的形式引用Vue的时候,挂在window上的变量名是“Vue”,而不是我们需要的”vue”,因此使用时会报vue未定义的错误。 还好,webpack的externals配置项支持传入一个对象,可以为不同导出形式指定不同名称。所以下面这种写法可以解决这个问题。 组件类型 规划中的Vue组件库包含组件(Component)、指令(Directive)和过滤器(Filter)三种类型的存在。 比较特殊的是模态弹窗类(Modal)组件,如Dialog、Toast等等。页面中可能存在很多个Modal,而很多场景下用户的行为只会触发其中一部分,如果把所有可能弹出的Modal(特别是异步的、结构内容复杂的Modal)全部写在页面上,是否妥当?对于多页面应用,每个页面都写一遍或者再封装一层组件是否繁琐而冗余?这个问题在知乎上引发过讨论,尤大(Vue.js作者尤雨溪)本人在参与讨论时给出建议,组件多层嵌套时,应该把Modal放在根组件里,然后在子组件里通过事件触发。在具体应用里,应该这么用,这符合Vue提倡的“状态驱动”。不过在组件库里,我们还是希望提供一种更便捷更通用的方式来使用Modal类型的组件。 参考了Element UI等优秀组件库的做法,我们把Modal类型的组件挂到了Vue.prototype上,使之成为Vue的实例方法,一次安装、全局调用。

因此,我们的组件库组件类型还包括“实例方法”。 组件CSS作用域 对于一个组件,我们希望它的CSS只作用于当前组件内的元素,所以我们给每个组件的Vue单页面文件的style标签加上了scoped属性。编译后,HTML标签会被自动添加一个随机生成的唯一属性 (比如 data-v-f3f3eg9) ,同时对应的CSS选择器也会增加同名的属性选择器(如.example[data-v-f3f3eg9]),这样组件内的 CSS […]

《京东E维》基于VUE+Webpack的单页面实践

本篇文章和大家聊一聊我们近期的项目——京东E维平台,这是一个专门为运维工程师设计的工单处理系统。它所要肩负的任务是,针对公司内部所有员工在办公时遇到的有关计算机、网络、软件方面等问题,通过E维平台发起问题上报请求。工程师通过该系统可以根据上报工单的紧急程度进行抢单、解决事件单、流转事件单、退回请求广场、挂起事件单等操作,这个系统一定程度上起到了提高办公效率的作用。 在与产品和研发沟通过后,我们发现,这个项目基本上所有交互部分都放在前端这里,研发只提供接口,可以做到前后端分离。因此经过小组讨论后,决定用 Vue 去实现。基于京东 E 维平台视觉稿的统一性,且页面较少,关联性较强,加上之前在会员PLUS项目中使用 Vue + Webpack 的经验教训,对该项目我们决定尝试着用vue的单页面开发模式进行开发。 初试Vue单文件组件开发页面,我们遇到了一些问题,也总结了一些经验,以下是我们的一些总结 (下图为界面总览): 请求广场页面: 我的事件页面: 事件单详情页: 本篇文章适合具有 Vue 和 webpack 基础的同学,里面的具体配置和vue用法并未写的过于详细。 Vue+Webpack 单页面的文档结构与构建方法 项目构建的目录结构如下: 先和大家介绍下我们的思路,进入项目的第一层,是src文件夹以及各种配置文件。 接下来src目录下的文件功能如下: ♦  component 用来存放功能组件 ♦  css 存放所有样式文件 ♦  image 用于存放图片 ♦  view 存放业务上的各个单文件 vue 页面组件 ♦  app.js 是入口文件 ♦  app.vue 渲染最高级路由匹配到的组件用的出口 vue 文件 ♦  index.html 页面模板 ♦  router.js 为配置各种跳转信息的路由文件 1、首先是 package.json […]

ELF – 灵活可扩展的 HTML5 构建工具

ELF,意为小精灵,来自 War3 中暗夜精灵族的农民。 通常当我们开始一个新的 HTML5 场景营销活动项目时,需要创建项目目录,初始化基本的项目文件,然后再添加构建(grunt/gulp/webpack)相关的文件(一次两次三次…,像小精灵采木一样~),目前有不少工具可以帮我们解决一部分这种重复性的工作,但不能完全的解决,于是,就有了小精灵 – ELF。 快速上手 1. 安装 通过 npm 全局安装(依赖的包比较多,推荐使用淘宝的 npm 镜像进行安装)

安装好后,可以运行 elf –help 查看支持的命令和帮助说明。 2. 初始化项目 假如我们现在要做一个向下整页滑屏的 HTML5 项目

这样一个向下整页滑屏的 HTML5 项目就已运行在开发模式上,样式预处理自动编译、样式热加载等功能早已具备,在此基础上,你就可以开始按照你的需求愉快的开发了。 3. 部署 当项目开发完成之后,需要将代码合并压缩用于部署,运行

会生成一个 dist 文件夹用于部署。 整个流程下来,基本解决了 HTML5 项目开发过程中项目初始化和构建部分的重复工作,已在团队内广泛使用,包括 Q4 京东品牌运营的10多个 H5 项目,如 皇家视频 京东精选 功能介绍 ELF 主要包括三部分功能:项目构建、示例模板和通用组件。 项目构建 现在在做 web 开发时,基本都会引入构建工具,常用的有 grunt、gulp 以及目前最流行的 […]

© 2018 JDC. All Rights Reserved.