Gridsome 案例__Vue.js
发布于 1 个月前 作者 banyungong 176 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

创建项目

gridsome create blog-with-gridsome

yarn dev

启动项目:

image.png

使用github中的 开源模板,最好是将其fork到自己的账户当中,防止模板文件被作者删除或者做一些其他的修改。

处理首页模板

  • 根据模板中的package.json,安装依赖 npm i bootstrap @fortawesome/fontawesome-free
  • 将其余样式文件,写入到项目 src/assets/css/index.css 中
@import url("https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800")

// 将模板中的css样式复制到此处
// ...
  • 在项目中的main.js import以上样式文件
import 'bootstrap/dist/css/bootstrap.min.css'
import '[@fortawesome](/user/fortawesome)/fontawesome-free/css/all.min.css'

import './assets/css/index.css'

处理其他页面模板

在模板中,其实每个页面的头部导航和尾部都是相同的,可以将其放在默认的布局组件中,中间的内容部分可以分别放在不同的组件中。

layouts

默认为 Default.vue 文件, 可在 main.js 中修改

// Default.vue
<template>
    <header></header>
    <slot />
    <footer></footer>
</template>
// 其它 .vue 文件
<template>
    <Layout>
    <!-- 主体内容 -->
  </Layout>
</template>

将 Post、About、Contact页面的内容拷贝到项目中。相关的模板完成之后,接下来会使用gridsome的方式来构建纯静态的博客网站。

使用本地md文件管理文章内容

gridsome中数据可以放到任何地方,可以是本地,或者后台

通过插件导入,使用@gridsome/source-filesystem

yarn add [@gridsome](/user/gridsome)/source-filesystem

在对应的plugins中配置,配置之后需要进行转换,需要使用@gridsome/transformer-remark

yarn add [@gridsome](/user/gridsome)/transformer-remark
module.exports = {
  siteName: 'Gridsome',
  plugins: [
    {
      use: '[@gridsome](/user/gridsome)/source-filesystem',
      options: {
        typeName: 'BlogPost',
        path: './content/blog/**/*.md'
      }
    }
  ]
}

可在content/blog目录下新增md文件

content
--blog
    --article1.mg
    --article2.md

重启后,打开 http://localhost:8080/___explore 可查询到新增的经过转换的md文件数据

image.png

Strapi 基本使用

除了通过本地的md文件管理博客内容方式之外,也可以通过网站后台管理

grisome本身是未提供后台功能,推荐使用strapi实现需求

地址: https://strapi.io

介绍:是一个内容管理后台,可自定义管理结构

  1. 基本使用 安装:
npx create-strapi-app blog-project --quickstart

启动之后,需要注册账号

使用插件,内容类型生成器

新加字段和内容,然后使用strapi的接口数据

  1. 使用GraphQL查看数据

安装

cd blog-project
npm run strapi install graphql

打开 http://localhost:1337/graphql 查看graphql的数据

image.png

  1. 将Strapi数据预取到Gridsome应用中 要将strapi集成到gridsome中,需要使用@gridsome/source-strapi的一个插件

之后在gridsome的配置文件gridsome.config.js的plugins中添加如下代码:

{
  use: '[@gridsome](/user/gridsome)/source-strapi',
    options: {
    apiURL: 'http://localhost:1337',
    queryLimit: 1000,
    contentTypes: ['post'],
    // loginData: {
    //   identifier: '',
    //   password: ''
    // }
}

打开 http://localhost:8080/___explore 查看graphql的数据

image.png

如果此时在strapi的后台添加一条数据,在gridsome中是查不到的,若要解决这个问题,重启下gridsome服务就好了。

  1. 文章列表分页 Gridsome提供了@paginate的api来实现分页的功能。可以自定义页数和每页条数。
<page-query>
query ($page: Int) {
  posts: allStrapiPost (perPage: 2, page: $page) [@paginate](/user/paginate) {
    edges {
      node {
        id
        title
        content
        tags {
          id
          title
        }
      }
    }
  }
}
</page-query>

Gridsome还提供了分页组件Pager,需要像正常组件一样先注册再使用,还需要在page-query中添加查询语句:

<pager :info="$page.posts.pageInfo"></pager>
query ($page: Int) {
    posts: allStrapiPost (perPage: 1, page: $page) [@paginate](/user/paginate) {
        pageInfo {
            totalPages
            currentPage
        }
        ...
    }
}

部署 Strapi

gridsome项目即博客应用本身可以部署任何支持静态文件的web服务里,而strapi应用需要部署在支持Node.js的环境中。因为gridsome项目在启动时需要请求strapi的服务来获取预渲染的数据,所以要先部署strapi的应用。

strapi默认是使用的sqlite来做数据存储,也可以使用诸如mysql mongodb等其他的数据库,在官网都有相应的配置项,这里使用mysql实现。

要想使用mysql,首先要在服务器里面有mysql的环境,其次修改strapi项目的配置文件config\database.js。配置文件修改如下:

module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
      default: {
          connector: 'bookshelf',
          settings: {
              client: 'mysql',
              host: env('DATABASE_HOST', 'localhost'),
              port: env.int('DATABASE_PORT', 3306),
              database: env('DATABASE_NAME', 'blog'),
              username: env('DATABASE_USERNAME', 'root'),
              password: env('DATABASE_PASSWORD', ''),
          },
          options: {},
      },
  },
});

这里host使用的是本机地址,是因为我这里的mysql和strapi是在同一台服务器上,如果在不同的服务器的话,这里要写成其他服务器的地址,其次要有一个名字为blog的数据库,否则部署时会报错找不到对应数据库的。

部署的过程也很简单,直接在云服务器上把源码clone下来,然后运行npm install npm run build等命令,直接打包就好,但是这种方式有个缺点,就是当前用npm start连接断掉之后,服务也就挂了,所以这里使用pm2(npm i -g pm2)进程守护来执行npm命令。

npm i -g pm2
pm2 start npm --run start --name blog-backend

把本地服务联通远程Strapi

配置环境变量,开发模式、生产模式,将gridsome.config.js修改 apiURL 为部署的远程地址/本地地址

.env.devlopment 在开发模式下运行 .env.production 在生产模式下运行

apiURL: process.env.GRIDSOME_API_URL,

在main.js中 混入GRIDSOME_API_URL,这样在全局都可以使用到这个变量。方便后续更改.vue文件中的图片资源等…

export default function (Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.mixin({
    data() {
        return {
        GRIDSOME_API_URL: process.env.GRIDSOME_API_URL
      }
    }
  })
  Vue.component('Layout', DefaultLayout)
}

部署 Gridsome 应用

Develop. Preview. Ship. For the best frontend teams – Vercel

image.png

当Strapi后端数据每次更新时,我们需要再次重新部署vercel,很麻烦。所以自动化!

image.png

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: Ada 原文链接:https://juejin.im/post/6949724161157627918

回到顶部