乐趣区

关于前端:实战独立项目几行字从想法到上线全过程

jiezi

想法

最开始是看到 毒鸡汤 的我的项目（作者本人的域名曾经不能拜访，当初本人为了学习部署，也搞了一份，网址：毒），感觉很乏味，简略又乏味

起初看到 今日诗词，这不是差不多吗，无非是提供了 API 调用罢了。

这两则的 star 数都超过了 1000+，这么简略的利用居然这么受欢迎，有点艳羡嫉妒感

因为好奇，接触了 vite、tailwindcss 等新技术，就想着用 vite 搭建一个 react 利用，款式用 tailwindcss 定制，于是就想要做个简略的利用，起初脑洞越想越大，就有了后续的布局，间接说布局

布局

这个我的项目从想法、画原型、写前端、做设计、部署、搞后端、后盾一整套，从想法到实现

我最截止到写这篇文章时的布局是：

第一阶段：提出想法、画出原型、做好一个动态页面、部署到线上，即动态独立我的项目

第二阶段：用 vite + react 开发此我的项目，并增加性能点，如可选主题色、分享卡片等性能

第三阶段：数据不能裸泳，配置后端性能以及后盾编辑性能

第四阶段：将其做成 Flutter 版本

第五阶段：将其做成小程序版本

这五个阶段笔者不会一口气做进去，有些货色只是想法，具体实施时艰难必定比设想中多的很

收集素材

之前混知乎，也关注了几个对于句子的问题，例如 你读过的最有力量的一段文字是什么？、有哪些适宜摘抄的句子，有些句子很喜爱，有些能受启发，与其这样，不如把有些高赞的句子收集起来，也做成像 毒鸡汤、今日诗词这样利用

于是乎，每天去知乎上手动收录素材，加上本人以前的库存，大略收集了 100 多条数据（写于第一阶段），

画原型

次要以简洁为主，能不要的货色通通不要，大抵画出了这样

写页面

初始化页面 

npm init -y

为什么要弄性能？因为咱们要用到 tailwind，它官网反对用这种形式，等 build 的时候会 tree-shake，能缩小很多不必要的代码

后续可看 官网装置指南

通过 npm 装置 Tailwind

npm install tailwindcss@latest postcss@latest autoprefixer@latest

作为 PostCSS 插件来增加 Tailwind

// postcss.config.js
module.exports = {
  plugins: {tailwindcss: {},
    autoprefixer: {},},
}

创立 tailwindcss 配置文件 

npx tailwindcss init

这将会在您的工程根目录创立一个最小的 tailwind.config.js 文件。

// tailwind.config.js
module.exports = {purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {extend: {},
  },
  variants: {},
  plugins: [],}

新建 tailwind.css

引入 tailwind 代码 

@tailwind base;
@tailwind components;
@tailwind utilities;

新建 index.html

在代码中引入 css、以及编写 html 代码

这里我不细讲，因为花了不少工夫，参数太多，大多数是看到合乎本人原型的就拿来，而后删删改改

新建 data.js

之前收集了不少素材，将其导入到 data.js 中，并且编写以下逻辑，浏览器中读过的句子保留在本地存储里。句子是随机生成，如果随机生成的句子在本地存储中，那就从新生成。当所有的句子都存在本地存储中的话，就清空所有的本地存储。

因为我的内容有些不是一句话，而是一个数组，所有在插入内容时也须要判断，依据不同的状况做出不同的成果

这里遇到一些问题记录下，太久没有写原生，插入 html 的 api 遗记了，innerHTML 和 appendChild 的区别遗记了

innerHTML：能够插入一段 html，例如 <p> 我是 p 标签 </p>

appendChild：在内容末插入节点，要先创立标签，在插入

封装成三个办法，即拉取数据，存本地存储，插入网页

做设计

参考了一些他人做 logo 的倡议，举荐比拟多的是 logo 神器，我依照提醒做下来是这样的设计

我表示遗憾，从集体审美上来看，这种设计太傻瓜了，所以本人用 Photoshop 做了一个，

SEO 优化

favicon 解决

在 logo 中扣出 几 字，而后上传至 https://favicon.io/ 上，导出 favicon，

设置 header 信息 

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title> 几行字 </title>
  <meta
    name="description"
    content="几行字给你和煦、几行字给你激励、几行字给你灵感"
  />
  <meta name="keywords" content="几行字，文案，几行世界" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta property="og:title" content="几行字" />
  <meta property="og:image" content="./favicon.ico" />
  <meta property="og:site_name" content="几行字" />
  <meta
    property="og:description"
    content="几行字，几行字给你和煦、几行字给你激励、几行字给你灵感"
  />
  <link rel="alternate icon" type="image/x-icon" href="favicon.ico" />
  <link rel="stylesheet" href="style.css" />
</head>

也写不出什么关键字来，先这样，前期有灵感了再补上

部署

笔者之前写过利用 Github Actions 部署前端，也胜利部署过 毒鸡汤，大抵流程如下

  1. 申请阿里云容器镜像服务

  2. 将代码推到 Github 仓库，触发 Github Actions

    1. Github Actions 中登录 阿里云容器镜像服务，将代码打包成一个镜像，并推到集体镜像站远端
    2. 再登录服务器，执行拉取镜像脚本

次要逻辑是这样，但执行起来很麻烦，还不如间接部署来着算，什么间接部署，就是本地部署到线上，最有用的当属 now，也就是当初的 vercel，笔者之前部署过好几个我的项目，所以驾轻就熟

间接部署上线：https://jihangzi-static.verce…

在阿里云做一下映射：https://jihangzi.azhubaby.com/

第一阶段到此就告一段落

退出移动版