https://index.zshipu.com/geek/tags/apollo/ Recent content in Apollo on 知识铺的博客 Hugo -- gohugo.io zh-CN Sat, 14 May 2022 23:22:10 +0000 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.4-%E6%8B%93%E5%B1%95%E7%9F%A5%E8%AF%86%E4%BA%86%E8%A7%A3-TypeScript-%E4%B8%AD%E7%9A%84%E9%AB%98%E7%BA%A7%E6%A6%82%E5%BF%B5/ Sat, 14 May 2022 23:22:10 +0000 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.4-%E6%8B%93%E5%B1%95%E7%9F%A5%E8%AF%86%E4%BA%86%E8%A7%A3-TypeScript-%E4%B8%AD%E7%9A%84%E9%AB%98%E7%BA%A7%E6%A6%82%E5%BF%B5/ 什么是打字稿？ TypeScript 由 Microsoft 创建和维护，是 JavaScript 的超集，这意味着所有功能性 JavaScript 代码在 TypeScript 下都是有效的。该语言可以理解为“用于应用程序级开发的 JavaScript”，主要关注两个方面： 提供从未来 JavaScript 引擎到当前 JavaScript 引擎的功能 为 JavaScript 提供类型系统 TypeScript 的组件通常是语言本身，本质上是 JavaScript 加上附加的功能和语法，将代码转 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.3-%E6%8B%93%E5%B1%95%E7%9F%A5%E8%AF%86%E5%AD%A6%E4%B9%A0-TypeScript-%E5%85%A8%E9%9D%A2%E6%8C%87%E5%8D%97/ Sat, 14 May 2022 22:22:10 +0000 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.3-%E6%8B%93%E5%B1%95%E7%9F%A5%E8%AF%86%E5%AD%A6%E4%B9%A0-TypeScript-%E5%85%A8%E9%9D%A2%E6%8C%87%E5%8D%97/ 什么是 Typescript？ Typescript是JavaScript的类型化超集，由Microsoft于2012年创建，旨在帮助Javascript开发人员使用大规模应用程序。Typescript旨在作为大型代码库的结构机制提供帮助，因为它有助于避免会减慢您速度的常见错误。它使 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.2-%E6%8B%93%E5%B1%95%E7%9F%A5%E8%AF%86%E6%9E%84%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84-UI-%E7%BB%84%E4%BB%B6%E5%BA%93/ Sat, 14 May 2022 21:22:10 +0000 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.2-%E6%8B%93%E5%B1%95%E7%9F%A5%E8%AF%86%E6%9E%84%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84-UI-%E7%BB%84%E4%BB%B6%E5%BA%93/ UI 组件库是一组现成的 UI 组件，例如按钮、输入、对话框等。它们用作布局的构建块。由于它们的模块化特性，我们可以以多种不同的方式排列组件以实现独特的效果。每个库都有独特的外观和感觉，但它们中的大多数都提供主题，并且它们的组件是可定制和可重用的。 我将引导您完成创建自己的 UI 组件库的过程： React https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.1-%E6%8B%93%E5%B1%95%E7%9F%A5%E8%AF%86_document.js-%E5%A6%82%E4%BD%95%E5%9C%A8-Next.js-%E4%B8%AD%E6%94%B9%E8%BF%9B-SEO/ Sat, 14 May 2022 20:22:10 +0000 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.1-%E6%8B%93%E5%B1%95%E7%9F%A5%E8%AF%86_document.js-%E5%A6%82%E4%BD%95%E5%9C%A8-Next.js-%E4%B8%AD%E6%94%B9%E8%BF%9B-SEO/ 首先，我们需要创建 Next.js 应用程序。如果您是 Next.js 新手，请按照这篇文章生成 Next.js 应用程序脚手架。 你在这里。公平地假设您已经设置了 Next.js 框架，并且您的应用程序正在http://localhost:300上运行。 此时，如果您查看源代码页面，那么您会看到 HTML 和 CSS。您还可以看到元标记、标题和元描述。但是 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.%E6%90%AD%E5%BB%BA-Next.js-%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/ Sat, 14 May 2022 19:22:10 +0000 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/2.%E6%90%AD%E5%BB%BA-Next.js-%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/ 在本文中，我们将介绍 如何配置故事书 配置 TailwindCSS 添加 SEO 友好的 _document.js 创建基本组件 配置故事书 在上一篇文章中，我们在 Next.js 应用程序中安装和设置了故事书。安装过程会创建一个名为 stories 的文件夹。并且，在该文件夹下，有安装过程中附带的 JavaScript 文件。删除 stories 文件夹下的所有文件。它会在 6006 端口打破故事书。 安装以下内容： npm install @storybook/addon-postcss https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/1.%E4%BD%BF%E7%94%A8-StorybookTailwindcss-%E5%92%8C-Apollo-%E5%AE%A2%E6%88%B7%E7%AB%AF%E8%AE%BE%E7%BD%AE-Next.Js/ Sat, 14 May 2022 18:22:10 +0000 https://index.zshipu.com/geek/post/nextjs/storybooktailwindnextjs/1.%E4%BD%BF%E7%94%A8-StorybookTailwindcss-%E5%92%8C-Apollo-%E5%AE%A2%E6%88%B7%E7%AB%AF%E8%AE%BE%E7%BD%AE-Next.Js/ 要使用的技术堆栈 前端 作为 CSS 框架的 Tailwind NextJS storybook GraphQL 后端 作为 Perl 爱好者，我将使用 Mojolicious (Mic Drop)。 设置项目前端 在本文的这一部分，我们将设置 NextJs 项目 安装 Tailwind CSS 框架 设置storybook 使用 Apollo 客户端设置 GraphQL 一个 Git 存储库 设置 Next.js 项目 要在 Next.js 中创建新项目，请执行以下命令： npx create-next-app 在下一步中，它将询问应用程序名称，我们