用内容填充页面
设置新的 Gridsome 站点 为了开始一个新项目，应满足以下基本要求。安装的节点变体的版本应至少为版本 8。npm或yarn等打包器管理器也是必要的。当然，也建议具备 Vue.js 和 GraphQL 的基础知识。 安装 Gridsome CLI 工具 如果满足要求，您可以开始 Gridsome CLI 的全局安装创建 Gridsome 项目 成功安装后，我们现在可以在终端中使用 Gridsome 命令，并且可以使用 CLI 创建一个新项目。当项目的初始搭建完成后，就可以在项目文件夹中启动本地开发服务器了。为此需要以下命令： //切换到项目目录 $ cd my-site //启动开发服务器 $ gridsomedevelop 现在应该可以通过点。如前所述，Gridsome 使用 GraphQL 数据层。该界面也可以在开发模式下访问，可以通过。 项目结构 在开始编码之前，了解 Gridsome 项目的结构非常重要，因为项目中的每个文件夹/文件都用于特定任务。 插图-项目结构 站点的配置文件。除此之外，还可以在此处添加和配置插件。这包含节点服务器的配置，负责检索数据并创建各个页面。使用预定义的 API，可以创建页面 瑞士 电话号码 并将您自己的数据接口添加到数据层。 static/：在构建期间将复制到dist/文件夹的任意文件的目录。 src/main.js：包含插件和其他功能的 Vue.js 应用程序配置。 src/layouts/：页面和模板的布局组件。 src/pages/：页面组件使用自己的路径生成，例如Impressum.vue然后显示在…/imprint下。 src/templates/：用于重复数据类型的模板。例如，Post.vue组件可用于定义博客文章的标记和样式。 成分 页面组件 如前所述，src/pages目录中的所有.vue文件都将成为最终网站上的独立页面。页面 URL 是根据文件的位置和名称生成的。路径会自动以小写字母写入。可以使用文件名中所谓的驼峰式大小写来启用 URL 中的连字符。
https://zh-cn.frnumbers.com/wp-content/uploads/2024/04/ss.png
例如， 下访问。 布局组件 布局组件是创建可重用布局的理想方式。例如，带有侧边栏的布局可以创建为PageWithSidebar.vue 。然后，Vue 特定的槽可用于定义占位符，在使用布局时，这些占位符将替换为相应的内容。该图显示了 Gridsome Starter 项目的标准布局。 模板组件 Gridsome 的强大之处在于模板。与页面相反，它们被理解为可重用的、因此是动态的页面。例如，如果我想在博客上显示链接结构.../blog/post-1和.../blog/post-2，模板是正确的选择。如果我的数据层中有一个名为Posts的数据模型，我可以使用Post.vue模板组件来定义标记和样式。 用内容填充页面 Gridsome 提供了用数据填充整个页面、模板甚至单个组件的选项。静态查询可用于纯组件，例如标题或导航栏，页面查询可用于页面或模板。
頁:
[1]