最新最全vuepress零基础搭建(github搭建+新增插件)

比眉伴天荒 2023-01-03 01:53 91阅读 0赞

# 最新最全vuepress零基础搭建 #

**标注：最终版以及修改最终都在www.javanode.cn是最终版本，在学习中需要修改的内容以及笔记全在这个网站，谢谢！有任何不妥的地方望纠正**

## **看完了,发现对你有用的话不关注就算了 还不点赞，你还是人吗？** ##

##  ##

# 简易版运行 #

## 1. 下载简易版 ##

**地址**：https://gitee.com/gy297879328/vue\_press\_code

## 2. 编译启动项目 ##

## 在解压目录也就是package.json文件的当前目录下执行命令
    ## 编译运行的命令
    npm install
    ## 启动当前项目
    npm run dev
    ##打开 http://localhost:8080/ 即可看到一个 Vue 文档风格的网站

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70]

# 搭建流程 #

# 1. 安装node.js #

Node.js 版本 >= 8.6

1、安装Node.js，打开官网(http://nodejs.cn/)，点击下载相应系统的文件。（Windows / MacOs）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 1]

1.  安装文件下载完成后，运行并点击下一步直至安装结束（期间安装的位置可自行选择)
2.  在终端（Windows cmd.exe，Macos 终端）执行指令
    
    npm -version

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 2]

1.  配置NPM淘宝镜像，终端内执行
    
        npm config set registry https://registry.npm.taobao.org
        #之后再执行(检查配置的是否正确)
        npm config get registry

# 2. 安装yarn #

## 1.运行命令
    npm i yarn -g
    
    ##-i：install 
    ##-g：全局安装（global）,使用 -g 或 --global
    
    ## 2. 输入yarn -version 可以看到版本号，说明安装成功了。我们就可以在项目中像使用npm一样使用yarn

# 3. 起步操作 #

## 参考 https://www.vuepress.cn/guide/getting-started.html
    ## 1.新建的目录 进入prodoc
    makedir mydoc 
    makedir prodoc
    cd prodoc
    ## 2.全局安装 VuePress
    yarn add -D vuepress
    ## 3.初始化生成package.json
    yarn init -y
    ## 4.创建你的第一篇文档（在prodoc目录里新建）
    mkdir docs && echo '# Hello VuePress' > docs/README.md
    ## 5.添加主题 (在docs/README.md中添加)
    ## https://www.vuepress.cn/theme/default-theme-config.html 参考

---
    home: true
    heroImage: /hero.png
    heroText: Hero 标题
    tagline: Hero 副标题
    actionText: 快速上手 →
    actionLink: /zh/guide/
    features:
    - title: 简洁至上
      details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
    - title: Vue驱动
      details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
    - title: 高性能
      details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
    footer: MIT Licensed | Copyright © 2018-present Evan You
    ---

## 6.启动
    yarn docs:dev # npm run docs:dev
    ## VuePress 会在 http://localhost:8080 (opens new window) 启动一个热重载的开发服务器。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 3]

# 4. 导航目录设置 #

## 4.1 设置logo ##

## 1.新建about目录并新建README.md文档 （docs中）
    ## 2.重启服务后访问链接 localhost:8080/about 即可看到

**注意: docs根目录的md文件 会编译成.html文件(无关紧要，可无视)**

## https://www.vuepress.cn/theme/default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F 参考链接
    ## 3. 新建目录 .vuepress 在.vuepress下新建js config.js （docs中）
    ## 4. 在config中新增内容

module.exports = { 
      themeConfig: { 
        logo: '/assets/img/logo.png',
      }
    }

## 5. 新建public文件 因为是公共资源目录 （默认规则详细查看 https://www.vuepress.cn/guide/directory-structure.html）
    ## 在 .vuepress 下新建 public 目录
    ## 在public下 新建/assets/img目录 存放Logo

## 4.2 导航栏链接 ##

## https://www.vuepress.cn/theme/default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F 参考路径
    ## 在config.js中配置

themeConfig: { 
        nav: [
          {  text: 'Home', link: '/' },
          {  text: 'Guide', link: '/guide/' },
          {  text: 'External', link: 'https://google.com' },
        ]
      }

# 5. 侧边栏 #

## https://www.vuepress.cn/theme/default-theme-config.html#%E4%BE%A7%E8%BE%B9%E6%A0%8F 自动生成参考路径
    ## https://www.vuepress.cn/theme/default-theme-config.html#%E4%BE%A7%E8%BE%B9%E6%A0%8F%E5%88%86%E7%BB%84 侧边栏分组参考路径

