使用 Vue 和 Gridsome 構(gòu)建靜態(tài)站點

時間：2023-04-29 23:00:02 | 來源：網(wǎng)站運營

時間：2023-04-29 23:00:02 來源：網(wǎng)站運營

使用 Vue 和 Gridsome 構(gòu)建靜態(tài)站點：

靜態(tài)站點介紹

靜態(tài)網(wǎng)站生成器所做的事情也就是傳統(tǒng)開發(fā)中所謂的「靜態(tài)化渲染」，經(jīng)常出現(xiàn)在一些 CMS 系統(tǒng)中。

它是預(yù)渲染的，但是和服務(wù)端渲染有所不同。具體差異可以看這篇文章，靜態(tài)化與服務(wù)端渲染。

靜態(tài)網(wǎng)站不需要服務(wù)端支持，只需要將靜態(tài)生成的文件放到任意的文件托管服務(wù)器或者 CND 上即可。比如GitHub Pages 和阿里云 OSS 等。

靜態(tài)網(wǎng)站的優(yōu)點總結(jié)為：省錢、快速、安全。

省錢是值不需要完整的服務(wù)器，只需要文件托管服務(wù)求或者 CND，這類云服務(wù)的價格通常來說很便宜。

快速是指不需要調(diào)用后端 API 接口，也不需要服務(wù)端渲染時的數(shù)據(jù)填充和類似 MVVM 的客戶端渲染，瀏覽器拿到的就是可以直接使用的 HTML、CSS 和 JavaScript。

安全是指沒有后端服務(wù)的支持，理論上也就沒有任何漏洞，網(wǎng)站上的任何鏈接都是靜態(tài)內(nèi)容。

常見的靜態(tài)網(wǎng)站生成器有很多，比如 Ruby 的 Jekyll、Node 的 Hexo、Golang 的 Hugo、React 的 Gatsby、Vue 的 Gridsome 等等。

靜態(tài)網(wǎng)站還有一個別名，叫做 JAMStack。JAM分別是 JavaScript、Api、Markup 的首字母組合。

靜態(tài)化本質(zhì)上是一種胖前端。它也是前后端的模式，只不過在生成靜態(tài)網(wǎng)站后，前后端就不再有聯(lián)系了。

在靜態(tài)網(wǎng)站生成時，提供數(shù)據(jù)的后端可以來自多個服務(wù)，比如 RESTFul API、GraphQL、JSON 文件、無頭 CMS 等等。

在靜態(tài)網(wǎng)站運行時，靜態(tài)網(wǎng)站需要的一些功能比如登陸、閱讀量、收藏、點贊、評論等等可以來自不同的服務(wù)廠商，而不需要自己開發(fā)。除了使用專業(yè)服務(wù)外，另一種比較流行的方案是使用 serverless 自行開發(fā)，以此實現(xiàn)更高的客制化功能，比如騰訊云的云函數(shù)和阿里云的函數(shù)計算。

靜態(tài)化的適用場景通常是純內(nèi)容、弱交互的網(wǎng)站。如果網(wǎng)站有大量動態(tài)內(nèi)容，就不適合使用靜態(tài)化渲染了。它在本質(zhì)解決的問題就是提供極致的閱讀體驗。

靜態(tài)站點框架 Gridsome 基礎(chǔ)教程

Gridsome 是一個免費開源，基于 Vue.js 技術(shù)棧的靜態(tài)網(wǎng)站生成器。使用 Gridsome 需要有一定的 Vue 基礎(chǔ)和 GraphQL 基礎(chǔ)。

安裝、創(chuàng)建、啟動 gridsome 項目

首先全局安裝 gridsome 的命令行工具。

npm install --global @gridsome/cli然后使用 gridsome create <application-name> 命令創(chuàng)建項目。

gridsome create my-gridsome-site最后進入項目目錄下，使用 npm run develop 或 gridsome develop 啟動開發(fā)服務(wù)器。

cd my-gridsome-site && gridsome developgridsome 啟動成功后會提示 3 個地址。

Site running at:- Local: http://localhost:8080/- Network: http://192.168.1.131:8080/Explore GraphQL data at: http://localhost:8080/___explore第一個是本地地址。

