初创训练营新阶段的训练内容差不多准备好了，我们即将启程。本次行程会经过 Strapi（无头CMS）、Nuxt.js（前端框架）、Tailwind（CSS） 还有 Gsap（动画库）。Strapi 负责在后端提供数据服务，Nuxt.js 等负责前端界面，掌握它们的核心用法以后，我们会继续使用它们构建一个有设计，可交付的应用项目。
技术选择
使用 Nuxt.js + TailWind + Gsap 你可以构建目前所有主流应用或商业网站的界面，比如像抖音、Youtube、B 站、知乎、小米官网、BYD 汽车等。这是一套非常有价值的技术组合，值得拥有。
另外我们在这个阶段的训练里加了一个 Strapi 内容管理系统为应用提供数据服务，主要原因是它用起来与学起来都没什么压力，我们可以通过它提供的用户界面快速搭建需要的应用接口。而且它是基于 Node.js 技术开发的，所以对我们已经熟悉 Node.js 生态的开发者来说，用起来就更简单了。
WordPress 与 Drupal 都是非常优秀的内容管理系统，不过对于某些项目来说有点重了，升级与维护也都不容易。比如你想做个展示服务与产品用的商业网站，可以尝试用 Strapi + Nuxt.js 替代 WordPress 与 Drupal，这样的网站还可以编译成静态页面，速度更快，还能拥有前端应用顺滑的浏览体验。
训练安排
我们计划在十周内完成这一阶段的训练，掌握应用界面的设计、排版、布局、交互还有动画，并最终构建一个有设计、可交付的项目。
第一周 —— 第二周
搞定 Strapi 这款无头 CMS 系统，理解系统的关键概念与核心部件，然后构建实战项目需要的所有接口。
第三周 —— 第五周
掌握 Nuxt.js 这款前端应用框架，理解关键概念与核心部件，实践应用，比如创建、更新、删除内容，上传文件与身份验证。
第六周 —— 第十周
实战 Nuxt.js，完成一个有设计、可交付的商业网站应用。
训练目录
Strapi 实战
准备应用
01-01-01-Strapi 准备开发工具
01-01-02-在命令行界面下安装 Strapi
01-01-03-准备统一的 Strapi 起点项目
01-01-04-开发、编译与启动 Strapi 应用
01-01-05-用数据库客户端连接 Strapi 数据库
01-01-06-修改 Strapi 服务器使用的端口号
管理界面
02-01-01-Strapi 的管理后台
02-01-02-监视管理后台变化（watch-admin）
02-01-03-设置 Strapi 管理界面的语言（简体中文）
02-01-04-配置 Strapi 管理后台的应用标志
02-01-05-扩展 Strapi 管理后台的界面翻译
02-01-06-定制 Strapi 管理后台的主题
内容类型
03-01-01-Strapi 模型构建器（内容类型）
03-01-02-在 Strapi 里创建内容类型（集合类型）
03-01-03-理解 Strapi 生成的接口源代码
03-01-04-使用媒体文件字段允许上传文件
03-01-05-配置内容类型显示视图
03-01-06-Strapi 内容管理
03-01-07-Strapi 媒体库
03-01-08-Strapi 内容分类
03-01-09-Strapi 引用字段（内容关系）
内容接口
04-01-01-Strapi 内容接口（集合类型）
04-01-02-指定 Strapi 接口返回的字段（fields）
04-01-03-Strapi 接口的字段加载（populate）
04-01-04-Strapi 内容列表接口过滤（filters）
04-01-05-Strapi 内容列表接口排序（sort）
04-01-06-Strapi 内容列表接口分页（pagination）
04-01-07-Strapi 内容创建、更新与删除接口
权限控制
05-01-01-Strapi 的用户、角色与权限
05-01-02-Strapi 注册用户接口（_api_auth_local_register）
05-01-03-Strapi 用户登录接口（api_auth_local）
05-01-04-Strapi 用户权限（普通用户）
05-01-05-Strapi 接口令牌（API token）
05-01-06-Strapi 管理员用户
单一类型
06-01-01-Strapi 单一类型
06-01-02-Strapi 创建组件（Component）
06-01-03-在 Strapi 内容类型里使用组件
06-01-04-在 Strapi 组件里使用组件
06-01-05-使用动态区域（Dynamic Zone）
创建组件
07-01-01-创建 Common 相关组件（Action, IconText, KeyValue, Link, ShortText）
07-01-02-创建菜单组件（Menu）
07-01-03-创建页面底部相关组件（Contact, Social, ICP, Copyright）
07-01-04-创建英雄区组件（Hero）
07-01-05-创建作品列表组件（WorkListItem, WorkList）
07-01-06-创建品牌列表组件（BrandListItem, BrandList）
07-01-07-创建文本列表组件（TextListItem, TextList）
07-01-08-创建图像列表组件（ImageListItem, ImageList）
07-01-09-创建群组组件（Group）
发布内容
08-01-01-创建单一类型（应用, 首页, 关于, 联系, 作品）
08-01-02-发布单一类型内容（应用）
08-01-03-发布单一类型内容（首页）
08-01-04-发布单一类型内容（关于）
08-01-05-发布单一类型内容（联系）
08-01-06-发布单一类型内容（作品）
08-02-01-导入作品、分类与文件数据（nid-strapi-seed）
08-02-02-修复错误
Nuxt 实践
快速起步
01-00-01-准备开发 Nuxt 项目
01-00-02-创建 Nuxt 项目
01-01-01-Nuxt 框架的自动导入功能
01-01-02-Nuxt 框架的客户端渲染（CSR）与服务端渲染（SSR）
01-01-03-Nuxt 应用的页面与路由
01-01-04-在 Nuxt 组件里自定义网页标题（Head、Title 与 useHead）
01-01-05-Nuxt 应用的配置：App Configuration
01-01-06-Nuxt 页面的布局：Layout
01-01-07-Nuxt 框架的模块：Module
01-01-08-在 Nuxt 页面设置要使用的布局
01-01-09-编译与预览 Nuxt 应用
01-01-10-生成静态 Nuxt 网站
应用路由
02-01-01-Nuxt 框架基于文件系统的路由
02-01-02-在 Nuxt 应用里定义带参数的路由
02-01-03-Nuxt 应用里的路由链接：NuxtLink
02-01-04-在 Nuxt 应用里以编程方式跳转导航链接（useRouter、navigateTo）
02-01-05-Nuxt 应用里的客户端路由中间件（Middleware）
02-01-06-在 Nuxt 路由中间件里做重定向
02-02-01-在 Nuxt 应用里定义服务端应用接口
02-02-02-在 Nuxt 应用里定义带参数的应用接口
02-02-03-Nuxt 应用接口的中间件
网络请求
03-01-01-在 Nuxt 应用里使用 $fetch 发送网络请求
03-01-02-在 Nuxt 应用里使用异步数据（useAsyncData）
03-01-03-useAsyncData 刷新异步数据（refresh）
03-01-04-使用 useFetch 与 useLazyFetch 请求获得数据
03-01-05-在 Nuxt 项目里自定义组合（Composable）
03-01-06-Nuxt 项目中的运行时配置（runtimeConfig）
03-01-07-自定义请求接口用的组合（useApiFetch）
03-01-08-在内容列表页面地址里添加页码
03-01-09-设置 useApiFetch 的类型参数（TypeScript）
用户登录
04-01-01-在 Nuxt 应用里定义登录页面组件
04-01-02-在 Nuxt 应用里请求用户登录接口
04-01-03-使用 Nuxt 提供的 useState 管理应用状态
04-01-04-在 Nuxt 应用里记住与恢复登录状态
04-01-05-在 Nuxt 应用的组件与组合里使用 TypeScript
04-01-06-通过请求拦截器设置请求中的身份验证头部
04-01-07-在 Nuxt 应用里实现退出登录
内容管理
05-00-01-准备本地服务端应用
05-01-01-在 Nuxt 应用里实现创建内容
05-01-02-在 Nuxt 应用里实现编辑内容
05-01-03-在内容列表项目里添加图像与标题
05-01-04-在 Nuxt 应用里实现上传文件（准备）
05-01-05-在 Nuxt 应用里选择图像后显示预览图像
05-01-06-在 Nuxt 应用里实现上传文件（实施）
05-01-07-在 Nuxt 应用里实现删除内容
05-01-08-内容页面
05-01-09-自定义错误页面
部署应用
06-01-01-理解部署 Nuxt 应用
06-01-02-将 Nuxt 应用部署到 Vercel
06-01-03-在自有服务器部署 Nuxt 应用（准备）
06-01-04-在自有服务器部署 Nuxt 应用（实施）
06-01-05-用 Nginx 为 Nuxt 应用配置反向代理
06-01-06-使用 Let's Encrypt 给 Nuxt 应用签发 SSL 证书
Nuxt 实战
准备项目（prepare）
01-00-01-准备 Nuxt 项目
01-01-01-在 Nuxt 项目里使用 Tailwind CSS 框架（Nuxt Tailwind 模块）
01-01-02-Tailwind 框架的配置
01-01-03-准备 Nuxt 项目的配置
01-01-04-准备 Nuxt 应用请求数据用的 HTTP 客户端
01-01-05-设置 Nuxt 网站的小图标（favicon）
01-01-05-设置 Nuxt 网站的小图标（favicon）.resources
01-01-06-准备应用的布局（Layout）与页面（Page）
01-01-06-准备应用的布局（Layout）与页面（Page）.resources
01-01-07-准备网站标志组件（AppLogo）
01-01-08-准备应用图标组件（AppIcon）
01-01-09-准备自定义字体
请求接口（request-api）
02-01-01-定义集合类型（Category、Image、Work）
02-01-02-定义接口组件类型（Common）
02-01-03-定义接口组件类型（Block）
02-01-04-定义接口组件类型（Page）
02-01-05-定义单一接口响应数据的类型（SingleResponse）
02-01-06-定义集合接口响应数据的类型（CollectionResponse）
02-02-01-根据对象生成查询符（useQueryString）
02-02-02-请求单一类型的服务端接口
02-02-03-请求集合类型的服务端接口
02-02-04-设置 Nuxt 应用的页面标题与 Meta（usePageHead）
02-02-05-设计默认布局页脚（DefaultFooter）
页部头部（page）
03-00-01-自定义 Tailwind 框架的 Timing Function
03-01-01-定义主菜单开关组件（DefaultMenuSwitch）
03-01-02-动态显示主菜单背景
03-01-03-主菜单
03-01-04-主菜单（中等宽度及以上设备）
03-01-05-设计主菜单项目悬停与活动状态样式
03-01-06-页面头部主题（useHeaderTheme）
过渡动画（animation）
04-01-01-设计与使用页面过渡动画
04-01-02-页面初始过渡动画
04-01-03-定义 GSAP 动画插件
04-01-04-定制页头初始动画
04-01-05-定制页头滚动动画
04-01-06-使用 GSAP Context
04-01-07-解决切换 Nuxt 页面 GSAP 动画失效的问题
04-01-08-滚动回到页顶组件（AppScrollTop）
04-01-09-自动显示与隐藏滚动回到页顶组件
04-01-10-解决切换页面时 ScrollTrigger 失效的问题（全局中间件）
联系页面（contact）
05-01-01-请求 Contact 接口获取联系页面数据
05-01-02-返回指定格式的图像地址（useApiImage）
05-01-03-联系页面背景图
05-01-04-设置与使用响应式图像
05-01-05-联系页面背景图（动画）
05-01-06-创建联系卡片组件与动画
05-01-07-定义处理页底数据的 Composable（usePageBottom）
05-01-08-预约电话（ContactPhone）
05-01-09-联系信息（ContactInfo）
05-01-10-社交网络（ContactSocial）
05-02-01-判断是否为初始加载（useIsInitialLoad）
05-02-02-理解在组件里添加 GSAP 动画
05-02-03-可匹配媒体的 GSAP 动画（useAnimation）
05-02-04-页面底部组件（DefaultBottom）
05-02-05-页面底部组件动画
页面数据（page-data）
06-01-01-请求 Home 接口获取首页页面数据
06-01-02-处理单一类型接口 main 区域（usePageMain）
06-01-03-使用动态组件展示区块
06-01-04-请求 About 接口获取关于页面数据
06-01-05-处理关于页面 main 区域的区块数据
06-01-06-准备关于页面动态的组件
06-01-07-处理区块 Meta 数据（useBlockMeta）
英雄区块（hero-block）
07-00-01-修复首页页面警告
07-01-01-准备英雄区块组件（BlockHero）
07-01-02-英雄区块媒体（BlockHeroMedia）
07-01-03-英雄区块媒体的动画
07-01-04-英雄区内容包装（BlockHeroContent）
07-01-05-英雄区内容头部（BlockHeroHeader）
07-01-06-英雄区内容描述（BlockHeroDescription）
07-01-07-英雄区内容动作（BlockHeroActions）
07-01-08-英雄区 Extra 内容
07-01-09-英雄区内容部分的动画
页面区块（page-block）
08-01-01-作品列表区块（BlockWorkList）
08-01-02-作品列表项目组件脚本（BlockWorkListItem）
08-01-03-作品列表项目组件模板（BlockWorkListItem）
08-01-04-作品列表项目组件动画（BlockWorkListItem）
08-01-05-准备作品分类页面与单个作品页面组件
08-01-06-品牌列表组件（BlockBrandList）
08-01-07-图像列表组件（BlockImageList）
作品列表（work）
09-01-01-请求 WorkIndex 接口获取作品列表页面数据
09-01-02-处理作品页 main 区域的区块数据
09-01-03-菜单区块（BlockMenu）
09-01-04-作品列表页动态页面标题
09-02-01-处理作品列表数据（useWorksStore）
09-02-02-请求与使用作品列表数据
09-02-03-作品列表与列表项目组件（WorkList，WorkListItem）
09-02-04-自定义 Tailwind 显示比例类
09-02-05-作品列表过渡动画（flick）
09-03-01-安装与准备 Swiper
09-03-02-用扫动手势控制作品页菜单的显示（Swiper）
09-03-03-自定义 Swiper 导航的样式
作品页面（work-show）
10-00-01-安装与准备 VueUse
10-01-01-从作品地址中提取作品 ID 与分类别名（useWorkSlug）
10-01-02-处理当前作品相关数据（useWorkShowStore）
10-01-03-显示作品内容（WorkShowContent，WorkShowBottom）
10-01-04-设置作品页面标题
10-02-01-用 Swiper 展示作品
10-02-02-切换 Slide 以后设置当前作品数据与页面地址
10-02-03-使用 Swiper 缩放模块（Zoom）
10-02-04-用按键与鼠标控制 Slide
10-02-05-自定义控制 Slide 的按键
10-03-01-作品页面底板（useWorkBottomSheet）
10-03-02-创建与使用作品底板组件（WorkShowBottomSheet）
10-03-03-作品页面底板的过渡效果（slide-up）
10-03-04-作品页面底板 Swiper
10-03-05-点击底板上的 Slide 切换显示作品
报名
如果你想获得软件应用开发能力，还想启动自己的软件应用项目，请报名参加初创训练营，点击报名 →
咨询
报名咨询可以添加微信好友，搜索用户：wanghao_8088，或者扫描下面的二维码。
