零基础AI全栈开发系列 — 知识点分类学习资料

全栈开发入门 管理员 2026年06月23日 174 次阅读 7766 字 约 26 分钟

视频教程：BV1uq421P71e

来源：B站UP主「三分钟实验室」(UID: 260736087)
合集链接：https://space.bilibili.com/260736087/upload/video
视频总数：11个系列视频 + 1个超长综合视频
总播放量：258.1万（系列）+ 90.1万（综合）
学习路径：HTML/CSS → JavaScript → Vue → HTTP/Axios → Node.js/MongoDB → AI编程工具 → uniapp多端开发 → 数据库

目录

- 1. HTML基础 - 2. CSS基础 - 3. JavaScript基础 - 4. Vue.js 入门 - 5. Vue3 深入 - 6. HTTP协议与Axios - 7. Node.js 后端开发 - 8. MongoDB 数据库 - 9. MySQL/SQL 数据库 - 10. Cursor AI编程 - 11. Devbox 云开发环境 - 12. AI编程工具横向对比 - 13. uniapp 跨端开发 - 14. Docker 容器化 - 15. K8S 基础 - 16. Sealos 云平台 - 17. 开发环境搭建 - 18. Git/GitHub 版本控制

第一部分：前端基础

对应视频

视频BV号时长播放量
AI全栈开发之 HTML+CSS 零基础入门教程<a href="https://www.bilibili.com/video/BV1uq421P71e" rel="nofollow noopener">BV1uq421P71e</a>32:1914.1万
AI全栈开发之 JavaScript 零基础入门教程教学<a href="https://www.bilibili.com/video/BV18M4m1C7tD" rel="nofollow noopener">BV18M4m1C7tD</a>17:256.7万

1. HTML基础

来源视频：AI全栈开发之 HTML+CSS 零基础入门教程 (BV1uq421P71e)

1.1 核心概念

知识点说明重要程度
HTML是什么超文本标记语言，用于构建网页结构★★★★★
标签(Tag)HTML的基本组成单位，用尖括号包裹★★★★★
文档结构<!DOCTYPE html> → <html> → <head> + <body>★★★★★
块级元素 vs 行内元素div(块级) vs span(行内)的区别★★★★
表单(form)用户输入数据的容器★★★★
链接与图片<a> 标签和 <img> 标签★★★★

1.2 常用HTML标签

<!-- 文档结构 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 标题标签 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>

    <!-- 段落与文本 -->
    <p>段落文本</p>
    <span>行内文本</span>
    <div>块级容器</div>

    <!-- 链接与图片 -->
    <a href="https://example.com">链接文字</a>
    <img src="image.jpg" alt="图片描述">

    <!-- 列表 -->
    <ul>
        <li>无序列表项</li>
    </ul>
    <ol>
        <li>有序列表项</li>
    </ol>

    <!-- 表单 -->
    <form>
        <input type="text" placeholder="请输入">
        <button type="submit">提交</button>
    </form>
</body>
</html>

1.3 弹幕高频问题与解答

问题解答
HTML开发工具用什么？记事本即可，推荐VS Code
为什么打开HTML是空白的？检查文件编码是否为UTF-8，检查标签是否正确闭合
div和span有什么区别？div是块级元素独占一行，span是行内元素不换行
form是什么？表单标签，用于收集用户输入数据

2. CSS基础

来源视频：AI全栈开发之 HTML+CSS 零基础入门教程 (BV1uq421P71e)

2.1 核心概念

