【VUE3.0】动手做一套像素风的前端UI组件库---先导篇

引言
准备素材
- 字体
- 鼠标手势图
创建vue3项目
- 构建项目
- - 1. 根据命令行提示选择如下：
  - 2. 进入项目根目录下载依赖并启动。
  - 3. 设置项目src路径别名，方便后期应用路径。
  - 4. 将素材按照自己的规则放置在assets文件夹下：
  - 5. 初始化全局css样式，在项目初始化之后，在src下会自动生成一个style.css文件，清空所有内容，设置我们自己的样式规则
  - 6. 初始化app.vue文件内容，测试字体及鼠标样式。
- 测试效果
总结

引言

闲暇时间逛github时发现了一个有趣的前端UI样式库 NES.css ，个人非常喜欢这种类型的东西，虽然可能无法在工作中实际应用，但是如果能仔细研究清楚如何去实现效果，倒也是对提升css技术能力有所帮助。
NES.css
我将在接下来的几篇文档中，完成以下几个内容：

参考NES.css研究各类组件样式如何编写。
基于vue3框架编写组件库。
将组件库发布npm仓库提供下载。

准备素材

一个像素风格的UI库除了组件样式之外，一些必要的图片、字体素材也会把整个像素风格提升一个等级。所以我先扒了一下NES.css官网提供的素材，比如鼠标样式图片、字体。

字体

NES.css官网首推的字体为Press Start 2P，由于这种字体只支持英文，因此还需要一款中文字体。英文字体地址：Press Start 2P
官网同时推荐了中文、日文、韩文等字体，这里只说中文，例如：zpix-pixel-font。
经过体验后我发现zpix-pixel-font这个字体不是很符合我对像素风的想象，所以我又搜寻了另一种中文字体目哉像素体，我已将中英两种字体均打包好了放在文章末尾提供下载。

鼠标手势图

鼠标手势图片我觉得NES.css提供的素材就非常棒，他提供了普通模式和选中模式两种手势的png图片。
我在之前的文章提到了一种新的图片格式AVIF，因为像素风对于画质要求极低，所以在不考虑画面细节的前提下，我更推荐大家使用AVIF格式的图片格式，转换的方法参考：【CSS Tricks】一种基于AV1视频格式的现代图像格式-AVIF，但是在我实际转换后发现我错了，无论是我将图片转为svg、webp、avif等格式，都会比现有png格式体积变大不少。有懂行的老兄帮忙解释下为啥？
因为转换后反而图片体积变大了，所以就只将原图片打包好放在文章末尾提供下载。

创建vue3项目

本项目使用vite构建vue3项目，使用yarn包管理工具，使用JavaScript语法，（我觉得TS太麻烦了，虽然对于团队协作提供了不少的帮助，但是个人项目讲究灵活性），不使用css预处理，总之项目一切从简。

构建项目

yarn create vite

1. 根据命令行提示选择如下：

命令行

2. 进入项目根目录下载依赖并启动。

# 进入项目根目录
cd pixelUI
# 下载依赖
yarn install
# 启动项目
yarn dev

3. 设置项目src路径别名，方便后期应用路径。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {"@": path.resolve(__dirname, "src"),},},
});

4. 将素材按照自己的规则放置在assets文件夹下：

assets

5. 初始化全局css样式，在项目初始化之后，在src下会自动生成一个style.css文件，清空所有内容，设置我们自己的样式规则

/* 全局样式变量 */
:root {/* 鼠标样式 */--cursor_normal: url("@/assets/images/cursor/cursor.png"), auto;--cursor_pointer: url("@/assets/images/cursor/cursor-click.png"), auto;
}
/* 字体 */
@font-face {font-family: "pixel_en";src: url("@/assets/fonts/pixel_en.ttf");
}
@font-face {font-family: "pixel_ch";src: url("@/assets/fonts/pixel_ch.ttf");
}
/* 根节点重置样式 */
html,
body,
#app {margin: 0;padding: 0;width: 100vw;height: 100vh;cursor: var(--cursor_normal);scroll-behavior: smooth;
}

6. 初始化app.vue文件内容，测试字体及鼠标样式。

<template><div class="cursor">测试鼠标选中状态</div><div class="font_ch"># 测试中文</div><div class="font_en"># Test English Error</div>
</template>
<script setup></script>
<style scoped>
.cursor {cursor: var(--cursor_pointer);margin-top: 20px;margin-left: 20px;
}
.font_ch {font-family: pixel_ch;font-size: 18px;font-weight: bold;margin-top: 20px;margin-left: 20px;
}
.font_en {font-family: pixel_en;font-size: 18px;margin-top: 20px;margin-left: 20px;
}
</style>