時(shí)間：2023-04-30 00:30:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-04-30 00:30:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
靜態(tài)站點(diǎn)生成：Gridsome 是一個(gè)免費(fèi)、開(kāi)源、基于Vue.js 技術(shù)棧的靜態(tài)網(wǎng)站生成器。靜態(tài)網(wǎng)站生成器：
官網(wǎng)： https://gridsome.org
在線咨詢(xún)
// 安裝npm install --global @gridsome/cli// 創(chuàng)建項(xiàng)目gridsome create <project> 1. Install dependencies 時(shí)，Ctrl + c 打斷 2. rm -rf node_modules 3. npm install cd <project>// 啟動(dòng)windowgridsome develop // localhost:8080或npm run developgridsome 依賴(lài) sharp 模塊，處理圖片。它包含C++,很難安裝。// 先安裝 sharpnpm 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"// 安裝 gridsome時(shí)自動(dòng)安裝 sharp// npm install sharp 安裝 sharp 依賴(lài)的 C++ 環(huán)境npm install --global --production windows-build-tools// 必須要安裝Python 進(jìn)行編譯，windows-build-tools 中有// 安裝靜態(tài)服務(wù)npm install -g serve// 執(zhí)行部署的目錄serve dist// 通過(guò) npm run build 打包的文件，可以直接部署到服務(wù)器上// gradsome.config.js官方文檔 configjs // gridsome.server.js api.createPages(({ createPage}) => { createPage({ path: '/user/:id(//d+)', component: './src/templates/User.vue' }) })// Index.vuemetaInfo: { tutle: '', meta: [ {name: '', content: ''} ]}404頁(yè)面： src/pages/404.vue// 第三方模擬測(cè)試接口jsonplaceholder.typicode.com集合用于承載數(shù)據(jù)，gridsome 運(yùn)用模板將集合渲染成頁(yè)面。// gridsome.server.jsconst axios = require('axios')module.exports = function (api) { api.loadSource(({ addCollection }) => { const collection = addCollection('Post') const { data } = await axios.get('jsonplaceholder.typicode.com/posts') for(const item in data){ collection.addNode({ id: item.id, title: item.title, content: item.body }) } })}GraphQL: 一種用于 API 的查詢(xún)語(yǔ)言。GraphQL 對(duì)你的 API 中的數(shù)據(jù)提供了一套易于理解的完整描述，使得客戶(hù)端能夠準(zhǔn)確地獲得它需要的數(shù)據(jù)。
// localhost:8080/__explorequery { post (id: 2){ id title }}// 頁(yè)面中<div>{{ $page.books }}</div><page-query> query{ books: allBooks{ } }</page-query>// 組件中<static-query> query{ }</static-query>// 頁(yè)面鏈接<g-link></g-link>// template/Post.vue<g-link :to="$page.post.path"></g-link><page-query> query($id: ID!){ // ID類(lèi)型，不能為空 post (id: $id){ id title content path } }</page-query>// gridsome.config.jsmodule.exports = { templates: { Post: [ { path: '/posts/:id', component: './src/templates/Post.vue' } ] }}// 創(chuàng)建項(xiàng)目gridsome create blog-with-gridsome// 啟動(dòng) npm run developgit clone https://github.com/cuihuale2021/startbootstrap-clean-blog.git --depth=1 #使用最新版本// 放到同一個(gè)編輯器中cd startbootstrap-clean-blog/code -a .static 文件夾下的圖片不會(huì)進(jìn)行打包編譯。它是直接暴露給服務(wù)端的，引用時(shí) “/img/abc.png”npm install @gridsome/source-filesystem// 配置插件 gridsome.config.jsmodule.exports = { siteName: 'Gridsome', plugins: [ { use: '@gridsome/source-filesystem', options: { typeName: 'BlogPost', path: './content/blog/**/*.md', } } ]}// 安裝轉(zhuǎn)換器npm install @gridsome/transformer-remark // 將 md 文件轉(zhuǎn)為 html通用的內(nèi)容管理系統(tǒng)，后臺(tái)管理文章博客文章，商品，用戶(hù)評(píng)論，用戶(hù)等。
官網(wǎng)： http://strapi.io
// 安裝npx create-strapi-app my-app --quickstart在創(chuàng)建好的后臺(tái)管理系統(tǒng)中，添加字段、編輯內(nèi)容。localhost:1337/posts// 登錄localhost:1337/auth/local// 接口測(cè)試localhost:1337/posts// 安裝 GraphQLyarn strapi install graphqlnpm run strapi install graphqlstrapi install graphql // 已全局安裝 strapi可視化安裝：// 訪問(wèn)npm run developlocalhost:1337/graphql// 在 gridsome 中使用插件npm install @gridsome/source-strapi// 在 gridsome.config.js 中配置插件重啟服務(wù)，拉取最新數(shù)據(jù)// index.vuequery ($page: Int){ posts: allStrapiPost(perpage: 2, page: $page) @paginate{ // perpage 每頁(yè)多少條 page 當(dāng)前頁(yè) pageInfo { totalPages currentPage } edges { // 數(shù)據(jù) } }}// 分頁(yè)頁(yè)碼的顯示import { Pager } from 'gridsome' //... components: { Pager }// 使用組件<Pager :info="$page.posts.pageInfo" />// gridsome.config.jstemplates: { StrapiPost: [ // 集合的名字 source-strapi 生成的， typeName + contentTypes { path: '/post/:id', component: './src/templates/Post.vue' } ]}/換成/ a鏈接會(huì)刷新頁(yè)面query($id: ID!){ // 文章id 為 ID類(lèi)型，非空 post: strapiPost(id: $id){ // 設(shè)置別名為 post // ... }}// 封面圖:style = "{ backgroundImage: `url(http://localhost:1337${ $page.post.cover.url })`}"// 文章內(nèi)容v-html="$page.post.content"npm install markdown-it// 使用var MarkdownIt = require('markdown-it'),md = new MarkdownIt()methods: { mdToHtml(content) { return md.render(content) }}v-html="mdToHtml( $page.post.content )"// sourc-strapi 中配置contentTypes: ['post', 'tag']查詢(xún)、遍歷到模板// source-strapi 插件配置singleTypes: ['general'],查詢(xún)、賦值// 安裝 axiosnpm install axios// strapi config/database.jsclient: "" // 默認(rèn)使用“sqlite” 數(shù)據(jù)庫(kù)，可以改為 Mongodb, mysql// 官網(wǎng) mysql 的配置選項(xiàng)strapi 部署的服務(wù)器，和數(shù)據(jù)庫(kù)同一個(gè)服務(wù)器的話， host 為 “l(fā)ocalhost”// 安裝mysqlnpm install mysql代碼提交到gitee 或 github, 在服務(wù)器遠(yuǎn)程拉取下載git clone xxxxcd xxx/npm install npm run buildnpm run start// 持久運(yùn)行 pm2 start npm -- run start --name blog-backend// 訪問(wèn)xxx.xx:1337/admin設(shè)置接口、權(quán)限、測(cè)試接口// gridsome.config.jsapiUrl: '', // 遠(yuǎn)程strapi地址可以創(chuàng)建環(huán)境變量: .env.development 和 .env.production 文件// 客戶(hù)端訪問(wèn)GRIDSOME_API_URL = ""apiUrl: process.env.GRIDSOME_API_URLVue.mixin() 將環(huán)境變量混入到實(shí)例，全局使用1. Vercel ——> 項(xiàng)目 ——> Settings ——> Deploy Hooks ——> 創(chuàng)建并復(fù)制2. Strapi ——> 設(shè)置 ——> webhook關(guān)鍵詞：靜態(tài)
客戶(hù)&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
客戶(hù)&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