## 5.1 自动生成 ##

// .vuepress/config.js
    module.exports = { 
      themeConfig: { 
        sidebar: 'auto'
      }
    }

## 5.2 侧边栏分组 ##

//测试例子
    module.exports = { 
      themeConfig: { 
       sidebar: [
                '',
                'about',
                { 
                    title: '测边框分层',   // 必要的
                    path: '/morethread/',      // 可选的, 标题的跳转链接，应为绝对路径且必须存在
                    collapsable: false, // 可选的, 默认值是 true,
                    sidebarDepth: 1,    // 可选的, 默认值是 1
                    children: [
                        '/morethread/bf',
                        '/morethread/test1',
                    ]
                }
            ]
      }
    }

//按照路径分组
    //https://www.vuepress.cn/theme/default-theme-config.html#%E5%A4%9A%E4%B8%AA%E4%BE%A7%E8%BE%B9%E6%A0%8F
    module.exports = { 
      themeConfig: { 
    	sidebar: { 
                '/morethread/': [
                    '',     /* /foo/ */
                    'bf',  /* /foo/one.html */
                    'test1'   /* /foo/two.html */
                ],
    
                '/about/': [
                    '',      /* /bar/ */
                    'test1' /* /bar/three.html */
    
                ],
    
    
            }
            }
    }
    //自动生成插件
    https://github.com/shanyuhai123/vuepress-plugin-auto-sidebar
    //链接
    https://docs.shanyuhai.top/

# 6. SEO #

// https://www.vuepress.cn/config/#%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE 参考文档
    // https://favicon.io/emoji-favicons/ 选一个ico图标
    // .vuepress/config.js
    module.exports = { 
        title:"小光头的java日记",
        description:"小光头的java日记,java笔记,java面试",
        head: [
            ['meta', {  name: 'Keywords', content: '小光头的java日记,java笔记,java面试' }],
            ['meta', {  name: 'description', content: '小光头的java日记用心分享' }],
            ['link', {  rel: 'icon', href: '/assets/img/favicon.ico' }]
        ]
    }

# 7. 最后更新时间 #

// https://www.vuepress.cn/theme/default-theme-config.html#%E6%9C%80%E5%90%8E%E6%9B%B4%E6%96%B0%E6%97%B6%E9%97%B4 参考
    //第一种
    // .vuepress/config.js
    module.exports = { 
      themeConfig: { 
        lastUpdated: 'Last Updated', // string | boolean
      }
    }

// 第二种 使用日期插件
    //执行命令 本地安装moment
    yarn add moment
    
    // .vuepress/config.js
       plugins: [
            [
                '@vuepress/last-updated',
                { 
                    transformer: (timestamp) => { 
                        moment.locale("zh-cn");
                        return moment(timestamp).fromNow("LLLL")
                    }
                }
            ]
        ],

# 8. 部署gitee #

// https://www.vuepress.cn/guide/deploy.html#github-pages 文档
    
    // docs/.vuepress/config.js
    
    // docs/
    1.修改 package.json

{ 
      "name": "prodoc",
      "version": "1.0.0",
      "main": "index.js",
      "repository": "https://github.com/gy297879328/prodoc.git",
      "author": "gy <297879328@qq.com>",
      "license": "MIT",
      "scripts": { 
        "docs:dev": "vuepress dev docs",
        "docs:build": "vuepress build docs",
        "deploy": "bash deploy.sh"
      },
      "devDependencies": { 
        "@vuepress/back-to-top": "^1.5.0",
        "vuepress": "^1.7.1"
      }
    }

// docs/.vuepress/config.js//
    2. 修改config.js 添加base属性 上传到github的库名

module.exports = { 
        title:"小光头的java日记",
        description:"小光头的java日记,java笔记,java面试",
        base:"/vuepresstest/",
    }

// docs
    3. 新建 deploy.sh 文件

#!/usr/bin/env sh
    
    # 确保脚本抛出遇到的错误
    set -e
    
    # 生成静态文件
    npm run docs:build
    
    # 进入生成的文件夹
    cd docs/.vuepress/dist
    
    # 如果是发布到自定义域名
    # echo 'www.example.com' > CNAME
    
    git init
    git add -A
    git commit -m 'deploy'
    
    # 如果发布到 https://<USERNAME>.github.io
    # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
    
    # 如果发布到 https://<USERNAME>.github.io/<REPO>
    git push -f git@github.com:gy297879328/vuepresstest.git master:gh-pages
    
    cd -

