新的故事

本系列文章将讲述一个小小的前端工程师创造属于自己的网站的故事...``或许也会经历从笨拙到得心应手，到再次跌倒，再一次次突破自己的过程，希望各位看官不吝赐教，一起成长

作为一个前端工程师，我有很多很多梦想，比如：

• 做一个属于自己的游戏
• 做一个属于自己的网站
• …

表达欲，创造欲曾经使我不断的在社区表达自己。虽然写文章，然后结识志同道合者真的是一件很幸福的事情，但是我依旧想去做一些更加浪漫的事情。

其实在本周之前，我写了这样一个规划：

哈哈，关于我要做的项目我做了马赛克处理~

其实，我一直在想，互联网兴起这些年，给我们的生活带来了什么？确实生活更加便利了，更加舒适了，但是是否也让我们的生活中少了一点“生活”。

• 我们借助短视频，可以轻松的杀时间
• 我们借助外卖，可以轻松的吃到离家几公里外的美食
• 我们借助社区，可以找寻到更多有共同爱好的同伴
• 我们借助购物软件，可以买到天南海北的商品
• …

互联网让世界更好了，但是整个世界的节奏好像越来越快，快得不极速奔跑就被甩在阴暗的角落，有人脱颖而出，有人步履维艰，有人把生活过成了诗，而有人又在沉沦中自我迷失。

在大学以及工作后的第一个年头里，我一直认为这是一个技术为王的世界，但是工作的越久，越觉得技术不应该是最核心的东西，这时候有人会说，业务才是王。

但是作为一个有思想的人，我认为，一切技术都要以人为本。当然，现在大型的互联网公司也是拿捏住里人的衣食住行，以及人的时间。但是，我想，通过互联网技术，我们可以做到更多美好的事。

还记得，小时候自己一个人在家，我打开电脑，打开 4399 可以玩到各种各样的小游戏，打开百度贴吧，可以看到各种各样的人在里面交流，打开视频网站可以看到死火海，让当时的我丢掉了孤独，沉浸在广阔世界的纸醉金迷。当时也在优酷看到了诸如敖厂长，砖家这种让人快乐的up主，嘿嘿，当时我也有了当一个up主为大家带来快乐的想法，可惜后来鸽了…

我还想，元宇宙这个概念最近很火，但是还很遥远，毕竟元宇宙在我眼里并不只是技术上的问题，当人们踏入一个虚拟世界时，那里的制度，那里的规则等社会性问题会更加的棘手。而当我们真正踏入虚拟的土地，使用虚拟的货币，购买虚拟的资产，大家对于那个世界各位有什么幻想？

一定是个乐园吧

然而，如果不是呢？未来一定会变好么？我们憧憬未来，但是我想现在的互联网如何发展，各个大厂如何打造如今的互联网，以及我们每一个消费者对于互联网的态度都会改变未来的那个世界。

我在上文规划图中 creative 和 romantic 两个词，也是表达我的想法，用技术做有创造性的业务，用技术去做独属于人类的那一份浪漫的事情。

上文的内容结构可能有一丝丝混乱，但是很多事情都是在混乱的状态下开始的，我下面这句话可以涵盖我的想法：

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨**虽然，我是一个没啥特色的程序猿，****但是，****用技术创造美好，这是我的一个梦想。**✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

规划

当然，说的热血无比，像极了少年漫，但是最后肯定是又可能失败的，于是我还是有一个规划：

• 技术栈全部采用我没有使用过的新技术
• 每周写文章（或者做视频）汇报工作进度

其中第一点不仅是为了提高难度，还是想如果失败了，我至少学习了很多很多新的技术，总有收获，学习能力肯定有所上升，知识的广度也会有所提升。

其次，至少这个系列文章写完，读者应该也可以创造一个自己的项目

第二点还是为了有一个 check 机制，让自己不偷懒。

☀️

从零开始的产品设计与落地，这个故事，我们一起开始吧！

本周工作总结

好家伙，这个题目就像是一个工作汇报，像极了每周写周报的各位～

最近两周的周末，基本都会加班，如果内容较少请见谅（最后我这周末来了一天半的公司...

首先确定了本次项目的技术栈：

• vue3
• vite
• nestjs
• graphql
• g6
• …

之后创建前端项目：

yarn create vite project-name --template vue 
1

之后引入 scss：

yarn add sass -S 
1

话说大家好不好奇，我引入的是 sass，为什么最后用的确是 scss，两者之间究竟有什么关系？

SASS（Syntactically Awesome Style Sheets）是一种由 Hampton Catlin 设计、Chris Eppstein 和 Natalie Weizenbaum 开发的样式表语言。 它是一种预处理器脚本语言，将被编译或解释为 CSS。 Sass Script 本身就是一种脚本语言。 它的 typing 规则是动态的。

SCSS 通常被称为 Sassy CSS，它是作为 SASS（Syntactically Awesome Style Sheets）的主要语法引入的，它建立在现有的 CSS 语法之上。 它使用分号和括号，如 CSS（级联样式表）。 SCSS 是 CSS 的超集，即所有 CSS 功能都将在 SCSS 中可用，并且包含 SASS（Syntactically Awesome Style Sheets）的一些功能。 SCSS 使任何 CSS 术语都有效。

安装 g6：

yarn add -s @antv/g6 
1

最近公司内项目我也尝试用了一下 g6，感觉可以覆盖我的需求

阅读 vue3 文档：

大概有1年半没有用过vue3...简单做点笔记

• 组合式 API 解决了什么问题？

对于一个逻辑，vue2 中的代码可能碎片式的分布在 data, methods, computed, watch 中，这使得理解和维护代码变得困难，逻辑的分离也可能掩盖许多潜在的问题。所以组合式 API 主要目的是把同一个逻辑关注点的代码组合在一起。

• setup 执行时机？

setup 的调用发生在 data property、computed property 或 methods 被解析之前，在 props 解析完成之后。

• ref 函数

ref 函数使任何响应式变量在任何地方起作用，并会将其包裹成一个带有 value 属性的对象。

• setup 中使用生命周期函数

组合式 API 上的生命周期钩子与选项式 API 的名称相同，但前缀为 on

• teleport

这个词本意就是远程传送的意思，其能力也和字面含义一致，其提供了一种干净的控制在 DOM 的哪个父节点下渲染 HTML 的手段，提供了某个组件的 UI 和他的逻辑解藕的能力，常见的场景可能有：弹窗，抽屉等等组件，因为弹窗一般逻辑在组件内部，但是其 UI 一般会插入在 body 下。

• 新增了足量的api：watchEffect, reactive,ref…

vue 变更

…

vue3 在我草草阅读完一遍文档后，感觉就是提升了复杂组件的可迭代性，以及解决了很多在 vue2 时期的痛点。

本周确实加班多，而且要提测了，狗命要紧，本周的课外任务就到这里～

下周目标是梳理需求，以及绘制原型以便进入前端页面的开发（迫不及待ing🍉），下周如果条件允许开个直播写代码也是极好的。