Vuepress 本地安裝

cover00001.jpg

1.安裝npm

image

npm install -g cnpm --registry=https://registry.npm.taobao.org
是否成功安裝：cnpm -v 

成功安裝淘寶源顯示如下信息

$ cnpm -v
cnpm@6.1.0 (C:\Users\MSI-PC\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.12.0 (C:\Users\MSI-PC\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@12.8.1 (C:\Program Files\nodejs\node.exe)
npminstall@3.23.0 (C:\Users\MSI-PC\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\MSI-PC\AppData\Roaming\npm
win32 x64 10.0.17763
registry=https://r.npm.taobao.org

2.安裝yarn

npm install -g yarn
是否成功安裝：yarn --version

2.2 安裝方法2-安裝包【不推薦】

yarn的Windows安裝程序，提供一個(gè).msi安裝文件

2.3 換源(淘寶源)提高國(guó)內(nèi)下載速度

Yarn 淘寶源安裝，分別復(fù)制粘貼以下代碼行到CMD運(yùn)行即可

yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

TIPS:為什么用Yarn而不用npm安裝vuepress

npm安裝會(huì)有低幾率的目錄樹(shù)問(wèn)題，而用yarn安裝沒(méi)有任何問(wèn)題

3.本地安裝vuepress

以windows安裝為例，mac安裝基本一致

3.1全局安裝vuepress

yarn global add vuepress

image

3.1指定目錄安裝vuepress

例如在D盤(pán)根目錄下的books文件夾

D:\books>yarn add -D vuepress

image

3.2檢查文件

成功后自動(dòng)生成如下文件

image

3.3建立docs和readme

D:\books>mkdir docs
D:\books>echo '# Hello VuePress' > docs/README.md

image

3.4修改package.json添加腳本

第一次自動(dòng)生成的package文件是不帶腳本的，源碼如下

{
  "devDependencies": {
    "vuepress": "^1.2.0"
  }
}

手動(dòng)修改為如下代碼

{
  "devDependencies": {
    "vuepress": "^1.2.0"
  },
    "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

【TIPS】script前面的英語(yǔ)半角逗號(hào)【,】千萬(wàn)不要忘記?。?！

3.5啟動(dòng)vuepress

yarn docs:dev

D:\books>yarn docs:dev

成功啟動(dòng)vuepress服務(wù)，本地范圍地址:localhost:8080

image

image