VuePress的安裝使用

我的小站、Github

VuePress 是一個基于 Vue 的輕量級靜態(tài)網(wǎng)站生成器，以及為編寫技術(shù)文檔而優(yōu)化的默認主題。


VuePress 要求 Node.js 環(huán)境，且 Node.js 版本 >= 8.6。

環(huán)境搭建

安裝 Node.js

從 官方網(wǎng)站 獲取最新版本安裝包下載鏈接

# 創(chuàng)建安裝目錄 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

配置環(huán)境變量

# 編輯環(huán)境變量文件，在末尾追加 Node.js 路徑 echo export PATH=/usr/local/lib/nodejs/node-v14.7.0-linux-x64/bin:$PATH >>~/.bash_profile# 重載該文件使設(shè)置生效 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 目錄下創(chuàng)建并進入my_blogs目錄 mkdir ~/my_blogs cd ~/my_blogs# 項目初始化 npm init -y

配置 VuePress

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

修改后

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

在 my_blogs 路徑下查看目錄

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

修改首頁配置

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

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

啟動 VuePress

vuepress dev ~/my_blogs/docs

訪問網(wǎng)站 http://<你的公網(wǎng)IP地址>:8080/

vuepress dev ~/my_blogs/docs

至此，VuePress搭建完畢。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。