DocPortal
目录

初识前端框架【Node】

# Nodejs

目前市面上有很多 node 框架可供大家选择。

  • Express.js (opens new window)是 Node.JS 诞生之初，是一款基于Node.js以及Chrome V8引擎，快速、极简的JS服务端开发框架。
  • Koa.js (opens new window) 是一款微型Web框架，写一个hello world很简单，但web应用离不开session，视图模板，路由，文件上传，日志管理。这些 Koa 都不提供，需要自行去官方的 Middleware 寻找。然而，100个人可能找出100种搭配。
  • Egg.js (opens new window)是基于Koa.js，解决了上述问题，将社区最佳实践整合进了Koa.js，另取名叫Egg.js，并且将多进程启动，开发时的热更新等问题一并解决了。这对开发者很友好，开箱即用，开箱即是最(较)佳配置。Egg.js发展期间，ECMAScript又推出了 async await，相比yield的语法async写起来更直。后面Koa.js也同步进行了跟进。
  • Midway (opens new window)是阿里团队，基于渐进式理念研发的 Node.js 框架，结合了 OOP和函数式两种编程范式。以 egg 是作为底层框架，加上了良好的TypeScript的定义支持等众多新特性,推出了Midway，有兴趣的小伙伴可以去官方文档学习一下
  • Nest.js (opens new window) 基于Express.js的全功能框架 Nest.js，他是在Express.js上封装的，充分利用了TypeScript的特性；Nest.js的优点是社区活跃，涨势喜人，截止目前在 GitHub 拥有 43.7k Star 是近期比较热门的企业级框架。 基于支持底层支持ts与企业级和社区活跃度等综合考虑，我选择用nest来进行学习。各位同学可以按需选择。
  • 页面级渲染：

# CSS框架

TailwindCSS (opens new window) Tailwind 是一个“实用程序优先的CSS 框架”，它提供的类使用户能够直接在用户的标记中创建自定义用户界面。实现内联样式有助于快速创建引人注目的 UI，而无需编写任何 CSS。

Windi CSS (opens new window) 按需供应的 Tailwind 替代方案，它为你提供了更快的加载体验，完美兼容 Tailwind v2.0，并且拥有很多额外的酷炫功能。

UnoCSS (opens new window) UnoCSS 是一个即时、按需的原子级 CSS 引擎。它专注于提供轻量化、高性能的 CSS 解决方案。

Bootstrap (opens new window) Bootstrap由 Twitter 的 Mark Otto 和 Jacob Thornton 创建，是一个开源框架，它使用 CSS 和基于 JavaScript 的界面组件模板来鼓励内部工具之间的一致性。它倡导了现在无处不在的移动优先概念，并为其无缝实施提供了必要的工具。Bootstrap 通过合并网格系统，将屏幕离散地划分为最终用户看不到的列，从而促进了流行的移动优先方法的直接采用。

Materialize (opens new window) Materialise 是由 Google 精心设计和概念化的 CSS 框架，建立在 Material Design 原则之上，Material Design 是一种无缝融合创造力和技术的创新设计语言。谷歌的目标是创建一个设计框架，为任何平台上的所有产品提供统一的用户体验。

Foundation (opens new window) Foundation被描述为“世界上最先进的响应式前端框架”，提供了一个全面的工具包，包括网格系统、HTML、SASS 和 CSS 用户界面元素、模板以及包含导航、按钮、排版、表格等等。此外，它还通过 JavaScript 扩展提供可选功能。该框架非常强调移动设备，并且事实证明对于开发需要强大设计基础的大量 Web 应用程序非常有益。

Bulma (opens new window) Bulma基于 Flexbox，是一个开源、响应式 CSS 框架，以其卓越的内置功能而闻名，减少了大量手动 CSS 编码的需要，并确保快速响应时间。它使用图块来构建 Metro 风格的网格，从而产生时尚且组织良好的页面布局。用户可以通过仅导入他们想要使用的特定元素来进一步简化流程。

Skeleton (opens new window) Skeleton在其主页上被描述为“极其简单、响应式的样板”，这个轻量级工具只有 400 行源代码，旨在生成可在移动设备和更大屏幕上无缝运行的 CDD 元素。Skeleton 采用 12 列网格系统，最大宽度为 960px，可容纳小型、中型和大型显示器，只需一行 CSS 代码即可轻松修改。它包含了响应式设计的所有基本元素，具有用户友好的语法，有助于快速实施，使响应式设计的创建变得非常简单。

