gridsome(一)——基础

最新推荐文章于 2024-09-10 09:19:13 发布

smile@qingqing

最新推荐文章于 2024-09-10 09:19:13 发布

阅读量539

点赞数

分类专栏： Gridsome

本文链接：https://blog.csdn.net/weixin_43363871/article/details/104060097

版权

Gridsome 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

What

Gridsome 是一个 Vue.js 驱动的静态站点生成器，用于创建可在任何地方部署的快速且安全的网站。

Why

使用热加载进行本地开发 —— 在开发过程中实时查看更改。
编写Vue.js代码 —— 一个轻量级且易于使用的前端框架。
GraphQL数据层 —— 为所有数据集中管理数据。
自动页面路由 —— 使用文件快速创建和管理页面。
渐进式图像支持 —— 自动调整大小，优化和延迟加载图像。
自动页面预取 -—— 页面在后台加载以便快速浏览。
自动优化的代码 —— 开箱即用的代码分割和资产优化。
快速静态页面生成 —— 安全，快速地部署到任何静态Web主机。
数据源插件 —— 从流行的无头CMS，API或Markdown文件添加数据

How

安装gridsome脚手架
- npm安装： npm install -g @gridsome/cli
- yarn安装：yarn global add @gridsome/cli
创建一个项目：gridsome create 项目名

注意：安装完此过程出现报错或者卡的不动时删除已经生成的node_modules文件，运行cnpm install即可。
进入项目：cd 项目名
启动本地服务器：gridsome develop

之后在浏览器访问:http://localhost:8080/即可看见以下界面：

目录结构

├── package.json
├── gridsome.config.js
├── gridsome.server.js
├── static/
└── src/
    ├── main.js
    ├── index.html
    ├── App.vue
    ├── layouts/
    │   └── Default.vue
    ├── pages/
    │   ├── Index.vue
    │   └── About.vue
    │── components
    │	└── xx.vue
    └── templates/
        └── xx.vue

根目录文件详解

❇️gridsome.config.js

Gridsome需要gridsome.config.js才能工作。插件和项目设置位于此处。基本配置文件如下所示：
```
module.exports = {
  siteName: 'Learn Gridsome',  //为项目设置一个名称。该名称通常在标题标签中使用。
  siteDescription: '',   // 首页的描述
  plugins: []
}
```
- siteName
  
  为项目设置一个名称。该名称通常在标题标签中使用。
- siteDescription
  
  首页的描述。
- plugins
  
  将插件添加到plugins数组来激活插件。

❇️gridsome.server.js

该文件是可选的，用于挂载到Gridsome服务器的各个部分。该文件必须导出可以访问API的函数。

module.exports = function (api) {
  api.loadSource(({ addCollection }) => {
    // Use the Data Store API here: https://gridsome.org/docs/data-store-api/
  })

  api.createPages(({ createPage }) => {
    // Use the Pages API here: https://gridsome.org/docs/pages-api/
  })
}

api.loadSource(fn)

从本地文件或外部API加载数据并为其创建集合。该数据将在你的GraphQL查询中可用。

🌰

module.exports = function (api) {
  api.loadSource(actions => {
    const collection = actions.addCollection('gridsome')
  
    collection.addNode({
      title: 'Gridsom',
      comments: 'how to study gridsome'
    })
  })
}

API
Playground

api.createPages(fn)

通过Pages API，可以创建自定义页面。生成GraphQL模式后将调用此API，以便你可以查询节点并根据它们或任何其他数据创建页面。

🌰

module.exports = function (api) {
  api.createPages(({ createPage }) => {
    createPage({
      path: '/my-page',
      component: './src/templates/MyPage.vue',
      context: {
        customValue: 'gridsome'
      }
    })
  })
}

Playground

❇️ /src 目录
- ♻️main.js
  - 导入全局样式和脚本
  - 可以访问客户端API的导出功能
  - 安装Vue插件，注册组件和指令等
- ♻️layouts
  
  若要共享页面或模板的一个或多个布局，可以在该目录中创建组件。布局组件用于包装页面。布局应包含在整个网站中使用的组件，例如:header,footer等。
  - import layouts(局部导入)
    
    创建布局后，需要将其导入到页面和模板中,在<script>标记内完成。如下：