知识点说明重要程度
CSS是什么层叠样式表，控制网页外观★★★★★
选择器标签选择器、类选择器(.class)、ID选择器(#id)★★★★★
盒模型margin → border → padding → content★★★★★
布局方式Flexbox弹性布局、Grid网格布局★★★★
颜色与背景color、background、渐变★★★★
定位relative(相对)、absolute(绝对)★★★★

2.2 核心CSS属性速查

/* 选择器 */
.tag { }          /* 类选择器 */
#id { }           /* ID选择器 */
div p { }         /* 后代选择器 */

/* 盒模型 */
.box {
    margin: 10px;        /* 外边距 */
    border: 1px solid;   /* 边框 */
    padding: 10px;       /* 内边距 */
    width: 200px;        /* 内容宽度 */
    height: 100px;       /* 内容高度 */
}

/* Flexbox布局 */
.flex-container {
    display: flex;
    justify-content: center;  /* 水平居中 */
    align-items: center;      /* 垂直居中 */
}

/* 渐变背景 */
.gradient {
    background: linear-gradient(90deg, rgb(113, 65, 168), rgb(44, 114, 251));
}

/* 阴影 */
.shadow {
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    /* 参数：水平偏移 垂直偏移 模糊半径 颜色 */
}

/* 响应式单位 */
.responsive {
    width: 80vw;   /* 视口宽度的80% */
    font-size: 2em; /* 相对于父元素 */
}

2.3 弹幕高频问题与解答

问题解答
CSS样式太多记不住怎么办？CSS全靠记忆，善用AI工具辅助查询，常用的就那几个
加空格字往右移了？用padding代替空格，可以让光标也跟着右移
为什么背景色不显示？检查是否未切换英文输入法、选择器是否匹配
居中怎么做？Flex布局：justify-content: center; align-items: center;
这里可以写80vw吗？可以，80vw表示视口宽度的80%，自适应屏幕

2.4 HTML与CSS的关系（弹幕最佳比喻）

弹幕原话："如果html相当于起模，css相当于贴图，js相当于骨骼动画"
— 来自 BV1FPCzYdEeH 弹幕
角色技术作用
结构/骨架HTML定义页面内容和结构
样式/外观CSS控制页面视觉呈现
行为/交互JavaScript实现页面动态功能

3. JavaScript基础

来源视频：AI全栈开发之 JavaScript 零基础入门教程教学 (BV18M4m1C7tD)

3.1 核心概念

知识点说明重要程度
变量声明var、let、const 的区别★★★★★
数据类型String、Number、Boolean、Array、Object★★★★★
函数函数声明与调用，参数和返回值★★★★★
条件判断if/else、三目运算符★★★★★
循环for、while★★★★
DOM操作获取元素、修改内容、事件监听★★★★★
对象与类Object字面量、class语法★★★★

3.2 核心语法速查

// 变量声明
let name = "hello";       // 可变变量
const PI = 3.14;          // 不可变常量

// 数据类型
let str = "字符串";
let num = 42;
let bool = true;
let arr = [1, 2, 3];
let obj = { name: "张三", age: 18 };

// 函数
function greet(name) {
    return "Hello, " + name;
}

// 箭头函数
const add = (a, b) => a + b;

// 条件判断
let score = 85;
if (score >= 90) {
    console.log("优秀");
} else if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}

// 三目运算符
let result = score >= 60 ? "及格" : "不及格";

// 循环
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

// DOM操作
let el = document.getElementById("app");     // 获取元素
el.innerHTML = "新内容";                      // 修改内容
el.addEventListener("click", function() {     // 事件监听
    alert("被点击了！");
});

// 与或逻辑（弹幕提到的数字电路基础）
let a = true && false;  // 与逻辑：都为true才为true
let b = true || false;  // 或逻辑：有一个true就为true

3.3 对象与类

// 对象字面量
let person = {
    name: "张三",
    age: 18,
    sayHello: function() {
        console.log("我是" + this.name);
    }
};

// 类（面向对象）
class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name + "发出声音");
    }
}

let cat = new Animal("猫");
cat.speak(); // 猫发出声音

3.4 弹幕高频问题与解答

问题解答
JS和其他语言有什么共同点？所有语言都以C语言作为基础开发，数据类型也一样，只是规则不同
对象/类是什么？类似于C语言的结构体，把多个相关数据组织在一起
var和let的区别？let有块级作用域更安全，推荐用let和const
可以先使用后声明吗？var可以（变量提升），let/const不行
和或逻辑是什么？数字电路的基础，&&两个都真才真，||一个真就真

第二部分：前端框架

对应视频

视频BV号时长播放量
十分钟入门vue<a href="https://www.bilibili.com/video/BV1gU411Z7pp" rel="nofollow noopener">BV1gU411Z7pp</a>12:5829.2万
AI全栈开发之零基础Vue3教程教学<a href="https://www.bilibili.com/video/BV1W1421173W" rel="nofollow noopener">BV1W1421173W</a>26:1810.5万

4. Vue.js 入门

来源视频：十分钟入门vue (BV1gU411Z7pp)

4.1 核心概念

知识点说明重要程度
Vue是什么渐进式JavaScript框架，用于构建用户界面★★★★★
响应式数据数据变化自动更新视图★★★★★
模板语法{{ }} 插值表达式★★★★★
指令v-if、v-for、v-bind、v-on、v-model★★★★★
组件化将页面拆分为独立可复用的组件★★★★
npmNode包管理器，用于安装Vue等依赖★★★★

