VuePress搭建技术网站与个人博客

VuePress搭建技术网站与个人博客

一.安装全局VuePress

使用npm安装

​ 使用该命令npm install -g vuepress进行安装，不过安装较慢，推荐使用淘宝镜像cnpm install -g vuepress 进行安装

npm 淘宝镜像的配置

使用npm config指令进行配置

npm install cnpm -g --registry=http://reistry.npm.taobao.org

查看安装的版本

cnpm -v

npm淘宝仓库的配置

查看npm的仓库

`npm config get registry`

配置npm淘宝仓库

`npm config set registry https://registry.npm.taobao.org`

查看npm当前的配置

npm config list

二、创建并进入项目

使用mkdir和cd指令

​ mkdir vuepress-demo && cd vuepress-demo

mkdir命令

​ mkdir是make directory 的缩写，directory--目录的意思

命令格式

mkdir 目录

命令的功能

通过 mkdir命令可以实现在指定位置创建以 DirName(指定的文件名)命名的文件夹或目录。要创建文件夹或目录的用户必须对所创建的文件夹的父文件夹具有写权限。并且，所创建的文件夹(目录)不能与其父目录(即父文件夹)中的文件名重名，即同一个目录下不能有同名的(区分大小写)。

cd命令

cd是Change Directory的缩写，这是用来切换工作目录的命令。

命令格式

cd [相对路径或绝对路径或特殊符号]

说明：

不加参数时，默认切换到用户主目录，即环境变量HOME指定的目录，如root用户的HOME变量为/root，那么cd命令不带参数时便切换到/root目录下。

绝对路径是从跟目录开始的，如/root或/home/sgl，相对路径是相对于当前路径来说的，假如当前目录在/home/guo下面，那么前面的/home/sgl的相对路径就是../sgl，即当前目录的上级目录下的sgl目录。

特殊符号包括~、-、..等。

~表示用户主目录，即HOME变量指定的目录，如root用户的主目录为/root。

-表示前一个工作目录。

..表示上级目录。

.表示当前目录。

三、初始化项目

npm init -y

生成package.json文件,并添加如下两个启动命令：

"scripts": {

  "dev": "vuepress dev docs",

  "build": "vuepress build docs"

}

四、创建基本项目结构

基本项目结构

其中有后缀的是文件，没后缀的是文件夹

vuepress-demo

├─package.json

├─docs

|  ├─README.md

|  ├─.vuepress

|  |    ├─config.js

|  |    ├─public

|  |    |  └avatar.png

|  |    |  └spider.png

使用git bash创建

image

五、配置config.js

module.exports = {

    title:'小诺的博客',

    head:[  //注入到当前页面的html 中的标签

        ['link',{rel:'icon',href:'/1.png'}],

    ],

    themeConfig:{

        logo:'1.png',  //右上角的logo

        nav:[

            {text:'首页',link:'/'},

            {text:'技术文档',link:'/tech/'},

            {text:'首页',link:'https://www.jianshu.com/u/5b016ccd19b4'}

        ],

        sidebar:'auto', //侧边框配置

        sidebarDrpth:2

    }

}

六、启动项目

npm run docs:dev npm run 后面的是要看package.json文件中的启动命令

默认服务启动后的网址是http://localhost:8080/

七、配置首页

在docs目录下的README.md中写如下代码

---

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默认主题

heroImage：首页的图片

actionText：按钮的文字

actionLInk：按钮跳转的目录

features:首页三个特性