ps：记录我参加VueConf 24 旅途后的一些内心感想！！！😀😀😀😀😀

首先最先开始的是赵锦江老师对vuejs 10年的历程和通过一些小故事引出关于开源方面的一些建议，我对此做一个简单的总结：

做一个成功的开源项目，首先要有一个开阔的视野，对自己想做的事情有一个明确的认识,然后尽全力的去拉拢自己项目的用户群体，对网络上的流言蜚语不要在意，专心做好自己的事情，然后要做好自己生活工作上与开源上的平衡。

Zaylen大约 3 分钟

git 如何将一个完全不相关的项目推送到远程仓库的一个新分支

背景

突然有一个想法，就是想将我之前写过的 demo 项目也放到 github 上，但是想让他创建一个新的分支保存。以下对其做一个简单的记录.

流程

1.先到远程仓库创建一个新的分支

Zaylen原创大约 2 分钟

翻转时钟动画的实现

翻转时钟动画实现

1. 背景

今天遇到一个特殊的需求，就是需要实现类似于翻转式的时钟动画，他的效果大概是这样子的。

首先老惯例，先到网上找找有没有插件 😁😁😁😁，找了一圈后发现没有能满足定制化需求的插件。只能自己开干了。

Zaylen原创大约 3 分钟

实现表单文字两端对齐效果

css 实现表单文字对齐效果

1.场景

表单在我们编程中是一个很常见的需求，我们可以直接使用 UI 框架如element-UI就能很快速的实现一个表单

表单.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实现表单文字对齐效果</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
    <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="//cdn.jsdelivr.net/npm/element-plus"></script>
    <style>
      .container-box {
        width: 620px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="container-box">
        <el-form :model="form" label-width="120px">
          <el-form-item label="姓名">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.age" />
          </el-form-item>
          <el-form-item label="兴趣爱好">
            <el-input v-model="form.hobby" />
          </el-form-item>
          <el-form-item label="最喜欢的食物">
            <el-input v-model="form.favoriteFood" />
          </el-form-item>
          <el-form-item label="最喜欢的颜色">
            <el-input v-model="form.favoriteColor" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary">提交</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <script>
      const App = {
        data() {
          return {
            form: {
              name: '',
              age: '',
              hobby: '',
              favoriteFood: '',
              favoriteColor: '',
            },
          }
        },
      }

      const app = Vue.createApp(App)
      app.use(ElementPlus)
      app.mount('#app')
    </script>
  </body>
</html>

Zaylen大约 2 分钟

nestJs学习笔记

1.什么是 Nestjs

Nestjs 是一个用于构建高效可扩展的一个基于 nodejs 的服务端应用程序开发框架（写后台的）

特点：

完全支持 typeScript
结合了 AOP 面向切面的编程方式
封装了 Express/Fastify，使得开发者可以自由的使用适用于底层平台的无数的第三方模块

2.控制反转-依赖注入

IOC

Inversion of Control 控制反转，是高层模块不应该依赖底层模块，二者都应该依赖其抽象，抽象不应该依赖细节，细节应该依赖抽象

Zaylen大约 3 分钟

vue3集成成tailwindcss

vue3集成tailwindcss

1.创建vue3工程

pnpm create vue@latest

2.安装tailwindcss依赖

pnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest

3.初始化tailwind配置文件

pnpm tailwindcss init -p

Zaylen小于 1 分钟

Canvas

1.Canva 简介

Canvas API（画布）是在 HTML5 中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用 JavaScript 操作的位图（bitmap）。

Canvas 对象表示一个 HTML 画布元素 <canvas>它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作

2.第一个 Canvas

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title {
      }
      .canvas-style {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <!-- 

    id: 标识元素的唯一性
    width: 画布的宽度
    height: 画布的高度
   -->
    <div class="title">绘制的图形：</div>
    <canvas id="canvas" width="600" height="400" class="canvas-style"> 当前浏览器不支持canvas </canvas>
    <script>
      // 1. 找到画布
      var canvas = document.querySelector('#canvas')

      // 判断是否支持canvas
      if (!canvas.getContext) {
        console.log('当前浏览器不支持canvas, 请下载最新版')
      }

      // 2. 获取画笔，上下文对象
      var ctx = canvas.getContext('2d')
      // 3. 绘制图形
      // 3.绘制矩形fillRect(位置x, 位置y,宽度， 高度)
      ctx.fillRect(100, 100, 200, 200)
    </script>
  </body>
</html>

Zaylen大约 7 分钟

面试记录一

ps：经历的大半个月的找工作，终于约到了我的第一个面试了,从最先开始的拿着我那份什么东西写上去的菜鸟简历，投，没有任何响应 😅😅😅, 到后面经过同学，朋友的指导，只把自己想从事的工作岗位相关的东西写上总算是有 hr 愿意搭理我，到如愿约到我第一面试,中间虽有艰辛，但结果还是好的 😃😃😃，首选还是感谢 hr 和公司给了我一个面试机会,虽然没抱太大机会了，但是能走出第一步我已经很满足了，下面就对我这次面试作一个简单的记录.

1.笔试题

首先是笔试部分，都是些很基础的知识，但是由于我记忆不够牢固,还容易记混，很多东西只是有个印象，离开电脑，没有代码提示就大脑短路了 😔😔😔😔

Zaylen大约 11 分钟

vue3实现掘金博客文章页

vue3 实现掘金博客文章页

1.开始

1.安装必要插件

pnpm install prismjs marked vite-plugin-prismjs front-matter @types/marked @types/prismjs

prismjs:
- 是一个轻量级、可扩展的语法代码高亮插件
- 官网：棱镜 (prismjs.com)
marked:
- 是一个 JavaScript 编写的全功能 Markdown 解析和编译器。 marked 的目的是快速的编译超大块的 Markdown 文本而不必担心结果会出乎意料或者花费很长时间
- 官网：标记的文档 (marked.js.org)
vite-plugin-prismjs:
- 快速使用 prismjs 的 vite 插件
- https://www.npmjs.com/package/vite-plugin-prismjs
front-matter：
- 用于解析 front-matter 的插件
- https://www.npmjs.com/package/front-matter
@types/prismjs:prismjs 的 typeScirpt 类型支持
@types/marked:marked 的 typeScript 类型支持

2.配置 vite.config.js

Zaylen原创大约 5 分钟

vue3学习笔记

vue3 学习笔记

1.bem 架构

bem 架构即Block（块层）,element（元素层），modifier（修饰符层），是由 Yandex 团队提出的一种 css 命名方法.

.block-name__element-name--modifier-name--modifier-value {}

遵循以下原则：

使用__两个下划线将块元素与名称分开
使用--两个破折号分隔元素名称及修饰符
一切样式都是一个类，不能嵌套

Zaylen大约 26 分钟

跳转到:

ZayLenの个人博客

VueConf 24 之旅