第二個是公網(wǎng)IP地址。

第三個是管理 GraphQL 數(shù)據(jù)的控制臺地址。

預(yù)渲染

路由規(guī)則

打開項目，可以在 src/pages 目錄下看到 Index.vue 和 About.vue 文件，這兩個文件對應(yīng)的就是頁面中的 Home 頁面和 About 頁面。

在 girdsome 中，pages 目錄下的每個 vue 文件都對應(yīng)一個路由。

現(xiàn)在來添加第一個頁面。

// src/pages FirstPage.vue<template> <div>hello,my first page</div></template><script>export default { name: "first-page",};</script>然后訪問 http://localhost:8080/first-page，就可以看到對應(yīng)的內(nèi)容了。

編譯項目

接下來我們將項目編譯為靜態(tài)內(nèi)容。執(zhí)行下面的命令。

gridsome buildgridsome 會在項目中創(chuàng)建 dist 目錄，其中保存了所有的網(wǎng)頁。每一個 vue 文件都會被渲染為純 HTML 文件。這些文件都不會進行客戶端渲染，而是由瀏覽器直接呈現(xiàn)。也不會有 vue 運行時等 JavaScript 資源。所以可以做到極致的訪問速度。

部署項目

現(xiàn)在將 dist 目錄部署到任意服務(wù)器中即可。

下面使用 npm 的 serve 模塊啟動項目。

全局安裝 serve。

npm i serve -g啟動項目。

serve dist

目錄結(jié)構(gòu)

src

layouts 目錄中存放了全局的布局組件，在 main.js 中注冊了 Layout 組件。用于設(shè)置頁面的通用樣式布局。

像一些全局的樣式文件或者全局組件，都可以在 main.js 中引入。

pages 目錄存放了與路由相對應(yīng)的 vue 文件。

components 目錄存放公共組件。

templates 目錄中存放了 GraphQL Collection 的模板。

.temp 目錄是 gridsome 在運行中生成的臨時文件。

.cache

存放了緩存文件。

static

存放靜態(tài)文件，一些不需要編譯的文件，比如圖片、字體等資源。

girdsome.config.js 和 gridsome.server.js

分別是客戶端和服務(wù)端的配置文件，用于配置插件、設(shè)置站點全局信息、或者注入數(shù)據(jù)等等。

配置文件修改后需要重啟開發(fā)服務(wù)器才可以生效。

Pages 頁面

gridsome 支持兩種創(chuàng)建頁面的方式。一種是基于文件的方式，一種是編程的方式。

基于文件的方式

按照規(guī)則直接在 pages 目錄下創(chuàng)建 vue 文件就可以生成頁面。它有一些默認規(guī)則。

1. Index.vue 表示跟路徑 /。
2. 駝峰命名法會轉(zhuǎn)換為中橫線命名法。比如 AboutUs.vue 生成 about-us。
3. 嵌套文件生成嵌套路由。比如 /about/vision 生成 about/vision。
4. 默認尋找 Index.vue。比如 src/pages/blog/Index.vue 生成 /blog/。

編程的方式

在 girdsome.server.js 文件中默認導(dǎo)出方法中進行配置。

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

動態(tài)路由

gridsome 支持動態(tài)路由，使用中括號包裹路由參數(shù)。

src/pages/user/[id].vue 生成 user/:id。

src/pages/user/[id]/settings.vue 生成 user/:id/settings。

無論是基于文件還是編程的方式，都支持動態(tài)路由。

頁面 Meta 信息

gridsome 支持給每個頁面設(shè)置不同的 meta 信息。在默認導(dǎo)出的對象中添加 metaInfo 屬性，就可以生成 meta 信息。

export default { name: "first-page", metaInfo: { title: "Hello,World!", meta: [{ name: "authro", content: "John Doe" }], },};

自定義 404 頁面

gridsome 提供了一個默認的 404 頁面。

如果需要自定義 404 頁面，可以創(chuàng)建 src/pages/404.vue 文件。這個文件可以取代默認的 404 頁面。

Collections 集合

一個頁面可以通過調(diào)用接口來獲取數(shù)據(jù)動態(tài)填充頁面。調(diào)用接口獲取數(shù)據(jù)填充頁面這個步驟可以放到客戶端也可以放到服務(wù)端。