4.2 Vue核心语法

<div id="app">
    <!-- 插值表达式 -->
    <h1>{{ message }}</h1>

    <!-- v-if 条件渲染 -->
    <p v-if="isVisible">这段文字可以根据条件显示/隐藏</p>

    <!-- v-for 列表渲染 -->
    <ul>
        <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>

    <!-- v-model 双向绑定 -->
    <input v-model="inputText" placeholder="输入内容">
    <p>你输入了：{{ inputText }}</p>

    <!-- v-on 事件绑定 -->
    <button v-on:click="handleClick">点击我</button>
    <!-- 简写 -->
    <button @click="handleClick">点击我</button>

    <!-- v-bind 属性绑定 -->
    <img v-bind:src="imageUrl">
    <!-- 简写 -->
    <img :src="imageUrl">
</div>

// Vue 3 创建应用
const { createApp, ref, reactive } = Vue;

createApp({
    setup() {
        const message = ref("Hello Vue!");
        const isVisible = ref(true);
        const inputText = ref("");
        const list = ref([
            { id: 1, name: "苹果" },
            { id: 2, name: "香蕉" },
            { id: 3, name: "橘子" }
        ]);

        const handleClick = () => {
            alert("按钮被点击！");
        };

        return {
            message, isVisible, inputText, list, handleClick
        };
    }
}).mount("#app");

4.3 Vue项目创建流程

# 1. 安装Node.js（推荐使用nvm管理版本）
nvm install 20

# 2. 创建Vue项目
npm create vue@latest

# 3. 进入项目目录
cd my-vue-app

# 4. 安装依赖
npm install

# 5. 启动开发服务器
npm run dev

4.4 弹幕高频问题与解答

问题解答
npm命令无法识别？需要先安装Node.js，推荐用nvm管理版本
v-if是做什么的？条件渲染指令，根据数据状态决定是否渲染DOM元素
动态绑定是什么？根据数据状态来动态创建/更新，而不是直接写死值
Vue和HTML的关系？Vue在HTML基础上增加了数据绑定和组件化能力

5. Vue3 深入

来源视频：AI全栈开发之零基础Vue3教程教学 (BV1W1421173W)

5.1 Vue3 核心API

API说明使用场景
ref()创建基本类型的响应式数据字符串、数字、布尔值
reactive()创建对象类型的响应式数据复杂对象、数组
computed()计算属性，基于响应式数据自动计算派生状态
watch()侦听器，监听数据变化执行副作用异步请求、日志
onMounted()生命周期钩子，组件挂载后执行初始化数据请求

5.2 Composition API 示例

import { ref, reactive, computed, watch, onMounted } from 'vue';

export default {
    setup() {
        // ref: 基本类型响应式
        const count = ref(0);

        // reactive: 对象类型响应式
        const state = reactive({
            name: "张三",
            todos: []
        });

        // computed: 计算属性
        const doubleCount = computed(() => count.value * 2);

        // watch: 侦听器
        watch(count, (newVal, oldVal) => {
            console.log(`count从${oldVal}变为${newVal}`);
        });

        // 生命周期
        onMounted(() => {
            console.log("组件已挂载");
            // 通常在这里发起数据请求
        });

        // 方法
        const increment = () => {
            count.value++;
        };

        return { count, state, doubleCount, increment };
    }
};

5.3 Vue组件结构（单文件组件 .vue）

<template>
    <!-- HTML模板 -->
    <div class="my-component">
        <h1>{{ title }}</h1>
        <button @click="changeTitle">修改标题</button>
    </div>
</template>

<script setup>
// JavaScript逻辑
import { ref } from 'vue';

const title = ref("Hello Vue3");

const changeTitle = () => {
    title.value = "标题已修改";
};
</script>

<style scoped>
/* CSS样式（scoped表示仅作用于当前组件） */
.my-component {
    padding: 20px;
    text-align: center;
}
</style>

5.4 Vue2 vs Vue3 对比

特性Vue2 (Options API)Vue3 (Composition API)
数据声明data() 函数返回对象ref() / reactive()
方法methods: {}普通函数
计算属性computed: {}computed()
生命周期mounted() 等钩子onMounted() 等
代码组织按选项类型分组按逻辑功能分组

