Vue - Gridsome使用

最新推荐文章于 2024-09-25 08:45:14 发布

Bal炎魔

最新推荐文章于 2024-09-25 08:45:14 发布

阅读量816

点赞数

分类专栏： Vue 笔记

本文链接：https://blog.csdn.net/weixin_44479322/article/details/113884906

版权

笔记同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

Vue

11 篇文章 0 订阅

订阅专栏

Vue - Gridsome使用

是什么

一个免费、开源、基于Vue.js技术栈的静态网站生成器
GitHub 仓库：https://github.com/gridsome/gridsome
官网：https://gridsome.org/

什么是静态网站生成器

静态网站生成器是使用一系列配置、模板以及数据，生成静态 HTML 文件及相关资源的工具
这个功能也叫预渲染
生成的网站不需要类似 PHP 这样的服务器
只需要放到支持静态资源的 Web Server 或 CDN 上即可运行

静态网站的好处

省钱 - 不需要专业的服务器，只要能托管静态文件的空间即可
快速 - 不经过后端服务器的处理，只传输內容
安全 - 没有后端程序的执行，自然会更安全

JAMstack

这类静态网站生成器还有个漂亮的名字叫 JAMstack
JAMstack 的 JAM 是 Javascript、AP 和 Markup 的首字母组合
本质上是一种胖前端，通过调用各种 A 来实现更多的功能
其实也是一种前后端的模式，只不过离得比较开，甚至前后端来自多个不同的厂商

静态应用的使用场景

不适合有大量路由页面的应用:
如果您的站点有成百上干条路由页面，则预渲染将非常缓慢当然，您每次更新只需要做一次，但是可能要花一些时间。大多数人不会最终获得数千条静态路由页面，而只是以防万
不适合有大量动态内容的应用:
如果渲染路线中包含特定于用户查看其內容或其他动态源的内容，则应确保您具有可以显示的占位符组件，直到动态内容加载到客户端为止。否则可能有点怪异

其他静态站点框架推荐，

VuePress 非常适合文档站点；
Nuxt Vue.js 服务器端呈现（SSR)
Gatsby.js Gridsome的灵感来源

Gridsome项目使用

1、安装脚手架 Gridsome CLI

# 使用 yarn
yarn global add @gridsome/cli

# 使用 npm
npm install --global @gridsome/cli

# 查看是否安装成功
gridsome --version

2、创建 Gridsome 项目

# 创建项目
gridsome create my-gridsome-site

# 进入项目中
cd my-gridsome-site

# 启动开发模式，或 npm run develop
gridsome develop

注意，直接创建可能难以成功因为这个sharp
sharp https://github.com/lovell/sharp

gridsome 项目安装依赖注意事项：

配置 node-gyp 编译环境

https://github.com/nodejs/node-gyp

配置淘宝镜像源

配置环境变量：npm_config_sharp_libvips_binary_host 为 https://npm.taobao.org/mirrors/sharp-libvips/

https://github.com/lovell/sharp-libvips
https://developer.aliyun.com/mirror/NPM
https://npm.taobao.org/mirrors
https://sharp.pixelplumbing.com/install
npm config set sharp_binary_host "https://npm.taobao.org/mirrors/sharp"
npm config set sharp_libvips_binary_host "https://npm.taobao.org/mirrors/sharp-libvips"

配置 hosts：199.232.68.133 raw.githubusercontent.com

https://www.ipaddress.com/

3、打包项目

# 打包项目
npm run build

4、运行打包项目

可以安装node 的 serve 模块启动一个简单项目

npm install -g serve
# 启动 serve + 项目文件夹路径
serve dist

5、目录结构

.
├── src
│   ├── components # 公共组件
│   ├── layouts # 布局组件
│   ├── pages # 页面路由组件
│   ├── templates # 模板文件
│   ├── favicon.png # 网站图标
│   └── main.js # 应用入口
├── static # 静态资源存储目录，该目录中的资源不做构建处理
├── README.md
├── gridsome.config.js # 应用配置文件
├── gridsome.server.js # 针对服务端的配置文件
├── package-lock.json
└── package.json

6、gridsome.config.js 项目配置

可参考https://www.gridsome.cn/docs/config/

7、集合

免费的测试接口数据网址 http://jsonplaceholder.typicode.com/
就是在页面渲染前预取数据，

1、通过API 预取数据

gridsome.server.js

const axios = require('axios')

module.exports = function (api) {
  api.loadSource(async actions => {
    const collection = actions.addCollection('Post') 预取数据存入 Post

    const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts')

    for (const item of data) {
      collection.addNode({
        id: item.id,
        title: item.title,
        content: item.content
      })
    }
  })
}

从 GraphQL 中获取数据

Use in Pages & Templates.
Use in Components.
Page中渲染

<template>
  <Layout>
    <div>
      <h1>Posts 2</h1>
      <ul>
        <li v-for="edge in $page.allPost.edges" :key="edge.node.id">
          <g-link :to="'/'">{{ edge.node.title }}</g-link>
        </li>
      </ul>
    </div>
  </Layout>
