gridsome官网

开发环境

  • 安装gridsome

    1. npm install --global @gridsome/cli
    2. gridsome create my-gridsome-site // 创建项目

  • 注意，第2部持续时间可能很长，最终会失败，由于安装依赖时，有些包在国外网站上，下载速度很慢

  • 可以中断 过程，使用cnpm安装

gridsome环境依赖问题

  • sharp包下载很慢，需要设置 淘宝镜像，可以访问 github的sharp仓库，找到配置

    1. npm config set sharp_binary_host "https://npmmirror.com/mirrors/sharp"
    2. npm config set sharp_libvips_binary_host "https://npmmirror.com/mirrors/sharp-libvips"

  • 安装node-gyp，需要python和c++的一些环境支援


  • node-gyp 当前是 9.1.0，对应的python版本是3.x.x
  • 还可以设置本地host文件，可以正常访问github，此时，可以尝试 npm i安装依赖
  • 下面的windows平台下，安装 c++编译工具
    1. npm i -g --production windows-build-tools
    2. npm config set msvs_version 2017

image.png

项目目录

image.png

  • pages下为页面目录，新建一个 .vue文件就会自动创建一个对应的路由

    创建页面的两种方式

  • file system即按照上面的方式，根据 在pages目录下的 目录自动生成

  • 编程式，在gridsome.server.js 中使用creatPage来实现

    1. module.exports = function (api) {
    2. api.createPages(({ createPage }) => {
    3.    // Use the Pages API here: https://gridsome.org/docs/pages-api/
    4.   createPage({
    5.     path: '/my-page',
    6.     component: './src/templates/MyPage.vue'
    7.   })
    8. })
    9. }

    动态路由

  • 根据file-system

    • src/pages/user/[id].vue -> /user/:id.
    • src/pages/user/[id]/settings.vue -> user/:id/settings.

collection 集合

  • collection是一系列节点的集合，每个节点都包含一些页面需要的数据

  • 新增一个collection有许多种方案

  • 通过发送请求或者其他的方式获取 数据，然后将其添加到 collection中即可

    1. module.exports = function (api) {
    2. api.loadSource(async ({ addCollection }) => {
    3.   // Use the Data Store API here: https://gridsome.org/docs/data-store-api/
    4.   // 预加载一些数据
    5.   const collection = addCollection('Post')
    7.   const { data } = await axios.get('http://jsonplaceholder.typicode.com/posts')
    8.   for (const item of data) {
    9.     collection.addNode({
    10.       id: item.id,
    11.       uesrId: item.userId,
    12.       title: item.title,
    13.       content: item.body
    14.     })
    15.   }
    16. })
    18. api.createPages(({ createPage }) => {
    19.   // Use the Pages API here: https://gridsome.org/docs/pages-api/
    20. })
    21. }

  • 在项目启动后，会有三个地址展示在 终端里面

image.png

  • 最后的 GraphQLdata 地址，是本地内存中管理的 预加载的数据

image.png

  • 每一个 collection都会根据其 添加时 的名字，创建 两个 数据，如创建时 名字是 Post ， 那么会有两个根作用域 对应它 post , 和 allPost,如上图

  • 左侧是 graphql的 请求数据的 api, 需要什么数据，就将 对应的key写上就可以了

    页面使用 collection中的数据

  • 页面组件，就在page-query标签中共 写上请求的 语句即可

    1. <page-query>
    2. query {
    3. allPost {
    4.   edges {
    5.     node {
    6.       id,
    7.       title,
    8.       content
    9.     }
    10.   }
    11. }
    12. }
    13. </page-query>

  • 页面中可以使用vue-devtool查看，对应的数据

image.png

  • 如果想要展示详情时，此时应该是动态路由，需要使用template功能
  • Templates are used to create single pages for nodes in a collection. Nodes need a corresponding page in order to be presented on its own URL. ```javascript module.exports = { siteName: ‘alvin-gridsome’, plugins: [], templates: { Post: [
    1.   {
    2.     // 此处动态路由
    3.     path: "/post-detail/:id",
    4.     // 使用对应的模板组件
    5.     component: './src/templates/PostDetail.vue'
    6.   }
    ] } }
  2. - 在/src/templates/PostDetail.vue中
  3. ```javascript
  4. <template>
  5.     <Layout>
  6.         <div>
  7.             <h1>{{ $page.post.title }}</h1>
  8.             <div>{{ $page.post.content }}</div>
  9.         </div>
  10.     </Layout>
  11. </template>
  12. <page-query>
  13. query($id:ID!) {// id为动态路由中定义的id
  14.   post (id:$id) {
  15.     id,
  16.     content,
  17.     title
  18.   }
  19. }
  20. </page-query>
  21. <script>
  22. export default {
  23.     name: 'PostDetail',
  24. };
  25. </script>

项目中添加数据源

本地数据（markdown文件）

  • 需要使用到 source-filesystem插件，此插件还依赖一个 transformer-remark插件

    1. npm install @gridsome/source-filesystem
    2. npm install @gridsome/transformer-remark

  • 配置gridsome.config.js文件 ```javascript module.exports = { siteName: ‘Gridsome’, plugins: [ {

    1. use: '@gridsome/source-filesystem',
    2. options: {
    3.   // collection名
    4.   typeName: 'BlogPost',
    5.   // 指定目录下的文件作为资源
    6.   path: './content/blog/**/*.md',
    7. }

    } ] }

```

其他api提供的数据

  • 本次使用strapi来提供

    gridsome部署到github上，动态部署

  • 服务器未处理ssl问题，所以导致部署的项目访问图片等媒体文件时，失败

  • 使用vercle 来实现，当strapi的内容发生变化时，动态的 执行gridsome打包，运行操作
  • 首先将gridsome代码上传到 github上
  • 先进入vercle官网，可以使用github账号关联登录

image.png
image.png

image.png

  • 选择需要管理的 仓库

image.png

  • 点击import ,来配置

image.png

  • 填写一些环境变量和构建项目指定的指令，点击deploy即可

image.png

  • 此时，如果有新代码提交到仓库，就会执行deploy, 重新打包构建

    strapi 的变化关联到vercle

  • 启动strapi 项目，进入面板，点击 设置，进入设置页面

image.png

  • 点击webhook 进入hook设置

image.png

  • vercle在导入github仓库部署后，可以查找设置

image.png