第三部分：网络通信

对应视频

视频BV号时长播放量
Axios 前后端对接教程｜HTTP<a href="https://www.bilibili.com/video/BV1rM4m117Ry" rel="nofollow noopener">BV1rM4m117Ry</a>05:5213.8万

6. HTTP协议与Axios

来源视频：Axios 前后端对接教程 (BV1rM4m117Ry)

6.1 HTTP基础概念

知识点说明重要程度
HTTP请求方法GET(获取)、POST(创建)、PUT(更新)、DELETE(删除)★★★★★
请求与响应客户端发送请求，服务端返回响应★★★★★
状态码200(成功)、404(未找到)、500(服务器错误)★★★★
请求头/响应头Content-Type、Authorization等★★★★
JSON数据格式前后端数据交换的标准格式★★★★★
API/接口服务端提供的数据访问入口（URL地址）★★★★★

6.2 Axios使用方法

// 安装
// npm install axios

// 导入
import axios from 'axios';

// GET请求 — 获取列表
axios.get('https://api.example.com/get_list')
    .then(response => {
        console.log(response.data);  // 获取数据
    })
    .catch(error => {
        console.error(error);        // 错误处理
    });

// POST请求 — 添加数据
axios.post('https://api.example.com/add', {
    name: "新项目",
    description: "描述信息"
})
    .then(response => {
        console.log("添加成功", response.data);
    });

// PUT请求 — 更新数据
axios.put('https://api.example.com/update/1', {
    name: "更新后的名称"
});

// DELETE请求 — 删除数据
axios.delete('https://api.example.com/delete/1');

6.3 前后端对接流程

┌──────────────┐     HTTP请求      ┌──────────────┐
│              │  ───────────────→  │              │
│   前端(Vue)  │                    │  后端(Node)  │
│              │  ←───────────────  │              │
└──────────────┘     JSON响应      └──────────────┘

1. 前端通过Axios发送HTTP请求到后端API地址
2. 后端接收请求，处理业务逻辑
3. 后端返回JSON格式的响应数据
4. 前端接收数据，更新页面显示

6.4 弹幕高频问题与解答

问题解答
接口地址是什么？后端提供的URL，前端通过这个地址获取/提交数据
接口不能用了怎么办？说明后端已更新，可以跟着教程自己写后端接口
JSON是什么？JavaScript Object Notation，前后端数据交换的标准格式

第四部分：后端开发

对应视频

视频BV号时长播放量
20分钟入门 Node.js ｜后端开发｜全栈开发｜Mongo DB<a href="https://www.bilibili.com/video/BV1vVyeYMEAs" rel="nofollow noopener">BV1vVyeYMEAs</a>21:5127.7万
20分钟入门数据库<a href="https://www.bilibili.com/video/BV1Mm5kzHEWA" rel="nofollow noopener">BV1Mm5kzHEWA</a>21:4813.6万

7. Node.js 后端开发

来源视频：20分钟入门 Node.js (BV1vVyeYMEAs)

7.1 核心概念

知识点说明重要程度
Node.js基于Chrome V8引擎的JavaScript运行时★★★★★
ExpressNode.js最流行的Web框架★★★★★
路由(Routing)URL路径与处理函数的映射★★★★★
中间件请求处理管道中的函数★★★★
API开发创建RESTful接口供前端调用★★★★★
云函数/Serverless无需管理服务器的后端方案★★★

7.2 Express基础示例

// 安装: npm install express

const express = require('express');
const app = express();
const port = 3000;

// 中间件：解析JSON请求体
app.use(express.json());

// 中间件：跨域支持
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

// GET接口 — 获取列表
app.get('/get_list', (req, res) => {
    res.json({
        code: 200,
        data: [
            { id: 1, name: "任务一" },
            { id: 2, name: "任务二" }
        ]
    });
});

// POST接口 — 添加数据
app.post('/add', (req, res) => {
    const { name } = req.body;
    // 处理添加逻辑...
    res.json({ code: 200, message: "添加成功" });
});

// PUT接口 — 更新数据
app.put('/update/:id', (req, res) => {
    const { id } = req.params;
    const { name } = req.body;
    // 处理更新逻辑...
    res.json({ code: 200, message: `更新${id}成功` });
});

// DELETE接口 — 删除数据
app.delete('/delete/:id', (req, res) => {
    const { id } = req.params;
    // 处理删除逻辑...
    res.json({ code: 200, message: `删除${id}成功` });
});

