课程简介

以下课程结构在课程期间会根据学员反馈做内容方向、篇幅、细节、顺序等方面的调整( 查看原件

启动 Kickoff

完整的开发环境配置指南,包括 Node、NPM、IDE 工具、浏览器插件和平台账号设置
开发有关的基本操作讲解,帮助你快速上手开发工具和环境
学习如何配置和管理开发服务器,为项目开发做好准备

课程进度

环境配置

开发有关的基本操作讲解
Node:
原生安装
nvm 安装
nvm 配置
NPM 配置
淘宝源配置
Chrome 及插件
Vue 插件
Nuxt 插件
开发工具 IDE:
主力:Cursor + Plus
平替:VSCode + Codeium
平台账号:
部署和域名相关
GitHub
Vercel
Cloudflare

完整的开发环境配置指南

启动 Kickoff

理论基础 Theories

从零开始学习 Web 开发的核心概念,包括前端和后端的基础知识
深入理解 Nuxt 和 Next 框架的异同,掌握 SSR 的工作原理
学习 Vue 和 TypeScript 的基础知识,为实际项目开发打下坚实基础

课程进度

Web 开发基础概念

什么是 Nuxt?
什么是客户端(前端)和服务端(后端)?
Nuxt 和 Next
什么是 SSR?
什么是 Vue?
什么是 Nodejs?
什么是 Typescript?
…十万个为什么(随时穿插)

理解现代 Web 开发的核心概念

技术栈

前端框架:
Vue 3
Nuxt 3
Next
开发语言:
JavaScript
TypeScript
样式相关:
TailwindCSS
CSS
HTML
开发工具:
Git
VSCode
Chrome DevTools
部署平台:
Vercel
Cloudflare
后端技术:
Node.js

课程涉及的主要技术栈介绍

理论基础 Theories

基础知识 Basics

核心技术文档精读,掌握 HTML、CSS、JavaScript 的关键知识点
深入学习 Vue、Nuxt、Next 和 React 官方文档,理解框架设计思想
了解 SQL 基础知识,为后续的数据管理模块做好准备

课程进度

核心技术文档

HTML 核心文档 Quick Through
CSS 核心文档 Quick Through
Javascript 核心文档 Quick Through
Vue 官方文档 Quick Through
Nuxt 官方文档 Quick Through
Next 官方文档 Quick Through
React 官方文档 Quick Through
SQL 核心文档 Quick Through

快速了解主要技术栈文档

基础知识 Basics

新手教程 Tutorial

从零开始搭建项目,学习基于官方模版的本地开发和部署流程
掌握组件化和模版的使用,提高代码复用性和可维护性
学习内容管理、流量分析和用户体验优化,打造专业级网站

课程进度

项目起步

基于官方模版的本地开发
基于 Vercel 的发布流程
官方模版结构及本地启动

从零开始搭建项目

项目进阶

组件化和模版的使用
内容管理模块集成
基于内容管理模块的实践
流量分析:Vercel Analytics
用户体验

深入项目开发实践

新手教程 Tutorial

实际项目 Projects

实际项目开发实战,包括课程官网迭代、开源导航站项目开发
基于 Next.js 的 AI 聊天机器人开发,集成自选 LLM
Article AI 二次开发,支持多语言、数据管理、用户管理和付费功能

课程进度

课程官网迭代

FAQ 页面、Promo 页面
合作伙伴页面
课程大纲页面
作品展示页面
体验优化
SEO 优化

实战课程网站开发

导航站项目

基础技术栈(继承新手教程项目)
产品功能设计
技术架构设计
核心功能 MVP 实现
基于 AI 的内容准备
自动化内容准备

开源导航站完整开发流程

AI ChatBot 二次开发

基于 Nextjs 的 AI ChatBot 在 Vercel 上的配置上线
AI Chatbot 与自选 LLM 的集成(AI-SDK)
Next 和 React 的基础知识

基于 Next.js 的 AI 聊天机器人开发

Article AI 二次开发

多语言:简体、英语、日语
数据管理:Neon
用户管理:Neon
广告
付费
分析

基于 AI 的文章生成系统

不包含在本课程包中

实际项目 Projects

进阶 Advance

使用主流 Hybrid 方案构建移动应用,扩展项目的应用场景
学习 Docker 相关技术,掌握基于 Github Action 的自动化构建
完整的 VPS 服务器部署流程,从初始化配置到应用发布

课程进度

移动端开发

客户端 Apps(基于主流 Hybrid 方案)

使用主流 Hybrid 方案构建移动应用

VPS 部署

Docker 相关
本地构建
基于 Github Action 构建
Dockerhub
VPS 初始化配置与安装
VPS 应用发布

完整的服务器部署流程

进阶 Advance

社区协作 Collaborate

学习 GitHub 的工作流程,掌握团队协作的基本技能
参与开源导航站源码的开发,积累实际项目经验
开发属于学员自己的有意思的开源项目,展示个人能力

课程进度

开源项目协作

GitHub 的 workflow
核心:导航站源码
其他:开发属于学员自己的有意思的开源项目

参与开源项目开发

社区协作 Collaborate