基於Vue的極簡生成器 — Vuepress

来源:https://www.cnblogs.com/helong-123/archive/2022/06/01/16334206.html
-Advertisement-
Play Games

為什麼要使用Vuepress VuePress由兩部分組成:一個極簡的靜態站點生成器,帶有一個vue支持的主題系統和Plugin API,以及一個為編寫技術文檔而優化的預設主題。創建它是為了支持Vue自己的子項目的文檔需求。 由VuePress生成的每個頁面都有自己的預渲染靜態HTML,提供了良好的 ...


為什麼要使用Vuepress

VuePress由兩部分組成:一個極簡的靜態站點生成器,帶有一個vue支持的主題系統和Plugin API,以及一個為編寫技術文檔而優化的預設主題。創建它是為了支持Vue自己的子項目的文檔需求。

由VuePress生成的每個頁面都有自己的預渲染靜態HTML,提供了良好的載入性能和seo友好。然而,一旦頁面被載入,Vue將接管靜態內容並將其轉換為完整的單頁應用程式(Single-Page Application, SPA)。當用戶在站點中導航時,會根據需要獲取額外的頁面。

通過本教程中,你將從頭開始構建自己的應用,分別使用 create-vuepress-site 生成器 和 雲開發平臺

create-vuepress-site 生成器 快速搭建項目

一、搭建本地開發環境

  • 需要NodeJS 10。您可以使用n、nvm或nvm-windows 在同一臺機器上管理多個版本的Node。 要瞭解如何安裝 Node.js,參閱nodejs.org。 如果你不確定系統中正在運行的 Node.js 版本是什麼,請在終端視窗中運行node -v。

  • npm 包管理器 因為我們通常都會使用vuepress 提供的腳手架搭建項目結構,所以要下載並安裝 npm 包並且npm >= 6。,你需要一個 npm 包管理器。本指南使用 npm 客戶端命令行界面,該界面預設安裝在 Node.js。要檢查你是否安裝了 npm 客戶端,請在終端視窗中運行 npm -v 。

  • 你可以使用 create-vuepress-site 生成器 來創建項目,生成應用和庫代碼,以及執行各種持續開發任務,比如測試、打包和部署。

二、創建新的初始應用

  • 要想創建一個新的初始應用項目,請執行:
npx create-vuepress-site [optionalDirectoryName]

該命令將以交互方式詢問詳細信息以配置您的 VuePress 站點的元數據,例如:

  • 項目名
  • 描述
  • 維護者電子郵件
  • 維護者姓名
  • 存儲庫 URL

docs完成此操作後,將在當前目錄下的目錄(或自定義目錄名稱,如果通過)中創建一個腳手架文檔站點。

三、啟動應用伺服器

進入工作區目錄,並啟動這個應用。

cd docs
npm install
npm run dev

npm run dev 命令會構建本應用、啟動開發伺服器、監聽源文件,並且當那些文件發生變化時重新構建本應用,
也會打開瀏覽器,並訪問 http://localhost:8080/

你會發現本應用正運行在瀏覽器中。

參考文獻:https://vuepress.vuejs.org/

雲開發平臺一鍵部署vuepress

作為vuepress開發者的你,雲開發平臺為你提供了一站式,全雲端的開發平臺,讓你可以打開瀏覽器就完成開發,調試,上線,同時雲開發平臺底層調用的是阿裡雲集團Serverless產品,可以實現低門檻開發,部署,調試,降低開發上手成本,讓vuepress應用可以一鍵快速部署!

一、創建環境

想要一鍵部署vuepress,需要以下賬號和服務:

file

二、創建vuepress應用

file

  • 雲資源訪問授權。如果您之前沒有使用過雲開發平臺,會出現雲資源授權管理的選項,往下拉出現直至同意授權的字樣,點擊「同意授權」後出現授權成功,點擊進入「下一步」。

file

  • 綁定Github賬號。授權完成後選擇來源倉庫為Github,按照提示點擊去綁定,綁定GitHub帳號,登錄後並點擊Authorize Aliyunworkben允許雲開發平臺構建、發佈你的GitHub代碼為可訪問的網站。

file

  • 選擇fork好的“vuepress”代碼倉庫。選擇第一步中的代碼倉庫,主幹分支,並點擊下一步。主幹分支一般指的是代碼的master或main等分支。

file

填寫基本信息,完成創建。填寫基本信息並點擊「完成」。成功後進入到應用詳情和部署界面。