// 启动服务器
app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

7.3 后端项目结构

my-server/
├── package.json          # 项目配置和依赖
├── node_modules/         # 依赖包（npm install自动生成）
├── index.js              # 入口文件（服务器启动）
├── routes/               # 路由目录
│   └── api.js            # API路由定义
├── models/               # 数据模型
│   └── user.js           # 用户模型
└── config/               # 配置文件
    └── db.js             # 数据库连接配置

7.4 弹幕高频问题与解答

问题解答
Node.js和JavaScript什么关系？Node.js让JavaScript可以在浏览器外运行，用于写后端
服务器一直在starting？可能是网络问题，等10分钟左右；或检查端口是否被占用
serverless是什么？无服务器架构，用的时候才启动按需计费，降低运维成本
域名是什么？服务器的"网址"，方便用户记忆和访问

8. MongoDB 数据库

来源视频：20分钟入门 Node.js (BV1vVyeYMEAs)

8.1 核心概念

知识点说明重要程度
MongoDBNoSQL文档数据库，存储JSON格式数据★★★★★
集合(Collection)类似于SQL的表(Table)★★★★★
文档(Document)类似于SQL的行(Row)，JSON格式★★★★★
字段(Field)文档中的键值对★★★★★
_idMongoDB自动生成的唯一标识★★★★
MongooseNode.js的MongoDB对象建模工具★★★★

8.2 MongoDB vs MySQL 对比

对比项MongoDBMySQL
数据模型文档型(类似JSON)关系型(表格)
查询语言MQL(类似JSON)SQL
灵活性字段可动态增减需预先定义表结构
适用场景快速原型、灵活数据结构事务性强、数据关系复杂
在课程中前期使用后期补充(第11期)

8.3 Node.js 连接 MongoDB 示例

// 安装: npm install mongoose

const mongoose = require('mongoose');

// 连接数据库
mongoose.connect('mongodb://localhost:27017/mydb');

// 定义数据模型（Schema）
const todoSchema = new mongoose.Schema({
    title: String,
    completed: Boolean,
    createdAt: { type: Date, default: Date.now }
});

const Todo = mongoose.model('Todo', todoSchema);

// CRUD 操作
// 创建
const newTodo = new Todo({ title: "学习Node.js", completed: false });
await newTodo.save();

// 查询
const todos = await Todo.find({});
const todo = await Todo.findById("some_id");

// 更新
await Todo.findByIdAndUpdate("some_id", { completed: true });

// 删除
await Todo.findByIdAndDelete("some_id");

9. MySQL/SQL 数据库

来源视频：20分钟入门数据库 (BV1Mm5kzHEWA)

9.1 核心概念

知识点说明重要程度
关系型数据库数据以表格形式存储，表之间有关系★★★★★
SQL语言结构化查询语言，操作数据库的标准★★★★★
表(Table)数据的结构化存储单元★★★★★
主键(Primary Key)唯一标识每条记录的字段★★★★★
外键(Foreign Key)建立表与表之间关系的字段★★★★
范式数据库设计规范（第一、第二、第三范式）★★★

9.2 SQL基础语法

-- 创建数据库
CREATE DATABASE mydb;
USE mydb;

-- 创建表
CREATE TABLE employees (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) UNIQUE,
    department VARCHAR(50),
    salary DECIMAL(10, 2),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- 插入数据
INSERT INTO employees (name, email, department, salary)
VALUES ('张三', 'zhangsan@example.com', '技术部', 15000.00);

-- 查询数据
SELECT * FROM employees;                          -- 查询所有
SELECT name, salary FROM employees;                -- 查询指定列
SELECT * FROM employees WHERE department = '技术部'; -- 条件查询
SELECT * FROM employees ORDER BY salary DESC;      -- 排序
SELECT * FROM employees LIMIT 10;                  -- 限制条数

-- 更新数据
UPDATE employees SET salary = 18000.00 WHERE id = 1;

-- 删除数据
DELETE FROM employees WHERE id = 1;
-- 弹幕梗：把蔡坤从员工表叉出去

-- 聚合查询
SELECT department, COUNT(*) as count, AVG(salary) as avg_salary
FROM employees
GROUP BY department;

-- 多表联查
SELECT e.name, d.department_name
FROM employees e
JOIN departments d ON e.department_id = d.id;

9.3 数据库三大范式

