LOFTER for ipad —— 让兴趣,更有趣

点击下载 关闭

LOFTER-网易轻博

前端

3063浏览    1005参与
javajiagoushiziyuanfenxiang
一叶

视觉设计师的五项技能修炼方法

一、草绘

无论前端技术发展成什么样,在自然交互界面没有大行其道,只要图形界面依然是交互设计的主流,网页设计的基础还是版式设计。换句话说,很多人的设计感不好来源于对于版式设计的基础并不了解。

在传统的印刷物或图形设计领域,一件作品的创造过程通常经历4个基础步骤:

  • Sketch草绘:也叫做Thumbnail Sketch,通过大量的设计草绘逐渐形成设计概念(如下图);

  • Layout初版:初版主要构建基础的元素以及体现元素间的主次关系;

  • Comp精版:在精版中一部分展示更多的细节;

  • Finish完成:完成最终设计。


源于传统平面设计领域的页面设计同样也应该遵循草绘、...

一、草绘

无论前端技术发展成什么样,在自然交互界面没有大行其道,只要图形界面依然是交互设计的主流,网页设计的基础还是版式设计。换句话说,很多人的设计感不好来源于对于版式设计的基础并不了解。

在传统的印刷物或图形设计领域,一件作品的创造过程通常经历4个基础步骤:

  • Sketch草绘:也叫做Thumbnail Sketch,通过大量的设计草绘逐渐形成设计概念(如下图);

  • Layout初版:初版主要构建基础的元素以及体现元素间的主次关系;

  • Comp精版:在精版中一部分展示更多的细节;

  • Finish完成:完成最终设计。

源于传统平面设计领域的页面设计同样也应该遵循草绘、初版、精版、完成的过程。可惜的是很多页面设计师因为种种原因,并没有养成从草图开始逐步细化的职业设计习惯。事实上,我只是从2012年时开始练习草绘的,在此之前我也有上手就是PS或者代码的习惯,下面这张图是我自己练习的第一张草绘图:

经过三个月的练习,逐渐可以达到草绘场景图、信息图、Sketchnote等水平,当场景图都能熟练表达的时候,绘制一个页面就变得非常简单了,如下面的图:

值得提的是我并没有接受过专业的美术训练,只是很小的时候喜欢画画而已,在短时间内,只要不断进行练习,相信在最多不到6个月的时间内,就能完全掌握草绘的技能,关于草绘,可以参考Alistpast的文章《Sketching:the Visual Thinking Power Tool》。

二、使用网格

草绘是最基础的页面设计技能,而对网格(或栅格系统)的使用更是被很多设计师忽视。同样作为平面设计重要的工具之一,早在1629年,法王路易十四命令成立一个管理印刷的皇家特别委员会,由数学家尼古拉斯·加宗(Nicolas Jaugeon)担任领导。委员会提出了新字体设计建议:以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基本方格单位,每个方格单位再分成36小格,这样,一个印刷版面就由2304个小格组成。这是世上最早对字体和版面进行科学实验的活动。也是栅格系统的雏形(下图)。

巧合的是,我一直推崇的水平网格单元正是8px,最初的想法是中文基础字符高度为12px,通常1.5倍行高正好是16px也就是两个网格高度,在这里并没有什么科学依据,也许8这个数字比较吉利吧。

网格使用主要是两个方向,一个是水平网格,用于控制纵向节奏(Vertical Rhythm)如下图的比较:

另一个是大家更熟悉的纵向网格,也叫做Grid System(如下图),因为960.gs等前端框架的流行,Grid System目前较为普遍,大部分设计师都懂得使用纵向的栅格规划页面结构。

而真正规范的页面设计同样要考虑纵向页面栅格和纵向节奏,无论你使用Photoshop还是Sketch都可以较为方便地生成横向和纵向两个方向的辅助线,以Photoshop CC 2014为例,使用插件GuideGuide可以快速生成自定义的页面网格系统,如下图:

神器地址:《PS 参考线插件GUIDEGUIDE下载及使用说明》

当我们看细节,每个页面元素的左边缘都和纵向辅助线对齐,同时观察元素高度、字体的行高、元素间的空隙、段落间距,都由横向网格进行规范,保证高度都是8的整数倍,以及纵向居中,以及如下图:

值得提醒的一点是,使用这样大规模的网格系统,一个页面做下来眼睛不残废也要半瞎,我特别贴心(这么贴心是不是让你特别想与我工作呢?)地告诉大家在全局设置里可以更改网格的颜色,默认的Cyan蓝基本坑人,再将画板背景颜色改成浅灰色:

最后的操作界面看起来就舒服多了,多么的贴心。

当然,最重要的快捷键是cmd+H,它帮助你快速切换是否显示网格。

使用网格是一种习惯,它的基本逻辑是:美也许还需要一些天赋和感觉,但是对齐这件事,是可以通过后天努力和细心以及一些工具完成的。

三、使用留白

罗伯特卡帕说:If your photographs aren’t good enough, you’re not close enough(照得不够好,靠得不够近),在页面设计的领域,这句话应该改为“设计得不够好,隔的不够开”—— 实际上,设计成功的决定因素往往在空白处。留白本身的含义其实并不是页面上空白的区域,而在于如何用更少的视觉元素表现足够的含义,比较下面两个表格:

这就是空白的力量,它既减少了视觉元素的使用,同时提高了信息的可读性,当我们回头看看Google最新一次设计改版的变化,最显著的便是空白的使用:

空白还可以赋予页面元素更多的含义,让你用简单的文字表现出从属关系,例如下面这个例子:

第一个例子中留白放在正文上部,标题和URL成为一体,URL成为标题的附属元素;第二个例子中不留白,三者成为了一体,看起来就像Google搜索结果;第三个例子留白放在了URL上面,URL变成了正文的一部分。

再从美学的角度,传统平面设计(下图)的经典设计原则亦是如此——视觉元素的功能是“辅助”内容本身,切勿喧宾夺主。回过头来看拟物化和扁平化风格的争执,我对此的观点是,至少在Web端,一定会向平面设计(Print)风格倾向,意味着阅读性内容的设计中一定会减少阴影、渐变、图标、浮动的使用,而更重视字体的使用、更丰富的排版方式、高质量图片、以及大量的留白。

总而言之,学会使用留白,不但是提升信息传达效率、还是符合美学趋势的重要技能。

四、使用字体

字体才是内容与用户的交互界面,学会处理字体也是网页设计的基础技能之一。在使用字体的时候,有如下几点需要加强练习:

  1. 字体的选择

  2. 字体重量的组合

  3. 字符间距

  4. 行高

当然这里讨论的是丰富程度远超中文网页字体(Web Font)的西文字体,在字体的选择时,有以下两个原则:

  1. 多种字体重量(Weight)的优先;

  2. 有Condensed的字体优先;

基于这个选择原则,四套最受欢迎的英文网页字体分别是Helvetica Neue。Roboto。Avenir以及Open Sans。

字体重量和样式丰富的字体集在页面设计时有更大的选择空间和丰富的组合方式。不同重量和风格的字体通常有不同的含义,例如以最简单的斜体(Italic)为例,它的使用含义可表达在正文中的“强调”,例如强调某个词、某个专门定义、特定名称;也可以表达引言;而粗体大写通常是表达强烈的标题性文字。

不同字体的组合可以体现更加舒适的阅读体验,在下面的例子里,我只使用了一种字重的:

当我们学会不同字重的组合时,阅读体验将会变得更加好,用户从字重中就可以识别文字的含义。

这里有一个小技巧,大标题通常使用超粗字重,超粗字重适当缩小字母间距效果会更加紧凑,在CSS中定义letter-spacing一定量的负值,例如下面的对比:

五、使用颜色

颜色通常是一个初级设计师比较头疼的事情,我们对于色彩的敏感往往不能够很好地对色彩进行搭配,但通过一定的练习也可以达到好的效果,这里我的练习方法是填色练习。

首先,下载一个UI模板的PSD文件,下面是一个完全没有颜色的PSD:

找一张你喜欢的图片用蒙板的方式放在框体上面,变成下面的样子:

从图片上吸附两种主色,一冷一热,进行填充,就变成了下面的样子:

反复重复锻炼,可以形成下面多个色彩搭配的,用这样的方式可以帮助你培养你对色彩的配搭感觉。

只要我们不那么贪心(使用多于两种的颜色),从艺术作品中借鉴某些颜色的配搭,选取冷热两种主色,再加上不同灰度的黑色作为辅色,或者冷热主色的不同透明度的色阶,一个简单的网页界面色彩的管理是足够胜任的,如下面这个界面的设计:

写在最后

我并不像很多设计师是从工业设计开始设计生涯的,也并没有接触过专业的美术基础教育,在我的工作里也并不需要我进行细节的视觉设计,但是我相信,基础视觉设计技能是谈论设计的基础。同时我也看到,很多视觉设计师并没有养成“干净”的设计习惯,对于留白、字体、栅格的使用都非常随意,我相信本篇的内容对他们也会有些帮助。

因此,一个非专业视觉设计师视觉方面的修炼,就是以下五步:

  1. 练习草绘;

  2. 严格使用网格(对TM齐);

  3. 练习留白;

  4. 练习字体组合表达内容;

  5. 练习色彩搭配。

【优设指南类文章合集】

  1. 平面设计:《超赞!设计师完全自学指南》

  2. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》

  3. 抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》

  4. 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》

  5. DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》

  6. UI设计篇:《超实用新手指南!零基础如何自学UI设计?》


一叶

栅格设计

一、什么是栅格系统

栅格系统英文为 Grid Systems,也有翻译为网格系统。

定义:运用固定的格子,遵循一定的规则,进行页面的布局设计,使布局规范简洁有规则。

栅格:

栅格最早起源于平面设计。1692年法国为提高印刷水平,以方格为设计基础,将一个印刷版面分成上千个小格,这就是最早的栅格雏形。再后来,慢慢演变成运用固定的格子设计版面的平面设计风格。(参考图1)

网页栅格:

包括网页端和移动端,是以规则的网格阵列来指导规范界面中的版面布局以及信息分布。

1. 为什么要使用栅格?

通过栅格的使用,可以用逻辑解释商业设计的细节问题。

设计内容都应该有所依据,当其他人质疑时...

一、什么是栅格系统

栅格系统英文为 Grid Systems,也有翻译为网格系统。

定义:运用固定的格子,遵循一定的规则,进行页面的布局设计,使布局规范简洁有规则。

栅格:

栅格最早起源于平面设计。1692年法国为提高印刷水平,以方格为设计基础,将一个印刷版面分成上千个小格,这就是最早的栅格雏形。再后来,慢慢演变成运用固定的格子设计版面的平面设计风格。(参考图1)

网页栅格:

包括网页端和移动端,是以规则的网格阵列来指导规范界面中的版面布局以及信息分布。

1. 为什么要使用栅格?

通过栅格的使用,可以用逻辑解释商业设计的细节问题。

设计内容都应该有所依据,当其他人质疑时,可以系统有底气的解释设计内容。设计师可以利用栅格让画面更有调性,让内容更具可读性;可以快速校准元素的位置,让画面更平衡;可以模块化地管理元素,让版面更有层次感。

2. 栅格基础七要素

(1)最小单位:

需要先定好界面的单位基础,后续内容元素和布局规则都是基于它整数倍递增。

网页端 最小单位:10(参考图2)

移动端 最小单位:3、4、5。

(2)总宽度/ W:

总宽度:对整体布局进行规范,且还可以保证设计尺寸的统一性。

界面设计要有具体尺寸,由于内容多少不确定,所以高度没有办法定死,但内容区的宽度是可以定的。(参考图3)

(3)列数/ N:

列数是界面总宽度设定好后,纵向等分成几列。

网页端:12列、24列(常用等分列数,当然不是固定的,需要根据自己的内容设定列数,参考图4)。

移动端:6列(常用等分列数)。

(4)大列宽/ L:

把界面总宽度等分成几列,每一列的宽度即为大列宽。

计算公式:L = W / N(参考图5).

大列宽包含:列宽和水槽。

(5)水槽/ G:

相邻两个列宽之间的间隔是水槽。

水槽宽度越大,页面留白和呼吸感会更好,反之则更紧凑。水槽可以将内容更规范的区分开来。(参考图6)

(6)列宽/ C:

把界面总宽度等分成列,相邻两列之间的间隔(水槽)减去后就是列宽。(参考图7)

(7)安全边距/ M:

界面左右保证可读性和美观度的合适的空隙就是安全边距。

Sketch里设置水槽后,安全边距是水槽的0.5倍。

计算公式:M = G / 2(参考图8)。

安全边距:

除了使用水槽的0.5倍,还可以使用0、0.5、1.0、1.5、2.0等水槽的倍数。举例:水槽是20,使用0.5倍,安全边距为10;水槽是20,使用2.0倍,安全边距为40。

注意:

栅格是辅助页面布局的,所以需要根据实际内容灵活的使用栅格,而不要被栅格所束缚。

3. 各种公式汇总

N 是自定义设置的列数(参考图9)。

总结:

在Sketch里设置栅格,定义好3个数值即可,总宽度、列数、水槽,这三个内容定义好数值后,其他内容就会自动计算,一个栅格就生成了。

4. 主流网站如何使用栅格系统

电商网站:

一起看一下两个主流电商如何使用栅格布局页面,进一步加深对栅格系统使用的了解。(参考图10:左 淘宝、右 京东)

淘宝布局:

下图包含:(1)完整内容展示布局;(2)浏览器缩小时内容展示布局。

淘宝布局分为4列内容:1、2、3、4,在情况(2)下,内容3被隐藏。(参考图11)

栅格布局:

(1)完整内容展示布局:网页总宽度为1200,列数为24,水槽为10;

(2)浏览器缩小时内容展示布局:总宽度为990,列数为20,水槽为10。

在(2)栅格布局里,隐藏4列,内容2宽度变窄占10列,其他内容不变。(参考图12)

栅格布局设定后,可以很方便计算出每个模块内容的宽度(参考图13)

栅格的列数,根据具体内容设定。内容模块较多,建议等分列数多一些,容易布局;如果内容模块较少,等分列数也可以少一些,就像淘宝可以等分成24列,也可以等分成12列。(参考图14)

栅格布局设定为12列,每个模块内容的宽度和上面等分成24列的宽一样(参考图15)

京东布局:

下图包含:(1)完整内容展示布局;(2)浏览器缩小时内容展示布局。

京东布局和淘宝布局一样分为4列内容:1、2、3、4,在情况(2)下,内容3被隐藏。(参考图16)

栅格布局:

  1. 完整内容展示布局:网页总宽度为1200,列数为24,水槽为10;

  2. 浏览器缩小时内容展示布局:总宽度为990,列数为20,水槽为10。

在(2)栅格布局里,隐藏4列,其他内容不变。(参考图17)

京东栅格布局,每个模块内容的宽度如下图(参考图18):

再来强调一下:栅格的列数,根据具体内容设定。京东网页等分成24列,也可以等分成12列。(参考图19)

栅格布局设定为12列,每个模块内容的宽度和上面等分成24列的宽一样(参考图20)

三、如何用栅格系统布局页面

第一步:确定页面宽度,比如1920、1800、1600、1366、1280等等。

第二步:分析内容等分的复杂度,如果内容简单只需要3、4等分,12列的栅格系统即可。如果有较多不等分的可能,还是建议采用24列的栅格系统,可灵活设置。

第三步:根据内容布局页面,确定模块之间是否有“间隔”,间隔尺寸是多少,6px、8px、10px、12px、20px选一个方便计算、方便记忆和整除的数值即可。就像过去,开发人员发现960px是最适合作为网格布局的宽度,因为960可以整除3,4,5,6,8,10,12,15,是不是突然发现设计其实是一道数学题。(参考图21)

网页举例:

根据具体内容,使用方格布局整个页面。

Sketch栅格设置,这里的总宽度1190是内容设计的实际宽度,设计页面宽度是1920,因为有些内容展示选用居中布局方式,两边留白。(参考图22)

四、影响网页设计的两大因素

