主頁 > 作業系統 > 基于Vue的極簡生成器 — Vuepress

基于Vue的極簡生成器 — Vuepress

2022-06-02 11:48:20 作業系統

為什么要使用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,需要以下賬號和服務:

  • Github賬號 (https://github.com/),
  • 阿里云賬號,并使用阿里云賬號登錄云開發平臺 (https://workbench.aliyun.com/) ,為保證最好的使用體驗,請使用Chrome瀏覽器,開通OSS服務,
  • 未開通阿里云OSS的用戶,點擊鏈接 (https://workbench.aliyun.com/product/open?code=oss) 開通OSS服務,OSS開通免費,有一定的免費額度,超過額度之后按量付費,

file

二、創建vuepress應用

  • 創建前端應用,打開快速開始 https://workbench.aliyun.com/app ,找到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

轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/484800.html

標籤:Linux

上一篇:如何編輯ListView控制元件專案的ItemContainerStyle?

下一篇:下拉元素未定位

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • CA和證書

    1、在 CentOS7 中使用 gpg 創建 RSA 非對稱密鑰對 gpg --gen-key #Centos上生成公鑰/密鑰對(存放在家目錄.gnupg/) 2、將 CentOS7 匯出的公鑰,拷貝到 CentOS8 中,在 CentOS8 中使用 CentOS7 的公鑰加密一個檔案 gpg -a ......

    uj5u.com 2020-09-10 00:09:53 more
  • Kubernetes K8S之資源控制器Job和CronJob詳解

    Kubernetes的資源控制器Job和CronJob詳解與示例 ......

    uj5u.com 2020-09-10 00:10:45 more
  • VMware下安裝CentOS

    VMware下安裝CentOS 一、軟硬體準備 1 Centos鏡像準備 1.1 CentOS鏡像下載地址 下載地址 1.2 CentOS鏡像下載程序 點擊下載地址進入如下圖的網站,選擇需要下載的版本,這里選擇的是Centos8,點擊如圖所示。 決定選擇Centos8后,選擇想要的鏡像源進行下載,此 ......

    uj5u.com 2020-09-10 00:12:10 more
  • 如何使用Grep命令查找多個字串

    如何使用Grep 命令查找多個字串 大家好,我是良許! 今天向大家介紹一個非常有用的技巧,那就是使用 grep 命令查找多個字串。 簡單介紹一下,grep 命令可以理解為是一個功能強大的命令列工具,可以用它在一個或多個輸入檔案中搜索與正則運算式相匹配的文本,然后再將每個匹配的文本用標準輸出的格式 ......

    uj5u.com 2020-09-10 00:12:28 more
  • git配置http代理

    git配置http代理 經常遇到克隆 github 慢的問題,這里記錄一下幾種配置 git 代理的方法,解決 clone github 過慢。 目錄 git配置代理 git單獨配置github代理 git配置全域代理 配置終端環境變數 git配置代理 主要使用 git config 命令 git單獨 ......

    uj5u.com 2020-09-10 00:12:33 more
  • Linux npm install 裝包時提示Error EACCES permission denied解

    npm install 裝包時提示Error EACCES permission denied解決辦法 ......

    uj5u.com 2020-09-10 00:12:53 more
  • Centos 7下安裝nginx,使用yum install nginx,提示沒有可用的軟體包

    Centos 7下安裝nginx,使用yum install nginx,提示沒有可用的軟體包。 18 (flaskApi) [root@67 flaskDemo]# yum -y install nginx 19 已加載插件:fastestmirror, langpacks 20 Loading ......

    uj5u.com 2020-09-10 00:13:13 more
  • Linux查看服務器暴力破解ssh IP

    在公網的服務器上經常遇到別人爆破你服務器的22埠,用來挖礦或者干其他嘿嘿嘿的事情~ 這種情況下正確的做法是: 修改默認ssh的22埠 使用設定密鑰登錄或者白名單ip登錄 建議服務器密碼為復雜密碼 創建普通用戶登錄服務器(root權限過大) 建立堡壘機,實作統一管理服務器 統計爆破IP [root ......

    uj5u.com 2020-09-10 00:13:17 more
  • CentOS 7系統常見快捷鍵操作方式

    Linux系統中一些常見的快捷方式,可有效提高操作效率,在某些時刻也能避免操作失誤帶來的問題。 ......

    uj5u.com 2020-09-10 00:13:31 more
  • CentOS 7作業系統目錄結構介紹

    作業系統存在著大量的資料檔案資訊,相應檔案資訊會存在于系統相應目錄中,為了更好的管理資料資訊,會將系統進行一些目錄規劃,不同目錄存放不同的資源。 ......

    uj5u.com 2020-09-10 00:13:35 more
最新发布
  • vim的常用命令

    Vim的6種基本模式 1. 普通模式在普通模式中,用的編輯器命令,比如移動游標,洗掉文本等等。這也是Vim啟動后的默認模式。這正好和許多新用戶期待的操作方式相反(大多數編輯器默認模式為插入模式)。 2. 插入模式在這個模式中,大多數按鍵都會向文本緩沖中插入文本。大多數新用戶希望文本編輯器編輯程序中一 ......

    uj5u.com 2023-04-20 08:43:21 more
  • vim的常用命令

    Vim的6種基本模式 1. 普通模式在普通模式中,用的編輯器命令,比如移動游標,洗掉文本等等。這也是Vim啟動后的默認模式。這正好和許多新用戶期待的操作方式相反(大多數編輯器默認模式為插入模式)。 2. 插入模式在這個模式中,大多數按鍵都會向文本緩沖中插入文本。大多數新用戶希望文本編輯器編輯程序中一 ......

    uj5u.com 2023-04-20 08:42:36 more
  • docker學習

    ###Docker概述 真實專案部署環境可能非常復雜,傳統發布專案一個只需要一個jar包,運行環境需要單獨部署。而通過Docker可將jar包和相關環境(如jdk,redis,Hadoop...)等打包到docker鏡像里,將鏡像發布到Docker倉庫,部署時下載發布的鏡像,直接運行發布的鏡像即可。 ......

    uj5u.com 2023-04-19 09:26:53 more
  • 設定Windows主機的瀏覽器為wls2的默認瀏覽器

    這里以Chrome為例。 1. 準備作業 wsl是可以使用Windows主機上安裝的exe程式,出于安全考慮,默認情況下改功能是無法使用。要使用的話,終端需要以管理員權限啟動。 我這里以Windows Terminal為例,介紹如何默認使用管理員權限打開終端,具體操作如下圖所示: 2. 操作 wsl ......

    uj5u.com 2023-04-19 09:25:49 more
  • docker學習

    ###Docker概述 真實專案部署環境可能非常復雜,傳統發布專案一個只需要一個jar包,運行環境需要單獨部署。而通過Docker可將jar包和相關環境(如jdk,redis,Hadoop...)等打包到docker鏡像里,將鏡像發布到Docker倉庫,部署時下載發布的鏡像,直接運行發布的鏡像即可。 ......

    uj5u.com 2023-04-19 09:19:04 more
  • Linux學習筆記

    IP地址和主機名 IP地址 ifconfig可以用來查詢本機的IP地址,如果不能使用,可以通過install net-tools安裝。 Centos系統下ens33表示主網卡;inet后表示IP地址;lo表示本地回環網卡; 127.0.0.1表示代指本機;0.0.0.0可以用于代指本機,同時在放行設 ......

    uj5u.com 2023-04-18 06:52:01 more
  • 解決linux系統的kdump服務無法啟動的問題

    問題:專案麒麟系統服務器的kdump服務無法啟動,沒有相關日志無法定位問題。 1、查看服務狀態是關閉的,重啟系統也無法啟動 systemctl status kdump 2、修改grub引數,修改“crashkernel”為“512M(有的機器數值太大太小都會導致報錯,建議從128M開始試,或者加個 ......

    uj5u.com 2023-04-12 09:59:50 more
  • 解決linux系統的kdump服務無法啟動的問題

    問題:專案麒麟系統服務器的kdump服務無法啟動,沒有相關日志無法定位問題。 1、查看服務狀態是關閉的,重啟系統也無法啟動 systemctl status kdump 2、修改grub引數,修改“crashkernel”為“512M(有的機器數值太大太小都會導致報錯,建議從128M開始試,或者加個 ......

    uj5u.com 2023-04-12 09:59:01 more
  • 你是不是暴露了?

    作者:袁首京 原創文章,轉載時請保留此宣告,并給出原文連接。 如果您是計算機相關從業人員,那么應該經歷不止一次網路安全專項檢查了,你肯定是收到過資訊系統技術檢測報告,要求你加強風險監測,確保你提供的系統服務堅實可靠了。 沒檢測到問題還好,檢測到問題的話,有些處理起來還是挺麻煩的,尤其是線上正在運行的 ......

    uj5u.com 2023-04-05 16:52:56 more
  • 細節拉滿,80 張圖帶你一步一步推演 slab 記憶體池的設計與實作

    1. 前文回顧 在之前的幾篇記憶體管理系列文章中,筆者帶大家從宏觀角度完整地梳理了一遍 Linux 記憶體分配的整個鏈路,本文的主題依然是記憶體分配,這一次我們會從微觀的角度來探秘一下 Linux 內核中用于零散小記憶體塊分配的記憶體池 —— slab 分配器。 在本小節中,筆者還是按照以往的風格先帶大家簡單 ......

    uj5u.com 2023-04-05 16:44:11 more