范式要求示例
第一范式(1NF)字段不可再分（原子性）地址应拆为省、市、区
第二范式(2NF)非主键字段完全依赖主键消除部分依赖
第三范式(3NF)非主键字段不能传递依赖消除传递依赖

9.4 弹幕高频问题与解答

问题解答
数据库和Excel有什么区别？数据库支持并发访问、事务处理、关系查询，适合程序化操作
什么是第三范式？数据库设计规范，确保数据不冗余（弹幕："那为什么是第三范式了？"）
SQL难学吗？基础增删改查很简单，复杂查询需要多练习

第五部分：AI编程工具

对应视频

视频BV号时长播放量
一行代码不写搞定开发和上线｜Cursor + Devbox<a href="https://www.bilibili.com/video/BV124D5YEEAD" rel="nofollow noopener">BV124D5YEEAD</a>18:3142.2万
AI时代超强编程组合Cursor+Devbox<a href="https://www.bilibili.com/video/BV1caqDYyEp5" rel="nofollow noopener">BV1caqDYyEp5</a>21:3113.4万

10. Cursor AI编程

来源视频：一行代码不写搞定开发和上线 (BV124D5YEEAD)

10.1 核心概念

知识点说明重要程度
Cursor基于VS Code的AI编程编辑器★★★★★
AI代码生成通过自然语言描述需求，AI自动生成代码★★★★★
提示词工程如何向AI准确描述编程需求★★★★★
代码补全AI实时预测和补全代码★★★★
对话式编程与AI对话来修改和调试代码★★★★

10.2 Cursor使用流程

1. 安装Cursor编辑器
2. 打开项目文件夹
3. 使用 Ctrl+K 或 Cmd+K 唤出AI对话
4. 用自然语言描述你的需求
5. AI生成代码 → 审查 → 接受/修改
6. 重复迭代直到完成

10.3 提示词编写技巧

# 好的提示词示例
"帮我创建一个待办事项(Todo)应用的前端页面，要求：
1. 有输入框可以添加新任务
2. 任务列表可以标记完成/未完成
3. 可以删除任务
4. 使用Vue3 + Composition API
5. 样式简洁美观，使用flex布局"

# 差的提示词示例
"帮我写个网页"（太模糊，AI无法准确理解需求）

10.4 弹幕观点与争议

观点来源赞同数
"ai就是拿来狠狠地用的，不懂为什么有些人听见ai就谈虎色变"山风土刀524赞
"挺不错的东西，能够很大程度上减轻程序员CRUD的负担"喜鹤358赞
"做简单项目当然简单，要是做一个复杂的，debug能搞死你"乌鸦哥教编程356赞
"强大的前提是操作者懂这些技术栈，知道如何去描述需求"弹幕—

11. Devbox 云开发环境

来源视频：一行代码不写搞定开发和上线 (BV124D5YEEAD)

11.1 核心概念

知识点说明重要程度
DevboxSealos平台提供的云端开发环境★★★★★
云IDE在浏览器中运行的代码编辑器★★★★
环境一致性云端环境保证所有人环境相同★★★★
即开即用无需本地安装Node.js等工具★★★

11.2 Devbox 使用流程

1. 访问 Sealos 平台 (cloud.sealos.run)
2. 创建 Devbox 实例
3. 选择运行环境（Node.js/Python等）
4. 在浏览器中打开VS Code编辑器
5. 编写/生成代码
6. 一键部署上线

12. AI编程工具横向对比

来源视频：AI时代超强编程组合Cursor+Devbox (BV1caqDYyEp5)

12.1 工具对比表

工具类型特点适用场景
<strong>Cursor</strong>AI编辑器基于VS Code，代码生成能力强日常开发、全栈项目
<strong>Bolt</strong>AI应用生成器一句话生成完整应用快速原型
<strong>Windsurf</strong>AI编辑器Cursor的竞品日常开发
<strong>GitHub Copilot</strong>代码补全插件嵌入VS Code的AI助手代码补全
<strong>Devbox</strong>云开发环境与Cursor配合使用部署上线
<strong>Docker</strong>容器化应用打包标准化环境一致性
<strong>K8S</strong>容器编排大规模容器管理生产部署

12.2 推荐组合

课程推荐组合：Cursor + Devbox（Sealos平台）

本地开发 → Cursor AI生成代码
    ↓
云端部署 → Devbox 运行环境
    ↓
容器化   → Docker 打包
    ↓
编排管理 → K8S 部署