```

<template>
  <Layout>
    Add page content here
  </Layout>
</template>

<script>
import Layout from '~/layouts/Default.vue'

export default {
  components: {
    Layout
  }
}
</script>
```
  - Make a layout global（全局导入）
    
    如果你不想将布局导入每个页面或模板，则可以将布局设为全局。要使布局成为全局布局，请转至src / main.js并将布局文件导入此文件,如下：
```
// src/main.js

import Layout from '~/layouts/Default.vue'

export default function (Vue, { head, router, isServer }) {
  Vue.component('Layout', Layout)
}
```
    现在，可以在Gridsome项目中的任何位置使用<Layout>，而无需将其导入每个页面,如下：
```

<template>
  <Layout>
    Add page content here
  </Layout>
</template>
```
  - Passing Props to layouts
    
    由于布局就像组件一样工作，因此可以将Props传递给布局。例如，页面如下所示:
    - Pages=>About.vue
```
<template>
  <Layout :sidebar="true">
    Add page content here
  </Layout>
</template>
```
    - layout
```
	<template>
	  <div>
	    <div class="main-content">
	      <slot />
	    </div>
	    <div v-if="sidebar">
	      Lets show the sidebar!
	    </div>
	  </div>
	</template>
	
	<script>
	export default {
	  props: ['sidebar']
	}
	</script>
```
    - 效果图
  - Multiple content slots
    
    要将多个插槽添加到布局中，需要命名,在以下示例中，添加了一个侧边栏插槽，仅在页面具有侧边栏内容时才会显示：
    - Layout
```
<template>
  <div>
    <slot />		 
    <div class="sidebar" v-if="$slots.sidebar">
      <slot name="sidebar" /> 		
    </div>
  </div>
</template>
```
    - Pages=>About.vue
```
<template>
  <Layout>
    This is the default content

    <template slot="sidebar">
      This will be added to sidebar slot from the page
    </template>
  </Layout>
</template>
```
  - Master layout
    
    可以将App.vue文件添加到src根目录来创建主版式。这样，可以在所有页面上保留页眉，页脚并添加页面过渡,如下：
```
<template>
  <div id="app">
    <router-view />
  </div>
</template>
```
- ♻️pages
  
  src / pages目录中的单个文件组件将自动具有其自己的URL。文件位置用于生成URL，以下是一些基本示例:
  - src/pages/Index.vue becomes /(The frontpage)
  - src/pages/AboutUs.vue becomes /about-us
  - src/pages/about/Vision.vue becomes /about/vision
  - src/pages/blog/Index.vue becomes /blog
- ♻️templates
  
  用于为集合中的节点创建单个页面。节点需要相应的页面才能显示在其自己的URL上。🌰：
  
  以下示例显示了如何为名为Post的集合设置路由和模板。
  - 如果未指定组件，则位于src / templates / {Collection} .vue的组件将用作模板。
```
// gridsome.config.js
module.exports = {
  templates: {
    Post: '/blog/:year/:month/:title',
  }
}
```
  - 指定自定义组件路径
```
// gridsome.config.js
	module.exports = {
	  templates: {
	    Post: [
	      {
	        path: '/blog/:year/:month/:title',
	        component: './src/other/location/Post.vue'
	      }
	    ]
	  }
	}
```
- ♻️components
  
  Gridsome使用Vue单个文件组件。这意味着将HTML，JavaScript和CSS添加到同一文件中。使项目更易于维护和测试，并且组件更可重用。这也用于在构建过程中进行代码拆分。
  - Import to other Pages or Components(导入到其他页面或组件)
    
    创建组件后，可以轻松将其导入页面。在Gridsome项目中，建议将所有.vue组件放入src / components文件夹中，然后将其导入到Pages或Layouts中，示例如下所示:
    - components/card.vue
```
<template>
  <div>
      components=>card.vue
  </div>
</template>
```
    - pages/About.vue
```
//pages=>About.vue

<template>
  <Card />
</template>

<script>
import Card from '../components/Card.vue'

export default {
  components: {Card}
}
</script>
```
  - Add GraphQL to Components（将GraphQL添加到组件）
    
    每个组件都可以具有一个带有GraphQL查询的<static-query>块，以从数据源获取数据。结果将存储在组件内部的$ static属性中。
```
<template>
  <div v-html="$static.post.content" />
</template>

<static-query>
query {
  post (id: "1") {
    content
  }
}
</static-query>
```