VuePress的安裝使用

我的小站、Github

VuePress 是一個基于 Vue 的輕量級靜態網站生成器，以及為編寫技術文檔而優化的默認主題。


VuePress 要求 Node.js 環境，且 Node.js 版本 >= 8.6。

環境搭建

安裝 Node.js

從 官方網站 獲取最新版本安裝包下載鏈接

# 創建安裝目錄 sudo mkdir /usr/local/lib/nodejs# 進入安裝目錄 cd /usr/local/lib/nodejs# 下載安裝包 wget https://npm.taobao.org/mirrors/node/v14.7.0/node-v14.7.0-linux-x64.tar.xz# 解壓 sudo tar -xJvf node-v14.7.0-linux-x64.tar.xz

配置環境變量

# 編輯環境變量文件，在末尾追加 Node.js 路徑 echo export PATH=/usr/local/lib/nodejs/node-v14.7.0-linux-x64/bin:$PATH >>~/.bash_profile# 重載該文件使設置生效 source ~/.bash_profile# 查看版本信息 node -v npm version npx -v

安裝 VuePress

# 使?淘寶鏡像 npm config set registry https://registry.npm.taobao.org # 安裝 VuePress npm install -g vuepress

# 在 root 目錄下創建并進入my_blogs目錄 mkdir ~/my_blogs cd ~/my_blogs# 項目初始化 npm init -y

配置 VuePress

# 設置 package.json 的腳本配置 (推薦使用 FinalShell等工具直接編輯) vim package.json # 修改scripts中的內容如下 "scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"},
修改前

修改后

# 創建文檔目錄以及 .vuepress ?錄 mkdir ~/my_blogs/docs ~/my_blogs/docs/.vuepress# 在 docs 目錄下新建?個md?件 echo '# Hello VuePress - ?rst blog!' > ~/my_blogs/docs/README.md # 在 .vuepress 目錄下創建 con?g.js 配置?件 cd ~/my_blogs/docs/.vuepress echo >con?g.js # 在 .vuepress 目錄下創建 public ?錄 mkdir ~/my_blogs/docs/.vuepress/public

在 my_blogs 路徑下查看目錄

tree -a# 如果沒有安裝 tree # centos 系統下使用 sudo yum install tree # Ubuntu 系統下使用 sudo apt-get -y install tree

修改首頁配置

編輯 /root/my_blogs/docs 目錄下的 README.md 文件

--- home: true heroText: Vue技術博客初試 tagline: 項目結構，關注討論，每日分享 actionText: 每日更新 → actionLink: /testlink/ features: - title: 項目結構- details: 以 Markdown 為中心的項目結構，以最少的配置幫助你專注于寫作。 - title: 關注討論- details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 組件，同時可以使用Vue 來開發自定義主題。 - title: 每日分享- details: VuePress 為每個頁面預渲染生成靜態的 HTML，同時在頁面被加載的時候，將作為 SPA 運行。 footer: LearnVueonECS Licensed | Copyright ? 2020-present ---

啟動 VuePress

vuepress dev ~/my_blogs/docs

訪問網站 http://<你的公網IP地址>:8080/

vuepress dev ~/my_blogs/docs

至此，VuePress搭建完畢。

總結

以上是生活随笔為你收集整理的Linux 下 VuePress 的安装使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。