vue 单文件探索

以 vue 作为开发技术栈的前端开发者,往往会配合前端构建工具,进行项目的工程化管理。比如,大家常用的 vue 全家桶 + webpack 的方案进行一些中大型前端项目的开发。配合 webpack 后,vue 的组件化优势更加明显,我们可以通过单文件的组件化开发方式,在工作实践中搭建前端页面,从而提高开发效率。

Web Icon 实现方案总结

Icon,在界面设计中,具有指代意义的图形符号。在前端开发中,图标往往由 UI 设计给出,然后经前端开发人员在 html 中使用。Icon 的设计和使用在近几年的发展中,也经历了由当初的 img 方案 到现如今的 svg 方案。下文将从 Icon 的发展历程以及到现如今的 svg sprite 技术给出具体的介绍。

React Native 初尝试之 CNode 社区客户端开发

最近踏上了学习使用 React Native 进行客户端开发的征途,因为之前的技术栈一直是 Vue, 在大致看了一下React Native 的相关介绍后,感觉有必要首先学习一下ReactJS。再看过相关文档后,以 CNode 社区的 API 上手体验了一下 React 的组件化开发方式,见 cnode-react-App。之后在边看文档边 Google 的过程中,完成了人生中第一次客户端开发。下文中将给出以 CNode 社区为原型进行React Native 开发过程中遇到的问题以及相关思考。

vue单文件中引用路径的处理

vue单文件的开发过程中,在单文件模版中可能会涉及到文件路径的处理,比如 <img>, style 中的 background 的处理等。下文中讨论了几种不同场景下的 <img> 的 src 处理,解释了在使用 vue+webpack 的开发过程中如何正确的引用静态资源(比如图片的处理)。

DOM中涉及到元素大小的几种计算方式

offsetTop,offsetLeft,clientHeight,clientWidth,scrollHeight…等等属性如果没有特殊的体会,往往看一遍忘一遍。下文中系统的总结了以上几种计算页面元素大小的属性的性质和区别。

关于Cookie的总结

HTTP cookie(web cookie, browser cookie)是服务器发送给客户端浏览器的数据片段。客户端浏览器将保存这段数据并在下次访问同一个服务器地址时带上这段数据。通常,它被用来识别两次请求是否来自同一个浏览器,保持用户的登录状态。比如,它为无状态的HTTP协议记录了状态信息。

webpack源码阅读——npm脚本运行webpack与命令行输入webpack的区别

webpack是目前被大家广为使用的模块打包器。从命令行输入webpack或者在package.json的npm scripts中配置webpack脚本都可以使用webpack。虽然效果是一样的,但是两者有区别吗?最近在阅读源码的过程中发现了这个事情,原来两者是有区别的。

webpack学习系列

阅读源码的正确姿势在大致了解该工具库如何使用之后,抱着知其所以然的目的去了解其实现。在几个vue单页应用的工程中应用了webpack作为模块的编译和打包工具。通过vue-cli的webpack模板可以一键傻瓜式的快速搭建单页应用的开发原型。在vue-cli内部的webpack模板帮我们提前写好了webpack的一些配置,让开发人员将精力集中在内容的开发上,而非打包工具的配置上。这一点对于刚接触webpack的开发人员来说,无疑节省了大量的精力。熟悉webpack的常用配置以及其内部运行机制,有助于我们对整个前端项目有更好的把控。

webpack构建流程探底

本文旨在搞清楚从命令行下敲下 webpack 命令,或者配置 npm script 后执行 package.json 中的命令,到工程目录下出现打包的后的 bundle 文件的过程中,webpack都替我们做了哪些工作。

vue-cli中的webpack模板配置学习

vue-cli是vue官方出品的一个脚手架工具,通过vue-cli可以快速的搭建一个vue的SPA应用的开发框架。其内部提供了多种vue-js-template,作用就是通过相应的template去配置生成项目初期的内容。其中webpack模板提供了全面丰富的webpack配置,包括热重载、单元测试、静态检查以及css提取等功能。