第六部分：多端开发

对应视频

视频BV号时长播放量
一口气学会 小程序｜APP｜网页开发 ｜uniapp教程<a href="https://www.bilibili.com/video/BV1W7QZYMEus" rel="nofollow noopener">BV1W7QZYMEus</a>29:0777.1万

13. uniapp 跨端开发

来源视频：一口气学会小程序APP网页开发 (BV1W7QZYMEus)

13.1 核心概念

知识点说明重要程度
uniapp基于Vue的跨平台开发框架★★★★★
一套代码多端运行编写一次，同时发布到小程序/APP/H5★★★★★
微信小程序微信内的轻量级应用★★★★★
HBuilderXDCloud出品的IDE（uniapp开发工具之一）★★★★
Vue3 + Viteuniapp推荐的开发技术栈★★★★
微信开发者工具小程序预览和调试工具★★★★

13.2 uniapp 项目创建流程

# 1. 安装Node.js（双数版本如18/20）

# 2. 使用AI编程工具（Cursor）

# 3. 微信公众平台注册小程序账号（不要选小游戏）

# 4. 创建uni-app项目（Vue3/Vite版）
npx degit dcloudio/uni-preset-vue#vite my-uni-app

# 5. 进入项目
cd my-uni-app

# 6. 安装依赖
npm install

# 7. 启动开发
npm run dev:h5         # H5网页版
npm run dev:mp-weixin  # 微信小程序版

13.3 多端发布目标

平台命令说明
H5网页npm run build:h5生成网页文件
微信小程序npm run build:mp-weixin生成小程序代码，用微信开发者工具上传
APP使用HBuilderX打包需要安装HBuilder

13.4 弹幕高频问题与解答

问题解答
Windows系统npm创建失败？用管理员运行CMD，或检查Node.js版本
打包成APP需要什么？需要HBuilder/HBuilderX
iOS开发需要Mac吗？uniapp可以不直接用Mac，但最终上架App Store需要
注销了不能重新注册怎么办？联系微信公众平台客服

13.5 热门评论精选

用户 f1ao（1383赞）：分享了完整的Cursor提示词流程，包含UI设计、登录页面、打包步骤
用户 Chao_Hi（366赞）："看到这个感觉基础的前端工程师要被优化不少，效率太高了"

第七部分：部署与运维

14. Docker 容器化

来源视频：一行代码不写搞定开发和上线 (BV124D5YEEAD)

14.1 核心概念

知识点说明重要程度
Docker应用容器化引擎★★★★★
镜像(Image)应用的打包模板★★★★★
容器(Container)镜像的运行实例★★★★★
Dockerfile定义镜像构建步骤的文件★★★★
Docker Compose多容器编排工具★★★

14.2 基本Docker命令

# 拉取镜像
docker pull node:20

# 构建镜像
docker build -t my-app .

# 运行容器
docker run -d -p 3000:3000 my-app

# 查看运行中的容器
docker ps

# 停止容器
docker stop <container_id>

14.3 Dockerfile 示例

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "index.js"]

15. K8S 基础

来源视频：一行代码不写搞定开发和上线 (BV124D5YEEAD)

15.1 核心概念

知识点说明重要程度
Kubernetes(K8S)容器编排平台★★★★
PodK8S最小部署单元★★★★
Service服务发现和负载均衡★★★
Deployment声明式部署管理★★★
自动扩缩容根据负载自动调整实例数★★★
注：课程中K8S更多是概念性介绍，实际使用通过Sealos平台简化操作。

16. Sealos 云平台

来源视频：贯穿整个系列

16.1 Sealos 在课程中的角色

Sealos 是贯穿整个系列的云平台，提供：

功能说明
Devbox云端开发环境
数据库MySQL/MongoDB云数据库
应用部署一键部署Node.js等应用
域名管理自动分配访问域名
容器管理基于K8S的容器编排

第八部分：开发工具与环境

17. 开发环境搭建

来源视频：贯穿整个系列

17.1 必备工具清单

工具用途安装方式
Node.jsJavaScript运行时nvm install 20
nvmNode版本管理GitHub下载安装包
VS Code / Cursor代码编辑器官网下载
npm镜像加速依赖下载npm config set registry https://registry.npmmirror.com
Git版本控制官网下载
Chrome浏览器调试官网下载

17.2 Node.js 环境配置