</template>

<page-query>
query {
  allPost {
    edges {
      node {
        id
        title
        content
      }
    }
  }
}
</page-query>

2、读取本地文件，md文件

安装资源插件

npm install @gridsome/transformer-remark
npm install @gridsome/source-filesystem

配置gridsome.config.js

plugins: [
  {
    use: '@gridsome/source-filesystem',
    options: {
      path: './content/blog/**/*.md', //md文件路劲
      typeName: 'BlogPost', //数据名称
      remark: {
        //Config options can be added here
      }
    }
  }
],
transformers: {
  remark: {
    //Config options can be added here
  }
}

获取渲染

<template>
  <Layout>
    <div>Page Foo</div>
    <ul>
      <li v-for="edge in $page.allBlogPost.edges" :key="edge.node.id">
        <g-link :to="edge.node.path">{{ edge.node.title }}</g-link>
        <div v-html="edge.node.content"></div>
      </li>
    </ul>
  </Layout>
</template>

<page-query>
query {
  allBlogPost {
    edges {
      node {
        id
        path
        title
        content
      }
    }
  }
}
</page-query>

3、自主后台读取数据，API

Strapi介绍 https://strapi.io/

Strapi是一个灵活的、开源的无头CMS，它让开发人员可以自由选择他们喜欢的工具和框架，同时也允许编辑轻松地管理和分发他们的内容。通过使管理面板和API通过插件系统可扩展，Strapi使世界上最大的公司能够加速内容交付，同时建立美丽的数字体验。

安装

yarn create strapi-app my-project --quickstart
#或者
npx create-strapi-app my-project --quickstart

使用

cd my-project
npm run start

注册登录后便可开始设置了
在这里插入图片描述 graphQL 插件

yarn strapi install graphql
# 或者
npm run strapi install graphql

将项目启动后，直接打开 http://localhost:1337/graphql 地址便可以看到 graphQL

Gridsome中获取strapi数据

安装插件 @gridsome/source-strapi

yarn add @gridsome/source-strapi
# 或者
npm install @gridsome/source-strapi

配置gridsome.config.js

plugins: [
  {
    use: '@gridsome/source-strapi',
    options: {
      apiURL: 'http://localhost:1337',  //请求地址
      queryLimit: 1000, // Defaults to 100
      contentTypes: ['article', 'user'], //内容类型
      singleTypes: ['impressum'], //单个类型
      // Possibility to login with a Strapi user,
      // when content types are not publicly available (optional).
      loginData: {  //登录信息
        identifier: '',
        password: ''
      }
    }
  }
]

重启项目之后便可获取到数据

4、分页效果

利用 @paginate 指令放在要分页的集合之后
可以根据官网提示使用 https://www.gridsome.cn/docs/pagination/

query ($page: Int) {
  allBlogPost(perPage: 10, page: $page) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        title
        path
      }
    }
  }
}

分页组件

<template>
  <Layout>
    <ul>
      <li v-for="edge in $page.allBlogPost.edges" :key="edge.node.id">
        {{ edge.node.title }}
      </li>
    </ul>
    <Pager :info="$page.allBlogPost.pageInfo"/>
  </Layout>
</template>

<script>
import { Pager } from 'gridsome'

export default {
  components: {
    Pager
  }
}
</script>

<page-query>
query ($page: Int) {
  allBlogPost(perPage: 10, page: $page) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        title
      }
    }
  }
}
</page-query>

5、详情模板配置

配置gridsome.config.js

templates: {
  Post: [ // 数据名称
    {
      path: '/posts/:id',  //访问路径
      component: './src/templates/Post.vue' //资源路径
    }
  ]
},

项目部署

Strapi 部署

1、首先要选择并安装好数据库，在服务器上

配置strapi数据库 database
再strapi项目中找到 ./config/database.js.
添加 MySQL 库

module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'bookshelf',
      settings: {
        client: 'mysql',
        host: env('DATABASE_HOST', 'localhost'), //服务器地址ip
        port: env.int('DATABASE_PORT', 3306), //端口
        database: env('DATABASE_NAME', 'strapi'), //数据库名称
        username: env('DATABASE_USERNAME', 'root'), //用户
        password: env('DATABASE_PASSWORD', 'strapi'), //密码
      }, 
      options: {},
    },
  },
});

更新package.json

  "dependencies": {
    "mysql": "^2.18.1",  //数据库
    "strapi": "3.5.1",
    "strapi-admin": "3.5.1",
    "strapi-utils": "3.5.1",
    "strapi-plugin-content-type-builder": "3.5.1",
    "strapi-plugin-content-manager": "3.5.1",
    "strapi-plugin-users-permissions": "3.5.1",
    "strapi-plugin-email": "3.5.1",
    "strapi-plugin-upload": "3.5.1",
    "strapi-connector-bookshelf": "3.5.1",
    "knex": "<0.20.0",
    "sqlite3": "5.0.0"
  },