// docs
    4. 执行编译命令会生成html文件在（docs/.vuepress/dist） 目录下上传到服务器即可
    npm run docs:build

# 9. vssue评论 #

## 9.1 安装到个体 ##

// https://vssue.js.org/zh/guide/getting-started.html 官网
    
    //1.获取vssue的授权码（提前登陆自己的github账号）
    https://github.com/settings/developers

## 2.本地安装
    yarn add @vssue/vuepress-plugin-vssue
    yarn add @vssue/api-github-v4

// 3.修改 docs/.vuepress/config.js//
      plugins: { 
            '@vuepress/back-to-top':true,
            '@vssue/vuepress-plugin-vssue': { 
                // 设置 `platform` 而不是 `api`
                platform: 'github-v4',
                // 其他的 Vssue 配置
                owner: 'gy297879328',//github用户名
                repo: 'vuepresstest',//需要评论的仓库
                clientId: '734e36fe47755fb32027',
                clientSecret: 'aa9953c892dc6235c8d95d622d2e2dc741247695',
                autoCreateIssue:true //自动初始化仓库
            },
        },

//4. 修改全局配置
    //https://vssue.js.org/zh/options/#autocreateissue

## 9.2 全局配置 ##

// https://blog.csdn.net/weixin_43742708/article/details/109545561 参考博客
    1. 首先我们先在 .vuepress 文件目录下 新建 theme,再在该目录下新建layouts目录：
    2. 然后下载git clone https://gitee.com/mirrors/VuePress.git  或者
      (本地的node_modules\@vuepress\theme-default模块的也可以)
    3. 进入该文件的 packages\@vuepress\theme-default\layouts\   把 Layout.vue拷贝到 我们刚才新建的 Layouts目录下。
    4. 进入该文件的 packages\@vuepress\theme-default\目录下把 util文件夹，也拷贝到 我们的 theme文件夹下。
    5. 接下来在我们的theme 目录下新建index.js,并添加如下配置：

module.exports = { 
      extend: '@vuepress/theme-default'
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 4]

// 6.修改 Layout.vue 文件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 5]

# 10. 百度统计插件 #

## 1. 获取代码 ##

## https://blog.csdn.net/qq_39367226/article/details/107449882
    ## 添加百度统计登陆后获取代码 https://tm.baidu.com/

## 2. 修改config.js ##

// 配置给 head属性 
    	// 添加百度统计
            [
            "script",
                { },
                ` var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0cbb5bf425c624587e0804d2122aea84"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); `
            ]

## 3.修改enhanceApp ##

// .vuepress/enhanceApp.js 没有就新建

export default ({  router }) => { 
        /** * 路由切换事件处理 */
        router.beforeEach((to, from, next) => { 
            console.log("切换路由", to.fullPath, from.fullPath);
    
            //触发百度的pv统计
            if (typeof _hmt != "undefined") { 
                if (to.path) { 
                    _hmt.push(["_trackPageview", to.fullPath]);
                    console.log("上报百度统计", to.fullPath);
                }
            }
    
            // continue
            next();
        });
    };

# 11. 自动生成侧边栏 #

## https://github.com/shanyuhai123/vuepress-plugin-auto-sidebar
    ## 1.下载依赖
    yarn add vuepress-plugin-auto-sidebar 
    ## 2.添加插件
    // .vuepress/config.js
    
    "vuepress-plugin-auto-sidebar": { }

# 12. 美化插件(自选) #

## 1. 鼠标点击特效插件 ##

//鼠标点击特效 先安装在配置， 
       // 1. 下载: npm install vuepress-plugin-cursor-effects 
       
       // 2. .vuepress/config.js   plugins 中
       
          "cursor-effects":
          { 
            size: 3,                    // size of the particle, default: 2
            shape: ['circle'],  // shape of the particle, default: 'star'
            zIndex: 999999999           // z-index property of the canvas, default: 999999999
          }

## 2. 复制插件 ##

## https://www.npmjs.com/package/vuepress-plugin-copyright
    yarn add vuepress-plugin-copyright
    ## .vuepress/config.js plugins 中
        ['copyright',
        	{ 
                minLength: 10,
                noCopy: true,
        	},
        ]