如果放到服務(wù)端，需要使用 gridsome 的 collections。

在 gridsome 的動態(tài)數(shù)據(jù)生成動態(tài)頁面的設(shè)計中，有 Data Sources、Collections 和 Nodes 三個概念。

Data Sources 是指數(shù)據(jù)源，可以來自任意形式的 API 接口，比如 WordPress、JSON 或者 Markdown 等等。

Collections 是 girdsome 將數(shù)據(jù)源轉(zhuǎn)換后的結(jié)果。

Nodes 是 collections 對應(yīng)的節(jié)點，每一個 node 都會生成一個頁面。

添加 Collections

創(chuàng)建 collections 有兩種方式，第一種是使用插件的形式（source plugins），在 gridsome.config.js 中進行配置。第二種是使用代碼調(diào)用接口的方式（Data Store API），在 gridsome.server.js 進行調(diào)用。

有一個開源的項目 jsonplaceholder。它是基于 JSON Server 和 LowDB 創(chuàng)建的，可以為我們提供免費的 Mock RESTful API 服務(wù)用于測試。

安裝用于請求的 axios 模塊。

npm i axios修改 gridsome.server.js 中的 loadSource 方法，去調(diào)用 jsonplaceholder 的 posts 加載數(shù)據(jù)。posts 接口提供了一百條 post 數(shù)據(jù)。

// gridsome.server.js// ...api.loadSource(async ({ addCollection }) => { const collection = addCollection('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 }) }})

查詢 Collections

修改全局的配置需要重新啟動服務(wù)，重新啟動后可以進入 http://localhost:8080/___explore，這是 GraphQL 的控制臺。

在控制臺右側(cè)有 DECS，其中包含了剛剛添加的 psot 和 allPost。

在左側(cè)編輯 GraphQL 查詢語句，點擊運行，就可以從右側(cè)的數(shù)據(jù)預(yù)覽欄中看到查詢結(jié)果。

比如查詢 id 為 10 的文章數(shù)據(jù)。

query { post(id: 10) { id title content }}使用分頁查詢前 10 條數(shù)據(jù)以及總條數(shù)。

query { allPost(skip: 0, limit: 10, order: ASC) { totalCount edges { node { id title content } } }}

在頁面和模板中獲取 GraphQL 數(shù)據(jù)

使用 page-query 標簽。page-query 和 template 標簽是平級的。page-query 中直接編寫 GraphQL 查詢語句，可以設(shè)置變量。查詢結(jié)果默認存入 $page 變量中。




<template> <div> <h1 v-html="$page.post.title" /> <div v-html="$page.post.content" /> </div></template><page-query>query ($id: ID!) { post(id: $id) { title content }}</page-query>

在組件中獲取 GraphQL 數(shù)據(jù)

使用 static-query 標簽，用法與 page-query 類似。查詢結(jié)果放入 page變量中。¨G14G¨K41K使用static?query標簽，用法與page?query類似。查詢結(jié)果放入static 中。

<template> <div v-html="$static.post.content" /></template><static-query>query { post (id: "1") { content }}</static-query>

Templates 模板

模板專門用于渲染 nodes。創(chuàng)建 template 需要兩步。

首先在 src/templates 中創(chuàng)建模板組件。

<template> <div> <h1 v-html="$page.post.title" /> <div v-html="$page.post.content" /> </div></template><page-query>query ($id: ID!) { post(id: $id) { title content }}</page-query>之后在 gridsome.config.js 中配置路由和模板組件。

module.exports = { templates: { Post: [ { path: '/post/:id', component: './src/templates/Post.vue' } ] }}如果想在 metaInfo 中獲取 GraphQL 中的數(shù)據(jù)，可以將 mateInfo 設(shè)置為函數(shù)。

metaInfo() { return { title: this.$page.post.title, };}以上就是 Gridsome 基礎(chǔ)教程的全部內(nèi)容。

我們有一個免費的學(xué)習(xí)網(wǎng)站，提供了前端、Python 等免費課程。

目前還有一個 Vue 的培訓(xùn)課程。

如果我們所做的事情能對你有所幫助，那真的是太棒了！