分辨率和浏览器(参考图23):

1. 分辨率

什么是分辨率?

比如1920*1080px,整个屏幕可以看成是由很多小方格子组成,一个像素就是一个小格子,横向有1920个小格子,竖向有1080个小格子。

电脑屏幕是14寸还是15寸的,尺寸不变,电脑分辨率是可变的,在同一个屏幕上,分辨率越大画面就越精细,反之就越模糊。当下比较流行的屏幕分辨率:1024*768、1366*768、1280*800、1280*1024、1440*900、1600*900、1920*1080等。

注意:

关于分辨率,可以选用适合自己团队的分辨率尺寸,我们团队是梳理出所有产品的分辨率的使用情况,及团队产品设计的特点,选取2-3个作为后续统一使用的尺寸。

2.  浏览器

设计网页时要考虑好浏览器,主流的浏览器有谷歌、Safari、火狐、IE、欧朋等。

因为不同浏览器工具栏高度不同,如果设计内容需要在小屏幕上展示,就要考虑到打开浏览器默认页面及全屏页面的高度展示情况,如果浏览器所占高度较多,那么内容展示区域就被压缩了,所以就要考虑将最重要的内容尽量放在上面。

下面来看看最近一年浏览器市场份额占比情况。(参考图24)

数据来源:https://netmarketshare.com/browser-market-share


东方双子座

果然,语法可能会日新月异,但核心原理却很少有较大变更。朴灵老师6年前写的书,现在来看依然有很强的指导意义。可能是我太low,读《深入浅出node.js》这本书,只看到“深入”,没发现“浅出”……😂😂😂我太难了!

果然,语法可能会日新月异,但核心原理却很少有较大变更。朴灵老师6年前写的书,现在来看依然有很强的指导意义。可能是我太low,读《深入浅出node.js》这本书,只看到“深入”,没发现“浅出”……😂😂😂我太难了!

一叶

前端九种武器

为了帮助你在 2020 年成为前端大师,我收集了 9 个不同的项目,每个项目都有各自不同的主题和作为技术栈的 JavaScript 框架或库,你可以构建它们,并将它们添加到自己的技能组合中。记住,对你来说最有帮助的就是实际构建一些东西了。因此,请洗把脸清醒一下,开始练习吧!

使用 React(带 Hooks)构建电影搜索应用

首先,你可以使用 React 构建一个电影搜索应用。下面是完成版应用的截图:


你将学到什么内容

构建这个应用时,你将使用相对较新的 Hooks API 来提升你的 React 技能。示例项目利用了 React 组件、许多 Hooks、一个外部 api,当然还有一些 CSS...

为了帮助你在 2020 年成为前端大师,我收集了 9 个不同的项目,每个项目都有各自不同的主题和作为技术栈的 JavaScript 框架或库,你可以构建它们,并将它们添加到自己的技能组合中。记住,对你来说最有帮助的就是实际构建一些东西了。因此,请洗把脸清醒一下,开始练习吧!

使用 React(带 Hooks)构建电影搜索应用

首先,你可以使用 React 构建一个电影搜索应用。下面是完成版应用的截图:

你将学到什么内容

构建这个应用时,你将使用相对较新的 Hooks API 来提升你的 React 技能。示例项目利用了 React 组件、许多 Hooks、一个外部 api,当然还有一些 CSS 样式。

技术栈和功能
  • 带 Hooks 的 React

  • create-react-app

  • JSX

  • CSS

这个项目不使用任何类,为你提供了掌握函数式 React 编程的完美切入点,并且肯定会在 2020 年为你提供帮助。你可以在此处找到示例项目。按照教程操作,或者加上你自己的风格!

使用 Vue 构建聊天应用

为你准备的另一个很棒的项目,是使用我最喜欢的 JavaScript 库 VueJS 来构建一个聊天应用。该应用如下所示:

你将学到什么内容

在这个教程中,你将学习如何从头开始设置一款 Vue 应用,创建组件、处理状态、创建路由、连接到第三方服务,甚至处理身份验证。

技术栈和功能
  • Vue

  • Vuex

  • Vue 路由

  • Vue CLI

  • Pusher

  • CSS

这真的是一个很棒的项目,可以用来入门 Vue,或提升你现有的技能以应对 2020 年的开发。你可以在此处找到该教程。

使用 Angular 8 构建漂亮的天气应用

此示例将帮助你使用谷歌的 Angular 8 构建一款漂亮的天气应用:

你将学到什么内容

该项目将教你一些宝贵的技能,例如从头开始创建应用、先设计再开发,一直学到生产环境部署。

技术栈和功能
  • Angular 8

  • Firebase

  • 服务端渲染

  • 具有网格布局和 Flexbox 的 CSS

  • 对移动平台友好且响应迅速

  • 黑暗模式

  • 美观的用户界面

对于这个综合项目,我非常非常喜欢的一点是,你学到的不是孤立的内容,而是从设计到最终部署的整个开发过程。你真的应该试试这个项目!

https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e

使用 Svelte 构建待办事项应用

与 React、Vue 和 Angular 相比,Svelte 看起来还是新秀,但依旧是 2020 年的热门话题之一。的确,To-Do 应用不一定是最热门的话题,但这确实可以帮助你提升 Svelte 技能。它看起来像这样:

你将学到什么内容

本教程将向你展示如何从头到尾使用 Svelte 3 制作应用。它利用了组件、样式和事件处理程序。