## 3. 动态标题 ##

// 1. 下载:  yarn add vuepress-plugin-dynamic-title
    // 2. .vuepress/config.js   plugins 中
        "dynamic-title": { 
            showIcon: "/assets/img/logo.png",
            showText: "(/≧▽≦/)你来啦！",
            hideIcon: "/assets/img/favicon.ico",
            hideText: "(●—●)喔哟，崩溃啦！",
            recoverTime: 2000
        }

## 4. 验证码的方式(待研究) ##

https://segmentfault.com/a/1190000038222412

## 5. 新增点击的 富强爱国显示 ##

### 5.1 新建js ###

// .vuepress\public\js\MouseClickEffect.js

### 5.2 配置config ###

// 配置给 head属性 
    
        // 引入jquery
        ["script", { 
            "language": "javascript",
            "type": "text/javascript",
            "src": "https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"
        }],
        // 引入鼠标点击脚本
        ["script", { 
            "language": "javascript",
            "type": "text/javascript",
            "src": "/js/MouseClickEffect.js"
        }],

# 13.部署发布 #

## 编译文件 ##

在根目录下执行 **npm run build** 命令会将md文档编译成html静态页（默认生成在**docs/.vuepress/dist**下）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 6][]

## 13. 服务器部署 ##

### 13.1.1 上传文件 ###

将静态页放到 **/home/vue\_press** 目录下

### 13.1.2 安装nginx ###

1.  下载nginx

nginx下载地址：https://nginx.org/download/

## 1.解压
    tar -zxvf nginx nginx-1.18.0
    ## 2.安装gcc命令
    yum -y install gcc pcre-devel zlib-devel openssl openssl-devel
    ## 3.编译
    ./configure
    # make
    make
    make install
    ## 4.启动日志会默认生成到 /usr/local/nginx/sbin/nginx 下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 7]

1.  修改nginx.conf的配置文件(/usr/local/src/vue\_press/nginx-1.18.0/conf)

server {
            listen       80;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    		# root 配置读取的路径
            location / {
                root   /home/vue_press/; 
                index  index.html index.htm;
            }
            }

## 13.2 gitee上部署 ##

1.  在gitee上部署，需要修改 **docs.vuepress.config.js**中的**base**属性，里面需要填写成新建库的名字

base: '/', // 部署到github相关的配置
    ## 修改成
    base: '/vue_press_code/', // 部署到github相关的配置

1.  将生成的静态页上传到仓库中
2.  点击服务中的Gitee Pages选项

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 8]

1.  上线获取地址

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 9]

## 13.3 github上部署 ##

1.  在github上部署，需要修改 **docs.vuepress.config.js**中的**base**属性，里面需要填写成新建库的名字
2.  静态页上传到github上

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 10]

1.  点击**settings**下拉找到**github pages页面**
    
     *  分支必须选择 main
     *  save以后 就会出现地址

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 11]

# 安装的yarn源(了解即可) #

## 全局环境
    yarn add -D vuepress
    yarn add moment
    ## 评论插件
    yarn add @vssue/vuepress-plugin-vssue
    yarn add @vssue/api-github-v4
    
    ## 自动生成测边框插件
    npm i vuepress-plugin-auto-sidebar -D
    
    ##鼠标点击特效 先安装在配置， 
    npm install vuepress-plugin-cursor-effects

# 重要 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 12]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70]: /images/20221119/3f717a682483462f96ddc63969466c9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 1]: /images/20221119/1c0414b506e743fb94fa8316e68c2db1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 2]: /images/20221119/815244e554c9437f864fff0b578f719e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 3]: /images/20221119/56c428de04254b5596ac353a0abbd1da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 4]: /images/20221119/43594b9ea31b4474be6297696febedab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 5]: /images/20221119/93f6cabdb4164953a98994fd006fde16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 6]: /images/20221119/d44a1b78b1bf49258c79b62cfe28c967.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 7]: /images/20221119/27e2dcfe7bc6446caed4b14669174236.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 8]: /images/20221119/1102c905fc0e4f449379e710f1ccd2a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 9]: /images/20221119/24634f1ad79e486a9e59e4277f48619c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 10]: /images/20221119/f6c8c444bf1544a7969285621108959e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 11]: /images/20221119/021fc0df9a0a487ba83dfaf5587a5efc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 12]: /images/20221119/2c8e12f4b4dd42e9a92f80c0fede382c.png