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

系列文章目录

1. 【VUE3.0】动手做一套像素风的前端UI组件库—Button

引言

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

我将在接下来的几篇文档中，完成以下几个内容：

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

准备素材

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

字体

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

鼠标手势图

• 鼠标手势图片我觉得NES.css提供的素材就非常棒，他提供了普通模式和选中模式两种手势的png图片。后续我又新增了禁用手势图片，制作像素风图片的方法参考：【VUE3.0】如何得到一张像素风格的图片？
• 我在之前的文章提到了一种新的图片格式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文件夹下：

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>

7. 设置全局组件注册方法

这里主要是为了方便测试组件时直接使用组件名称不需要单独引入组件文件。

1. 在src\components目录下创建install.js文件

// 引入项目中的全局组件
import pButton from "./button/index.vue"; // 引入自定义的svg组件
// 引入其他全局组件
const allGloablCom = {
  pButton,
 // 其他全局组件
}; // 将自定义组件放入对象中

// 对外暴露插件对象
export default {
  // 只能叫做 install 方法
  install(app) {
    // 循环遍历，注册 allGloablCom 中全部组件
    Object.keys(allGloablCom).forEach((key) => {
      // 注册为全局组件
      app.component(key, allGloablCom[key]);
    });
  },
};

2. 在src下的main.js中新增内容

// 其他引用
import globalComponent from "@/components/install.js";
const app = createApp(App);
// 注册自定义全局组件
app.use(globalComponent);
app.mount("#app");

测试效果

总结

1. 至此完成了项目构建的前期准备工作，后续的组件库样式研究将分批次整，欢迎各位指导交流分享。
2. 素材分享地址：
   • 夸克链接
   • 提取码：8pGe
3. 另外我也上传了素材内容到csdn的资源分享，位于文章顶部位置，也欢迎各位帮我点点下载关注。