技术栈和功能
  • Svelte 3

  • 组件

  • CSS 样式

  • ES6 语法

网上优秀的 Svelte 入门项目不是很多,因此我觉得这是一个很好的起点。谁知道呢,也许你就在创建另一篇更全面的 Svelte 教程,本文明年的新版就会介绍你的文章哩。

https://medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6

使用 Next.js 构建电子商务购物车

要创建支持开箱即用的服务端渲染的 React 应用时,NextJs 是最受欢迎的框架。该项目将向你展示如何构建一个电子商务购物车,如下所示:

你将学到什么

在这个项目中,你将学习如何设置 Next.js 开发环境、创建新页面和组件、获取数据和样式并部署一个 next 应用程序。

技术栈和功能
  • Next.js

  • 组件和页面

  • 数据获取

  • 样式

  • 部署

  • SSR 和 SPA

学习新东西时,能有真实案例(例如电子商务展示柜)总是很让人开心的。你可以在此处找到该教程。

使用 Nuxt.js 构建完整的多语言博客网站

Nuxt.js 对 Vue 来说就像是 Next.js 对 React 一样。这是一个很好的框架,可以结合服务端渲染和单页应用程序的威力。你可以创建的应用将如下所示:

你将学到什么内容

这个示例项目将教你从初始设置到最终部署,使用 Nuxt.js 构建完整网站的全过程。它利用了 Nuxt 所提供的许多出色功能,如页面和组件以及 SCSS 样式。

技术栈和功能
  • Nuxt.js

  • 组件和页面

  • Storyblok 模块

  • Mixins

  • 用于状态管理的 Vuex

  • SCSS 样式

  • Nuxt 中间件

这对你来说是一个非常酷的项目,涵盖了 Nuxt.js 的许多出色功能。我个人很喜欢用 Nuxt,因此你真的应该尝试一下,因为它也会使你成为更优秀的 Vue 开发人员!

https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial

使用 Gatsby 建立博客

Gatsby 是一个出色的静态站点生成器,在后台使用 React 和 GraphQL。这是该项目的结果:

你将学到什么内容

在本教程中,你将学习如何利用 Gatsby 构建出色的博客,可以很好地用来撰写自己的文章,同时利用 React 和 GraphQL 的能力。

技术栈和功能
  • Gatsby

  • React

  • GraphQL

  • 插件和主题

  • MDX/Markdown

  • 引导 CSS

  • 模板

如果你想创建一个博客,这是一个很好的示例,它告诉你如何利用 React 和 GraphQL 做到这一点。我并不是说 Wordpress 一直都是一个错误的选项,但有了 Gatsby,你可以在使用 React 的同时创建高性能的站点!(这也是一个很棒的技术组合)

https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc

使用 Gridsome 构建博客

Gridsome 对于 Vue 来说……好吧,Next/Nuxt 那节中提过了这种关系,但是 Gridsome 和 Gatsby 也是如此。两者都使用 GraphQL 作为数据层,但 Gridsome 使用的是 VueJS。这也是一个很棒的静态站点生成器,它将帮助你创建出色的博客:

你将学到什么内容

该项目将教你如何构建一个简单的博客,学习入门 Gridsome、GraphQL 和 Markdown。它还介绍了如何通过 Netlify 部署应用。

技术栈和功能
  • Gridsome

  • Vue

  • GraphQL

  • Markdown

  • Netlify

当然,这不是最全面的教程,但涵盖了 Gridsome 和 Markdown 的基本概念,可能是一个很好的起点。

https://www.telerik.com/blogs/building-a-blog-with-vue-and-markdown-using-gridsome

使用 Quasar 构建类似于 SoundCloud 的音频播放器应用

Quasar 是另一个 Vue 框架,也可以用于构建移动应用。在这个项目中,你将创建一个音频播放器应用,如下所示:

你将学到什么内容

上面介绍的其他项目主要关注 Web 应用程序,而这个项目将向你展示如何通过 Quasar 框架,使用 Vue 来创建移动应用。你应该已经配置了可正常使用的 Cordova 设置,并配置好了 android studio/xcode。如果没有,则该教程中有一个指向 quasar 网站的链接,在那里他们向你展示了如何进行设置。

技术栈和功能
  • Quasar

  • Vue

  • Cordova

  • Wavesurfer

  • UI 组件

这是一个小项目,展现了 Quasar 在构建移动应用方面的强大能力。

https://www.learningsomethingnew.com/how-to-build-a-sound-cloud-like-audio-player-app-with-vue-js-quasar-and-wave-surfer

 @ 

心斩心

写了点代码,把自己的博客彻底重构了。

很喜欢这种干净但是醒目的风格。

写了点代码,把自己的博客彻底重构了。

很喜欢这种干净但是醒目的风格。

viva la vida

Vue的八个生命周期的一些理解

mounted表示组件挂载到DOM上,页面显示,并且可以访问DOM元素

mounted表示组件挂载到DOM上,页面显示,并且可以访问DOM元素

东方双子座

《CSS权威指南(第四版)》这套书实在是太厚了,差不多抵得上第三版的三本书,看得我怀疑CSS生。以前自认为CSS写得还行,读完之后,抑制不住激动的情绪:“嗯,没错了,CSS已达入门级别!”我太难了!难得我,每天夜里,明明都困得睁不开眼了,可就是——睡不着!