Open Props (opens new window) Open Props是一个完全基于 CSS 变量构建的低级框架，这意味着它几乎完全可定制，并且可以进行调整以适应任何设计系统。它使用即时编译来保证只生成项目所需的 CSS 变量，这可能有助于提高应用程序的性能。

现代的原子化 CSS 方案——Tailwind CSS、Windi CSS、UnoCSS，之所以将原子化 CSS 方案再度推向高潮，是因为其解决了上述的三大痛点：

  • 它们都推出了 VSCode 插件，为编写原子类提供了充分的提示与自动补全。
  • 它们都在构建阶段扫描代码，能够按照代码中的实际使用情况生成工具类，解决了原子类使 CSS 产物膨胀问题。
  • 针对原子类堆叠降低可读性的问题，提供了 @apply 语法支持在 CSS 中对多个原子类进行合并，与语义化 CSS 实现了很好的配合。

Sass.vs.Less | 简介与比较 (opens new window)

Less.js 中文网 (lesscss.cn) (opens new window)

Sass中文网 (opens new window)

# B端组件库

  • 阿里: Ant Design: https://2x.antdv.com/docs/vue/getting-started-cn
  • 字节: Arco.Design: https://www.arco.design/
  • 腾讯： TDesign：https://tdesign.tencent.com/
  • 京东: UDCDesign: https://findesign.jd.com/#/home
  • 抖音: Semi Design: https://semi.design/zh-CN/
  • 饿了么: Element: https://element.eleme.io/

# React资源

  • https://github.com/doocs/source-code-hunter
  • https://github.com/Asabeneh
  • https://github.com/hateonion/react-bits-CN?tab=readme-ov-file
  • https://github.com/brillout/awesome-react-components
  • https://ahooks.js.org/zh-CN
  • https://antonioru.github.io/beautiful-react-hooks/

# 不同屏幕尺寸

响应式设计是一种使网页能够适应不同屏幕尺寸和设备的方法。以下是一些关键技术和代码示例：

  1. 使用媒体查询（Media Queries）：CSS3引入了媒体查询，允许根据不同的屏幕尺寸应用不同的CSS规则。
css/* 基础样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}

/* 针对平板的样式 */
@media (min-width: 768px) and (max-width: 1024px) {
  body {
    padding: 40px;
  }
}

/* 针对桌面的样式 */
@media (min-width: 1025px) {
  body {
    padding: 60px;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  1. 使用弹性布局（Flexbox）：CSS3的Flexbox布局模型可以提供更灵活的布局方式，适用于不同屏幕尺寸的布局。
css.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 200px; /* 每个item的基础宽度为200px，可以伸缩 */
  margin: 10px;
}
1
2
3
4
5
6
7
8
9
  1. 使用网格布局（Grid）：CSS Grid Layout是另一种强大的布局系统，可以创建复杂的布局结构。
css.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 20px;
}

.item {
  /* 无需设置宽度，grid会处理 */
}
1
2
3
4
5
6
7
8
9
  1. 使用视口单位（Viewport Units）：视口宽度（vw）和视口高度（vh）单位允许元素的尺寸基于视口的大小进行缩放。
css.header {
  font-size: 4vw; /* 根据视口宽度变化字体大小 */
}
1
2
3
  1. 使用图片的srcset属性：为不同分辨率的屏幕提供不同大小的图片。
<img src="small.jpg" 
     srcset="medium.jpg 1024w, large.jpg 2048w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
     alt="Responsive Image">
1
2
3
4
  1. JavaScript/jQuery 特性检测：在某些情况下，你可能需要使用JavaScript来检测设备特性，并据此应用不同的样式或功能。
javascriptif (window.matchMedia("(min-width: 600px)").matches) {
  // 应用大屏幕的样式或功能
}
1
2
3
  1. 框架和库的使用：使用如Bootstrap、Foundation等前端框架，它们提供了响应式设计的工具和组件。
html<!-- 引入Bootstrap的响应式栅格系统 -->
<div class="container">
  <div class="row">
    <div class="col-md-6">内容1</div>
    <div class="col-md-6">内容2</div>
  </div>
</div>
1
2
3
4
5
6
7

通过结合以上技术和方法，可以创建一个在不同设备和屏幕尺寸上都能良好显示的网站。

上次更新: 2024/07/16, 14:59:07
Vue项目实战：逸刻博客管理平台

←

Theme by Vdoing | Copyright © 2024-2024 VirtualAgent | Apache 2.0 License