当前的文章分类为: 前端开发

Vue CLI 3.0 文档(1):安装和项目创建

12

December

2018

之前主要使用Vue CLI 2.x来搭建项目,正好遇到新的项目,便尝使用Vue CLI 3来进行构建,玩了小半年之后抽空整理下文档。

简介

Vue CLI 作为 Vue 的官方脚手架,降低了开发者对于 webpack 的配置成本,便于快速构建项目。具体的介绍在官方文档中写的十分详细,此处就不唠叨。

用一个通俗的比喻来说,把项目作为一份晚餐:食材(vue)虽都有,可但油盐酱醋(webpack)怎么配比,并非一下就能掌握。而 Vue CLI 就像是成品大礼包,198、298、398自由搭配,营养均衡开袋即食。并且附带料包自由调整(配置),也能加热享用(可升级)。并且 Vue 是渐进式框架,需求(基础插件)无法满足时,可单独外卖(Plug-in)加餐。
[ 查看全文... ]

CSS BEM 解读

09

November

2018

CSS BEM 解读

概要

BEM 分别代表着:Block(块)、Element(元素)、Modifier(修饰符),是一种组件化的 CSS 命名方法和规范,由俄罗斯 Yandex 团队所提出。其目的是将用户界面划分成独立的(模)块,使开发更为简单和快速,利于团队协作开发。

特点

  • 组件化/模块化的开发思路。
  • 书写方式解耦化,不会造成命名空间的污染,如:.xxx ul li 写法带来的潜在嵌套风险。
  • 命名方式化扁平,避免样式层级过多而导致的解析效率降低,渲染开销变大。
  • 组件结构独立化,减少样式冲突,可以将已开完成的组件快速应用到新项目中。
  • 有着较好的维护性、易读性、灵活性。 [ 查看全文... ]

微信小程序:在线电影票网站(入门示例)

15

December

2016

微信小程序,可以说是近半年来开发和运营者们讨论最多的话题之一。

自己也尝试入坑玩了一把,感觉还挺有意思,非常适合生活服务和阅读类项目。

对于微信小程序的一些理解 :

小程序正如其名,小/轻,是一套独立封闭程序。

和以往开的发有2个最大不同:无法使用DOM,不基于window、document。所以<div>等HTML标签,都需通过<view><text>等组件来实现,常用的jQuery、Zepto等JS框架也都无法使用。
[ 查看全文... ]

Step by Step 一步步了解SVG

15

July

2016

最近看到篇文章很有同感,很多时候想学习一些东西,会被一堆堆的代码所困扰,很难去读懂和理解。而用一个个小Demo的形式了解起来就更为直观,产生兴趣之后学起东西就自然相对轻松。

Demo1:创建基本形状

SVG 预定义了7个基本元素:circle 创建圆形rect 创建矩形ellipse 创建椭圆line 创建线条polyline 创建折线polygon 创建多边形path 创建路径
其中 path 可进行填充、勾划(沿着路径绘制直线),也可用作剪切路径(其他形状的图样),是所有绘图元素中最复杂的。
[ 查看全文... ]

ublue-ContactsList.js(模拟IOS通讯录列表)

12

January

2016

先祝大家新年快乐!作为2016年的开篇,再祝各位单身狗早日托单,已托单的早日生猴子!

前年接触到个移动端项目,需要把相关门店信息以类似IOS(iPhone)联系人列表的形式呈现。左侧是城市列表,右侧是滑动首字母快速查找。
先是去网上搜了下,发现相关资料少之又少,无法满足项目需求。以我性格,改一个差距甚远的代码,不如在条件范围内动手写一个,也利于后期调试、扩展。

可在项目结束之后,感觉这形式的交互效果今后试用范围和需求会不少,便拎出来改为一个独立的插件。 [ 查看全文... ]

Gulp构建前端自动化工作流之:常用插件介绍及使用

26

August

2015

在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境。

本文主要分为6个段落:

  • 1. 构建项目目录结构(Directory Structure Build)
  • 2. 插件介绍及使用方法(Tasks and dependencies)
  • 3. 扩展优化(Extend & Optimize Task)
  • 4. 其他插件介绍(Other plug-ins)
  • 5. 匹配规则(Match Files)
  • 6. 注意事项(Attention)

关于Gulp的入门介绍及安装方法,可先去《Gulp构建前端自动化工作流之:入门介绍及LiveReload的使用》 这篇文章查看。对其有个初步认识后,便于后文的理解。 [ 查看全文... ]