《CSS权威指南(第四版)》这套书实在是太厚了,差不多抵得上第三版的三本书,看得我怀疑CSS生。以前自认为CSS写得还行,读完之后,抑制不住激动的情绪:“嗯,没错了,CSS已达入门级别!”我太难了!难得我,每天夜里,明明都困得睁不开眼了,可就是——睡不着!

水滴
一叶

vue开发环境配置

vue开发环境配置

1、Node Install

macos: 

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew install nodejs

sudo chmod -R 777 /usr/local/lib/node_modules/

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install...

vue开发环境配置

1、Node Install

macos: 

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew install nodejs

sudo chmod -R 777 /usr/local/lib/node_modules/

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install cmd:  cnpm install name --save-dev --save

tools: npm update -g 

2、framwork Install

cnpm install webpack -g

npm install vue-cli -g  

创建vue工程项目:在项目目录下执行 vue init webpack-simple 工程名字(不支持中文)

tools: npm update vue-cli ;  npm view vue-cli (ops:view vertion)

3、安装项目依赖库

npm install (注意cnpm 库不全)

4、插件安装:路由和网络模块

cnpm install vue-router vue-resource --save

5、启动项目 : npm run dev

6、发布项目 : npm run build (具体看配置文件)


一叶

VUE 常用语法整理

模板语法

v-html=“变量或方法名” 或 {{变量或方法名()}} 绑定标签内容

v-bind:标签属性=“{‘值’:是否判断}” 根据变量动态绑定标签属性 支持多个值如class的多个值v-bind:class="{ active: isActive, 'text-danger': hasError }" v-bind支持computed方法和对象绑定

v-bind:标签属性=“” 直接绑定属性值

v-bind:href="" 简化 :href="...

模板语法

v-html=“变量或方法名” 或 {{变量或方法名()}} 绑定标签内容

v-bind:标签属性=“{‘值’:是否判断}” 根据变量动态绑定标签属性 支持多个值如class的多个值v-bind:class="{ active: isActive, 'text-danger': hasError }" v-bind支持computed方法和对象绑定

v-bind:标签属性=“” 直接绑定属性值

v-bind:href="" 简化 :href=""

v-bind:标签属性=“原始值|过滤器方法名” 

或者 

直接{{原始值|过滤器方法名}}  方法定义filters:{过滤器方法名:function(value 原始值){return xxxx;}} 

多级过滤{{ message | filterA | filterB }}

多参数{{ message | filterA('arg1', arg2) }}

v-if="bool变量"  是否产生标签对象

v-show="bool变量" 是否显示控件

v-else/v-else-if 注意次序

v-on:click="方法名" 监听事件 此处方法名无括号 缩写 @click=""

v-on:submit.prevent="" event.preventDefault(): submit后不再重载

v-model="" 双向数据绑定,多用于input、select、text、checkbo、等表单控件。

v-for="item in list" //item是遍历对象;list是对象集

循环中引用数据:{{item.属性}} 

数据集格式:  list:[{},{}] 

对象数据: object:{name:'',other:false}

对象数据遍历时依次遍历各属性, objec相当于数据集

<li v-for="(value, key) in object">

    {{ key }} : {{ value }}

 </li>

<li v-for="(value, key, index) in object">

     {{ index }}. {{ key }} : {{ value }}

</li>

<li v-for="n in 10">

     {{ n }}

</li>

v-for 循环多个控件集合用<template>匿名模板标签实现

计算属性定义computed:{方法名:function(){return xxx}}

计算属性特点可以根据依赖变量自动更新,这也是和methods的区别

methods重复调用;computed依赖缓存改变才重新计算;

computed 默认只有getter,支持setter

在vue外直接定义监听vm.$watch('监听值',function(newvalue,oldvalue){});

在vue里添加监听节点watch:{} 通过v-model 绑定

事件修饰符

<!-- 阻止单击事件冒泡 -->

<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->

<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联  -->

<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->

<form v-on:submit.prevent></form>

<!-- 添加事件侦听器时使用事件捕获模式 -->

<div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->

<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次,2.1.4版本新增 -->

<a v-on:click.once="doThis"></a>

<input v-on:keyup.13="submit"> 回车=13

<input v-on:keyup.enter="submit"> 回车=enter

支持的别名:enter/tab/delete/esc/space/up/down/left/right/ctrl/alt/shift/meta(win)

定义全局组件:Vue.component(组件名,配置对象)  在vue实例之外

使用全局组件<组件名></组件名>

使用范围:所有vue实例

定义局部组件:在vue实例内部定义components

components: {

    'runoob': { //配置对象

  template: '<h1>自定义组件!</h1>',

props:['message']  //生命组件参数

     }

}

调用:<组件名 v-bind:message="参数值"></组件名>

组件监听回调 $emit

<div id="app">

    <div id="counter-event-example">

      <p>{{ total }}</p>

      <button-counter v-on:increment="incrementTotal"></button-counter>

      <button-counter v-on:increment="incrementTotal"></button-counter>

    </div>

</div>

 

<script>

Vue.component('button-counter', {

  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',

  data: function () { //此处必须是函数避免脏读

    return {

      counter: 0

    }

  },

  methods: {

    incrementHandler: function () {

      this.counter += 1

      this.$emit('increment')

    }

  },

})

new Vue({

  el: '#counter-event-example',

  data: {

    total: 0

  },

  methods: {

    incrementTotal: function () {

      this.total += 1

    }

  }

})

</script>

一叶

webpack-dev-server使用方法

https://segmentfault.com/a/1190000006670084

首先,我们来看看基本的webpack.config.js的写法