file

三、在日常環境部署

  • 一鍵進行應用部署。在應用詳情頁面點擊日常環境的「部署」按鈕進行一鍵部署,部署狀態變成綠色已部署以後可以點擊訪問部署網站查看效果。

file

  • 訪問vuepress網站。日常環境的測試功能變數名稱也是可以訪問的,點擊訪問已部署網站按鈕會出現一個彈出,點擊彈出上的立即訪問就能夠訪問已經部署好的站點了。在部署完成後,可以繼續本地編碼,並將代碼push到應用的“基本信息”中對應的代碼倉庫內。

file

阿裡雲開發平臺多端應用

在平臺中擁有熱門開源應用的中心,以此去為每一位開發者的開發之路保駕護航。目前共涵蓋多個領域,不乏像vuepress.js、React、Nuxt.js、Next.js、AntDesign等熱門必備的框架,也包含了內容管理平臺Hexo、Docusaurus、vuepressPress、Sapper等。提供給您了一個免費、便捷的雲上研發工作平臺,通過學習與實操演練兩種模式,從入門到精通快速上手Serverless和雲開發技術。0門檻全雲端開發、隨時隨地線上協同、業界領先Serverless架構、行業應用一件初始化等特性也同步在每一次的實踐。

雲原生應用、主機應用部署、前端應用部署三大板塊的支持,也供開發者們找到最合適自己神器,令開發工作事半功倍。其中滿足IoT語音技能、小程式、H5應用等開發者低門檻應用開發的需求;也支持代碼編譯部署到ECS主機伺服器的場景,幫助用戶管理傳統主機應用的能力;讓前後端應用能夠更高效地協同。平臺將持續與開發者一起共同成長,幫忙開發者更好、更快以及更低成本的開發,多端的應用更加快速的上雲。

file


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Linux(CentOs)安裝Redis教程 一,下載Redis(兩種方式) 1,找到redis官網(https://redis.io/download) **如果想下載指定版本就去這個網址(https://download.redis.io/releases/)**本次安裝選擇的Redis版本:6 ...
  • 目錄 一.簡介 二.效果演示 三.源碼下載 四.猜你喜歡 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 基礎 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 轉場 零基礎 O ...
  • 本文講述如何查找資料庫里重覆的行。這是初學者十分普遍遇到的問題。方法也很簡單。這個問題還可以有其他演變,例如,如何查找“兩欄位重覆的行”(#mysql IRC 頻道問到的問題) 如何查找重覆行 第一步是定義什麼樣的行才是重覆行。多數情況下很簡單:它們某一列具有相同的值。本文采用這一定義,或許你對“重 ...
  • 📕 C++輸入輸出 目的:解決ACM模式下的輸入輸出問題 題目來源:牛客OJ練習場 第一題:計算多組a+b 輸入描述:輸入包括兩個正整數a,b(1 ⇐ a, b ⇐ 10^9),輸入數據包括多組。 輸出描述:輸出a+b的結果 示例 輸入: 1 5 10 20 輸出: 6 30 代碼: #inclu ...
  • 一、前言 小編最近公司有個新的需求,數據量比較大,要涉及到分庫分表。大概瞭解了一些主流的中間件,使用和網上資料比較多的是Mycat和sharding-jdbc,小編比較傾向於Mycat。原因很簡單就是參考的資料比較多,教學比較多,小編經過一天的嘗試,終於完成了!這篇主要是實戰,一些知識點請自行百度, ...
  • 介紹 Elastic Stack 是一個可以幫助我們構建搜索體驗、解決問題並取得成功的搜索平臺。核心產品包括 Elasticsearch、Kibana、Beats 和 Logstash(也稱為 ELK Stack)等等。能夠安全可靠地獲取任何來源、任何格式的數據,然後實時地對數據進行搜索、分析和可視 ...
  • 一、開發背景 產品出設計稿要求做一個仿原生app簡訊驗證碼組件,花了兩小時搞出來一個還可以的組件,支持屏幕自適應,可以用於彈出框,或自己封裝的vue組件里,希望可以幫助那些被產品壓榨的同學,哈哈。😄 其核心思想就是利用一個輸入框使用css3,translate屬性,每輸入一次後向右位移一個單位位置 ...
  • 文件上傳和導入 控制器代碼 [Route("api/[controller]")] [ApiController] public class UpdController : ControllerBase { private readonly IWebHostEnvironment env; priv ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...