小人物

简单介绍

MrYu2020-10-21BriefNotesBriefNotes

介绍

开始全栈生活

写下这句话时，我给自己定了个方向：不只做「写页面的前端」，而是把一条完整链路走通——浏览器界面、服务端接口、小程序和 App。这篇算开篇，说说为什么这么想，以及按什么顺序走。

为什么要走全栈

前端做久了会撞到边界：数据拿不到、接口要排期、首屏还是慢，只会等别人就很难再往前一步。全栈不是取代后端，而是让自己能把想法完整跑通——定义接口、写服务、部署，验证一件事不用先拉一个会。

再加上「端」在变多：浏览器、微信、手机上都要同一份业务，每多一个端重写一遍成本会失控，多端于是也进了路线。

技术版图

HTML / CSS / JS：地基

这块听着没意思，但后面所有的「顺手」都来自这里。布局、盒模型、事件循环、异步只停在「能跑就行」，进到框架里就会变成莫名其妙的坑。我习惯先用原生写一遍，再换框架写一遍，看是框架帮了忙，还是遮住了问题。

Vue 生态：把界面做成工程

Vue 解决的是规模化：组件怎么拆、状态放哪、路由怎么组织、样式怎么隔离。写一个页面不难，难的是半年后还有人愿意改。

// 一个最小的组合式 API 组件，状态和视图放在一起更好读
import { ref, computed } from 'vue'

const count = ref(0)
const double = computed(() => count.value * 2)

先用 Options API 跑起来，再逐步换 Composition API 抽逻辑，不必一上手就上全套脚手架。

Node.js：从「调接口」到「造接口」

真正有全栈感，是第一次自己写完接口、前端调通那一刻。Node 的好处是语言不用切换，同一套 JS 思维继续用。

npm init -y
npm i express

const express = require('express')
const app = express()

app.get('/api/hello', (req, res) => {
  res.json({ msg: 'hello from node' })
})

app.listen(3000)

但坑比想象中多：跨域、鉴权、日志、错误处理、进程守护，都得补课。

小程序：另一套运行环境

值得学的不是 API，而是它和 Web 的差异：没有完整的 DOM、包体积有硬约束、生命周期模型不一样。写过再看「跨端」就不觉得是魔法。

App 跨端：一套代码多端

移动端我先想清楚「跨端在跨什么」——渲染层、原生能力，还是构建产物。想明白再选技术栈，就不会被宣传语带着走。

学习路线的框架

整条路线我压成四段，每次只专注一段：

  1. 基础：HTML / CSS / JS，能不看框架写出交互。
  2. 工程化：模块化、构建、Lint、Git 流程，让代码能被别人接手。
  3. 服务端：接口设计、数据库、部署，能独立上线一个小服务。
  4. 多端：小程序与 App，把同一份业务复用到不同入口。

这样排的好处是每段都长在上一段的地基上，不会悬空。

vuepress 创建自己的开发者文档 静态图片引用问题解决

笔记多了以后，需要一个自己可控的文档站。VuePress 是我用下来最省事的一种：Markdown 写完就能成站。

  1. 安装（Node 版本建议跟官网对齐，避免构建时踩版本坑）
npm install -D vuepress

顺手在 package.json 里加两个脚本，日常基本够用：

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

  1. VuePress 遵循「约定优于配置」：入口是 docs，文章放 docs 下，静态资源放 docs/.vuepress/public，要改再进 docs/.vuepress/config.js。

  2. 引用静态图片要先理解 public：构建时它被原样拷到站点根目录，不打包、不加 hash，所以 public/img/001.png 对应的就是 /img/001.png。站点常部署在子路径下（比如 GitHub Pages 的仓库名），直接写会 404，得靠 $withBase 补前缀。目录如下：

docs
├── .vuepress
│   └── public
│       └── img
│           └── 001.png
└── guide
    └── introduce.md

在 md 文件中可以使用下面的方式应用静态图片：

<img :src="$withBase('/img/001.png')" alt="mixureSecure">
mixureSecure

能写 :src 是因为 VuePress 把 Markdown 当 Vue 模板编译，$withBase 挂在 Vue 实例上，会按 base 拼出最终路径，本地 dev 和子路径部署都能正常显示。

写在最后

这篇更像路线图而非总结。后面会按这几块陆续记笔记，写给自己看。

ON THIS PAGE