module.exports = {        entry: './src/js/index.js',        output: {         ...

https://segmentfault.com/a/1190000006670084

首先,我们来看看基本的webpack.config.js的写法

module.exports = {        entry: './src/js/index.js',        output: {            path: './dist/js',            filename: 'bundle.js'        }    }

配置文件提供一个入口和一个出口,webpack根据这个来进行js的打包和编译工作。虽然webpack提供了webpack --watch的命令来动态监听文件的改变并实时打包,输出新bundle.js文件,这样文件多了之后打包速度会很慢,此外这样的打包的方式不能做到hot replace,即每次webpack编译之后,你还需要手动刷新浏览器。

webpack-dev-server其中部分功能就能克服上面的2个问题。webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议,原始文件作出改动后,webpack-dev-server会实时的编译,但是最后的编译的文件并没有输出到目标文件夹,即上面配置的:

    output: {        path: './dist/js',        filename: 'bundle.js'    }

注意:你启动webpack-dev-server后,你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件

下面来结合webpack的文档和webpack-dev-server里部分源码来说明下如何使用:

启动

启动webpack-dev-server有2种方式:

  1. 通过cmd line

  2. 通过Node.js API

配置

我主要讲解下cmd line的形式,Node.js API形式大家去看下官方文档。可通过npm script进行启动。我的目录结构是:

    app    |__dist    ||__styles    ||__js    ||__bundle.js    ||__index.html    |__src    |   |__styles    |   |__js    |       |__index.js    |__node_modules    |__package.json    |__webpack.config.js

content-base

设定webpack-dev-server伺服的directory。如果不进行设定的话,默认是在当前目录下。

webpack-dev-server --content-base ./dist

这个时候还要注意的一点就是在webpack.config.js文件里面,如果配置了output的publicPath这个字段的值的话,在index.html文件里面也应该做出调整。因为webpack-dev-server伺服的文件是相对publicPath这个路径的。因此,如果你的webpack.config.js配置成这样的:

module.exports = {        entry: './src/js/index.js',        output: {            path: './dist/js',            filename: 'bundle.js',            publicPath: '/assets/'        }    }

那么,在index.html文件当中引入的路径也发生相应的变化:

    <!DOCTYPE html>    <htmllang="en"><head><metacharset="UTF-8"><title>Demo</title></head><body><scriptsrc="assets/bundle.js"></script></body></html>

如果在webpack.config.js里面没有配置output的publicPath的话,那么index.html最后引入的文件js文件路径应该是下面这样的。

    <!DOCTYPE html>    <htmllang="en"><head><metacharset="UTF-8"><title>Demo</title></head><body><scriptsrc="bundle.js"></script></body></html>

Automatic Refresh

webpack-dev-server支持2种自动刷新的方式:

  • Iframe mode

  • inline mode

这2种模式配置的方式和访问的路径稍微有点区别,最主要的区别还是Iframe mode是在网页中嵌入了一个iframe,将我们自己的应用注入到这个iframe当中去,因此每次你修改的文件后,都是这个iframe进行了reload。

通过查看webpack-dev-server的源码,lib路径下的Server.js文件,第38-48行,分别新建几个流,这几个流保存了client文件夹下的相关文件:

// Prepare live html pagevar livePage = this.livePage = new StreamCache();    fs.createReadStream(path.join(__dirname, "..", "client", "live.html")).pipe(livePage);    // Prepare the live js filevar liveJs = new StreamCache();    fs.createReadStream(path.join(__dirname, "..", "client", "live.bundle.js")).pipe(liveJs);    // Prepare the inlined js filevar inlinedJs = new StreamCache();    fs.createReadStream(path.join(__dirname, "..", "client", "index.bundle.js")).pipe(inlinedJs);

// Init express servervar app = this.app = new express();    // middleware for serving webpack bundlethis.middleware = webpackDevMiddleware(compiler, options);    app.get("/__webpack_dev_server__/live.bundle.js", function(req, res){        res.setHeader("Content-Type", "application/javascript");        liveJs.pipe(res);    });    app.get("/webpack-dev-server.js", function(req, res){        res.setHeader("Content-Type", "application/javascript");        inlinedJs.pipe(res);    });    app.get("/webpack-dev-server/*", function(req, res){        res.setHeader("Content-Type", "text/html");        this.livePage.pipe(res);    }.bind(this));

当使用Iframe mode时,请求/webpack-dev-server/index.html路径时,会返回client/index.html文件,这个文件的内容就是:

<!DOCTYPE html><html><head><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metacharset="utf-8"/><metaname="viewport"content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/><scripttype="text/javascript"charset="utf-8"src="/__webpack_dev_server__/live.bundle.js"></script></head><body></body></html>

这个页面会请求live.bundle.js,其中里面会新建一个Iframe,你的应用就被注入到了这个Iframe当中。同时live.bundle.js中含有socket.io的client代码,这样它就能和webpack-dev-server建立的http server进行websocket通讯了。并根据返回的信息完成相应的动作。

而Inline-mode,是webpack-dev-server会在你的webpack.config.js的入口配置文件中再添加一个入口,

module.exports = {        entry: {            app: [                'webpack-dev-server/client?http://localhost:8080/',                './src/js/index.js'            ]        },        output: {            path: './dist/js',            filename: 'bundle.js'        }    }

这样就完成了将inlinedJS打包进bundle.js里的功能,同时inlinedJS里面也包含了socket.io的client代码,可以和webpack-dev-server进行websocket通讯。

当然你也可以直接在你index.html引入这部分代码:

<scriptsrc="http://localhost:8080/webpack-dev-server.js"></script>

不过Iframe mode和Inline mode最后达到的效果都是一样的,都是监听文件的变化,然后再将编译后的文件推送到前端,完成页面的reload的。

Iframe mode

Iframe mode下cmd line不需要添加其他的内容,浏览器访问的路径是:

localhost:8080/webpack-dev-server/index.html。

这个时候这个页面的header部分会出现整个reload消息的状态。当时改变源文件的时候,即可以完成自动编译打包,页面自动刷新的功能。

webpack2分包及异步加载套路


一叶

webpack 快速入门流程与备忘

1、mkdir -pv abc/bbb     //pv支持多级目录

2、cnpm install --save-dev webpack -g  //g全局

3、cnpm install webpack-cli -g

4、cnpm init //初始化package.js

5、webpack -v //检查版本 是否安装正确

6、webpack //默认 src/index.js 输入

7、webpack --mode development a.js -o bundle....

1、mkdir -pv abc/bbb     //pv支持多级目录

2、cnpm install --save-dev webpack -g  //g全局

3、cnpm install webpack-cli -g

4、cnpm init //初始化package.js

5、webpack -v //检查版本 是否安装正确

6、webpack //默认 src/index.js 输入

7、webpack --mode development a.js -o bundle.js //-o 自定义输出

8、cnpm install css-loader style-loader

//安装加载样式插件 require("!style-loader!css-loader!./style.css");

//--module-bind 'css=style-loader!css-loader'  增加此命令在js里可省略!style-loader!...

9、webpack init //初始化webpack config 最好手工输入

10、webpack插件安装 cnpm install webpack --save-dev

// 在package.js 中添加

1、"scripts": {  

      "dev": "webpack --mode development",  

      "build": "webpack --mode production"  

  }, 

2、生产模式:npm run build;

3、开发模式:npm run dev;

11、安装监听服务 cnpm install webpack-dev-server -g



关于 webpack-dev-server 动态监听的配置与说明:

https://segmentfault.com/a/1190000006670084


yukilonger
今天安装Vue CLI怎么都不...

今天安装Vue CLI怎么都不成功,最后
md d:work
cd d:work
cnpm install -g @vue/cli

今天安装Vue CLI怎么都不成功,最后
md d:work
cd d:work
cnpm install -g @vue/cli

a  ゞ◎Please Come Back

Brackets 前端开发工具

Brackets 是一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。该项目由 Adobe创建和维护,根据MIT许可证发布,支持 Windows、Linux 以及 OS X 平台。
  Brackets 的特点是简约、优雅、快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等。


转自:前端开发工具Brackets介绍,安装及安装Emme插件时踩过的坑

Github项目

Brackets 是一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。该项目由 Adobe创建和维护,根据MIT许可证发布,支持 Windows、Linux 以及 OS X 平台。
  Brackets 的特点是简约、优雅、快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等。


转自:前端开发工具Brackets介绍,安装及安装Emme插件时踩过的坑

Github项目

hdw2000
hdw2000

GraphQL学习指南

作者:hdw2000
为希望开始使用GraphQL的前端Web开发人员、后端工程师以及项目或产品经理提供了一条清晰的学习路径。

将先后探索图论、图数据结构和GraphQL类型,之后在实际项目中学习如何为照片共享应用构建schema。《GraphQL学习指南》还介绍了Apollo Client,可用来将GraphQL连接到用户界面。

东方双子座

在《JavaScript高级程序设计》中,与原型、继承、作用域、闭包、DOM、事件、Ajax等概念相关的章节,虽然已经读过好几遍,但是很多细节仍然记不清楚。没办法,大脑的遗忘曲线确实令人苦恼。不过,每读一遍,对这些概念的理解就会加深一层。之前总是有选择性地阅读,一直未能通读全书,今天总算读完了。


注:看这部书的时候,我的强迫症又犯了,对疏漏、错误实在无法容忍。因为喜欢这些书,所以才希望它们能够做得更好。几年前,曾在北京做过将近一年的校对工作,没想到现在又派上用场了。修改后,折页,以便翻阅、查找。因为改的地方比较多,所以只能随便选几处作为示例。《HTTP权威指南》、《JavaScript高...

在《JavaScript高级程序设计》中,与原型、继承、作用域、闭包、DOM、事件、Ajax等概念相关的章节,虽然已经读过好几遍,但是很多细节仍然记不清楚。没办法,大脑的遗忘曲线确实令人苦恼。不过,每读一遍,对这些概念的理解就会加深一层。之前总是有选择性地阅读,一直未能通读全书,今天总算读完了。


注:看这部书的时候,我的强迫症又犯了,对疏漏、错误实在无法容忍。因为喜欢这些书,所以才希望它们能够做得更好。几年前,曾在北京做过将近一年的校对工作,没想到现在又派上用场了。修改后,折页,以便翻阅、查找。因为改的地方比较多,所以只能随便选几处作为示例。《HTTP权威指南》、《JavaScript高级程序设计》、《HTTP/2基础教程》都是由人民邮电出版社出版发行的,等我读完《HTTP/2基础教程》之后,便把这三本书一同寄给人民邮电出版社。不用谢我,我是雷锋!

LOFTER

让兴趣,更有趣

简单随性的记录
丰富多彩的内容
让生活更加充实

下载移动端
关注最新消息