# 安装nvm（Node版本管理器）
# Windows: 下载 nvm-setup.exe
# Mac: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 安装Node.js（推荐双数版本）
nvm install 20
nvm use 20

# 验证安装
node -v
npm -v

# 设置npm国内镜像（加速下载）
npm config set registry https://registry.npmmirror.com

17.3 Live Server 插件

弹幕建议："win用户这里可以安装一个叫Live server的插件，网站实时变化"
— 在VS Code中安装Live Server，保存代码后浏览器自动刷新

18. Git/GitHub 版本控制

来源视频：一口气从零到全栈开发 (BV1FPCzYdEeH)

18.1 核心概念

知识点说明重要程度
Git分布式版本控制系统★★★★★
GitHub代码托管平台★★★★★
仓库(Repository)项目代码的存储空间★★★★★
提交(Commit)保存代码变更的快照★★★★
分支(Branch)代码的并行开发线★★★

18.2 Git基础命令

# 初始化仓库
git init

# 添加文件到暂存区
git add .

# 提交变更
git commit -m "描述信息"

# 关联远程仓库
git remote add origin https://github.com/user/repo.git

# 推送到远程
git push origin main

# 克隆远程仓库
git clone https://github.com/user/repo.git

附录：学习路线图与资源

完整学习路径

阶段一：前端基础（约1-2周）
├── HTML+CSS 基础 ──→ BV1uq421P71e (32分钟)
├── JavaScript 基础 ─→ BV18M4m1C7tD (17分钟)
└── 目标：能手写简单网页

阶段二：前端框架（约1周）
├── Vue 入门 ────────→ BV1gU411Z7pp (13分钟)
├── Vue3 深入 ───────→ BV1W1421173W (26分钟)
└── 目标：能用Vue开发单页应用

阶段三：全栈联通（约1周）
├── Axios/HTTP ──────→ BV1rM4m117Ry (6分钟)
├── Node.js + MongoDB → BV1vVyeYMEAs (22分钟)
└── 目标：前后端数据联通

阶段四：AI编程提效（约3天）
├── Cursor + Devbox ──→ BV124D5YEEAD (19分钟)
├── AI工具对比 ──────→ BV1caqDYyEp5 (22分钟)
└── 目标：用AI辅助完成完整项目

阶段五：进阶扩展（约1周）
├── uniapp 多端开发 ──→ BV1W7QZYMEus (29分钟)
├── 数据库基础 ──────→ BV1Mm5kzHEWA (22分钟)
└── 目标：一套代码发布多端

综合实战（约2-3小时）
└── 一口气从零到全栈 → BV1FPCzYdEeH (2小时24分钟)
    └── 目标：独立完成一个全栈项目

推荐学习方法（来自UP主置顶评论）

UP主「三分钟实验室」自述：
1. 需要什么基础？ 有电脑、会打字就行。
2. 如何正确的学？ 打开电脑，手放在键盘上跟着写。看是看不会的，案例用到的都是基础中的基础，最好每一行都搞懂什么意思。
3. 为什么能2小时速成？ 所有停顿、口误都剪掉了，每一句都经过思考绝无废话。只学核心思想，死记硬背的熟练活交给AI和更高级的工具。认真看下来肯定不止两小时。
4. 会不会导致基础不好？ 不会。这个系列讲的都是"编程思维"和"学习方法"，不是教你背语法。学会用AI辅助，比死记硬背更高效。

弹幕学习建议汇总

建议来源视频
打开电脑跟着写，看是看不会的综合视频
大家一定要按照nvm，然后安装20版本的node综合视频
win用户安装Live Server插件，网站实时变化HTML+CSS
css太多样式记不住，幸亏有AIHTML+CSS
小白小心vibe教学，会造成你学会了的错觉但过一天就忘了Node.js
强大的前提是操作者懂这些技术栈，知道如何描述需求Cursor
第一遍看很懵逼，第二次看就懂一半了Axios

综合视频弹幕热词TOP10

排名关键词出现次数含义
1ai53AI编程工具讨论
2vue37Vue框架相关
3js26JavaScript相关
4后端25后端开发讨论
5前端19前端开发讨论
6html17HTML基础
7特16特效/特殊功能
8css15CSS样式
9零基础15零基础学习者
10接口15API接口讨论

文档生成时间：2026-06-19
数据来源：B站API抓取（视频信息、弹幕、评论、标签）+ 人工分析
适用对象：零基础想要学习AI全栈开发的初学者
返回首页