Vuepress 本地安装

cover00001.jpg

1.安装npm

image
下载并安装同步版NodeJS

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安装程序，提供一个.msi安装文件

2.3 换源(淘宝源)提高国内下载速度

Yarn 淘宝源安装，分别复制粘贴以下代码行到CMD运行即可

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安装会有低几率的目录树问题，而用yarn安装没有任何问题

3.本地安装vuepress

以windows安装为例，mac安装基本一致

3.1全局安装vuepress

yarn global add vuepress

image

3.1指定目录安装vuepress

例如在D盘根目录下的books文件夹

D:\books>yarn add -D vuepress

image

3.2检查文件

成功后自动生成如下文件

image

3.3建立docs和readme

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

image

3.4修改package.json添加脚本

第一次自动生成的package文件是不带脚本的，源码如下

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

手动修改为如下代码

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