从零开始的 Web 开发（一）：橘雪莉表情包生成器
这是一个纯前端项目，目的很简单，能跑起来就行。而且由于笔者基础非常差，因此学习路线和写下的内容可能显得非常诡异。
0. 一个搞笑的前置小插曲
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| (base) ➜ vue-project npm i
npm warn ERESOLVE overriding peer dependency
npm warn ERESOLVE overriding peer dependency
npm error code ERR_SSL_CIPHER_OPERATION_FAILED
npm error 00CDC92A64780000:error:1C800066:Provider routines:ossl_gcm_stream_update:cipher operation failed:../deps/openssl/openssl/providers/implementations/ciphers/ciphercommon_gcm.c:346:
npm error
npm error A complete log of this run can be found in: /home/james1/.npm/_logs/2026-05-13T03_19_10_181Z-debug-0.log
(base) ➜ vue-project npm install
npm warn ERESOLVE overriding peer dependency
npm warn ERESOLVE overriding peer dependency
added 146 packages, and audited 147 packages in 9s
32 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
|
难道 npm i 和 npm install 不等价？读完之后发现是 SSL 加密失败了，其实就是网络问题。
1. 开始
由于这就是个单页面应用，因此不需要使用路由。之后会做一些更好玩的东西来学一下路由。
1.1 主体框架的设计
这部分我们会用到 flex 布局，因此先学习一下。
css 默认布局采用流式布局，即从上往下排列。
可以发现 normal flow 可以被 flexbox 替代，但是这样会让代码变得臃肿且增加额外的性能开销。
然后是弹性布局（flexbox），有父元素（容器）和子元素（项目）。
元素排列的方向是主轴方向，垂直于主轴的是交叉轴。
首先是容器的属性：
1
2
3
4
| .container {
display: flex;
flex-direction: row / column;
}
|
首先是 justify-content，操控元素主轴上的分布，默认值是 flex-start，即靠左对齐。相应的还有 center 和 flex-end。
而 align-items 控制交叉轴上的元素分布。其默认是 stretch，即拉伸填满交叉轴。除了上述三种 justify-content 的值，还支持 baseline，即按照文字基线对齐。
然后是 gap，子元素之间的间距。flex-wrap，子元素放不下时是否换行。
然后是子元素的属性。align-self 可以覆盖父元素的 align-items。
比较有趣的是 order，可以设置一个整数，数小的元素会排在前面，这样就可以用 CSS 排版而不用修改 HTML 结构。
1.2 设计页面
结构很简单：标题，双栏结构（选择与生成，在移动端合并为单栏），页脚。
我们先来设计 header。
1
2
3
4
5
6
7
| <header class="app-header">
<img src="/logo.webp" alt="魔法少女的魔女审判" class="logo" height="70px" />
<h1 class="title">
<span class="title-part title-main">表情包</span>
<span class="title-part title-sub">生成器</span>
</h1>
</header>
|
标题应该居中，包括容器在内，样式如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| .app-container
display: flex
flex-direction: column
height: 100vh
background: #0c1113
padding: 60px 64px
.app-header
display: flex
justify-content: center
align-items: center
gap: 10px
padding: 12px 24px
.title
display: flex
align-items: baseline
gap: 4px
margin: 0
font-size: 2rem
line-height: 1.2
.title-main
color: #ff6b35
font-weight: 800
font-size: 1em
.title-sub
color: #dfdfdf
font-weight: 400
font-size: 0.7em
|
2. 表情包输出
3. 项目发布
