VuePress搭建技術(shù)網(wǎng)站與個(gè)人博客
一.安裝全局VuePress
使用npm安裝
? 使用該命令npm install -g vuepress進(jìn)行安裝，不過(guò)安裝較慢，推薦使用淘寶鏡像cnpm install -g vuepress 進(jìn)行安裝
npm 淘寶鏡像的配置
使用npm config指令進(jìn)行配置
npm install cnpm -g --registry=http://reistry.npm.taobao.org
查看安裝的版本
cnpm -v
npm淘寶倉(cāng)庫(kù)的配置
查看npm的倉(cāng)庫(kù)
`npm config get registry`
配置npm淘寶倉(cāng)庫(kù)
`npm config set registry https://registry.npm.taobao.org`
查看npm當(dāng)前的配置
npm config list
二、創(chuàng)建并進(jìn)入項(xiàng)目
使用mkdir和cd指令
? mkdir vuepress-demo && cd vuepress-demo
mkdir命令
? mkdir是make directory 的縮寫(xiě)，directory--目錄的意思
命令格式
mkdir 目錄
命令的功能
通過(guò) mkdir命令可以實(shí)現(xiàn)在指定位置創(chuàng)建以 DirName(指定的文件名)命名的文件夾或目錄。要?jiǎng)?chuàng)建文件夾或目錄的用戶(hù)必須對(duì)所創(chuàng)建的文件夾的父文件夾具有寫(xiě)權(quán)限。并且，所創(chuàng)建的文件夾(目錄)不能與其父目錄(即父文件夾)中的文件名重名，即同一個(gè)目錄下不能有同名的(區(qū)分大小寫(xiě))。
cd命令
cd是Change Directory的縮寫(xiě)，這是用來(lái)切換工作目錄的命令。
命令格式
cd [相對(duì)路徑或絕對(duì)路徑或特殊符號(hào)]
說(shuō)明：
不加參數(shù)時(shí)，默認(rèn)切換到用戶(hù)主目錄，即環(huán)境變量HOME指定的目錄，如root用戶(hù)的HOME變量為/root，那么cd命令不帶參數(shù)時(shí)便切換到/root目錄下。
絕對(duì)路徑是從跟目錄開(kāi)始的，如/root或/home/sgl，相對(duì)路徑是相對(duì)于當(dāng)前路徑來(lái)說(shuō)的，假如當(dāng)前目錄在/home/guo下面，那么前面的/home/sgl的相對(duì)路徑就是../sgl，即當(dāng)前目錄的上級(jí)目錄下的sgl目錄。
特殊符號(hào)包括~、-、..等。
~表示用戶(hù)主目錄，即HOME變量指定的目錄，如root用戶(hù)的主目錄為/root。
-表示前一個(gè)工作目錄。
..表示上級(jí)目錄。
.表示當(dāng)前目錄。
三、初始化項(xiàng)目
npm init -y
生成package.json文件,并添加如下兩個(gè)啟動(dòng)命令：
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
四、創(chuàng)建基本項(xiàng)目結(jié)構(gòu)
基本項(xiàng)目結(jié)構(gòu)
其中有后綴的是文件，沒(méi)后綴的是文件夾
vuepress-demo
├─package.json
├─docs
| ├─README.md
| ├─.vuepress
| | ├─config.js
| | ├─public
| | | └avatar.png
| | | └spider.png
使用git bash創(chuàng)建
五、配置config.js
module.exports = {
title:'小諾的博客',
head:[ //注入到當(dāng)前頁(yè)面的html <head>中的標(biāo)簽
['link',{rel:'icon',href:'/1.png'}],
],
themeConfig:{
logo:'1.png', //右上角的logo
nav:[
{text:'首頁(yè)',link:'/'},
{text:'技術(shù)文檔',link:'/tech/'},
{text:'簡(jiǎn)書(shū)首頁(yè)',link:'http://www.itdecent.cn/u/5b016ccd19b4'}
],
sidebar:'auto', //側(cè)邊框配置
sidebarDrpth:2
}
}
六、啟動(dòng)項(xiàng)目
npm run docs:dev npm run 后面的是要看package.json文件中的啟動(dòng)命令
默認(rèn)服務(wù)啟動(dòng)后的網(wǎng)址是http://localhost:8080/
七、配置首頁(yè)
在docs目錄下的README.md中寫(xiě)如下代碼
---
home: true
heroImage: /1.png
actionText: Get Started →
actionLink: /guide/
features:
- title: Simplicity First
details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright ? 2018-present Evan You
---
home：是否使用VuePress默認(rèn)主題
heroImage：首頁(yè)的圖片
actionText：按鈕的文字
actionLInk：按鈕跳轉(zhuǎn)的目錄
features:首頁(yè)三個(gè)特性
