vue - - - vuepress文档网站部署github

已于 2023-06-07 09:11:03 修改
阅读量1.7k 收藏 6
点赞数 4
分类专栏： Vue.js 文章标签： github npm javascript vuepress
于 2022-10-17 20:25:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48430685/article/details/127364833
版权

环境

安装nodejs: https://nodejs.org/en/, 版本不能太高(>= 8.6即可)
安装git: https://git-scm.com/

Hello World

vuepress官网: https://www.vuepress.cn/
在这里插入图片描述在这里插入图片描述
第3步需要等待下载依赖.
1~3步完整命令:

zichen@DESKTOP-3176F4L MINGW64 ~/Desktop
$ mkdir vuepress-starter && cd vuepress-starter

zichen@DESKTOP-3176F4L MINGW64 ~/Desktop/vuepress-starter
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (vuepress-starter)
Sorry, name cannot contain leading or trailing spaces and name can only contain URL-friendly characters.
package name: (vuepress-starter)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\zichen\Desktop\vuepress-starter\package.json:

{
  "name": "vuepress-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes

zichen@DESKTOP-3176F4L MINGW64 ~/Desktop/vuepress-starter
$ npm install -D vuepress
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated highlight.js@9.18.5: Support has ended for 9.x series. Upgrade to @latest
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated docsearch.js@2.6.3: This package has been deprecated and is no longer maintained. Please use @docsearch/js.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated mkdirp@0.3.0: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated har-validator@5.1.5: this library is no longer supported


> core-js@3.25.5 postinstall C:\Users\zichen\Desktop\vuepress-starter\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js:
> https://opencollective.com/core-js
> https://patreon.com/zloirock
> bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> esbuild@0.14.7 postinstall C:\Users\zichen\Desktop\vuepress-starter\node_modules\esbuild
> node install.js


> highlight.js@9.18.5 postinstall C:\Users\zichen\Desktop\vuepress-starter\node_modules\highlight.js
> node deprecated.js

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  Verion 9 of Highlight.js has reached EOL.  It will no longer
  be supported or receive security updates in the future.
  Please upgrade to version 10 or encourage your indirect
  dependencies to do so.

  For more info:

  https://github.com/highlightjs/highlight.js/issues/2877
  https://github.com/highlightjs/highlight.js/blob/master/VERSION_10_UPGRADE.md

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

> vuepress@1.9.7 postinstall C:\Users\zichen\Desktop\vuepress-starter\node_modules\vuepress
> opencollective-postinstall || exit 0

Thank you for using vuepress!
If you rely on this package, please consider supporting our open collective:
> https://opencollective.com/vuepress/donate

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-freebsd-64@0.14.7 (node_modules\esbuild\node_modules\esbuild-freebsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-freebsd-64@0.14.7: wanted {"os":"freebsd","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-darwin-64@0.14.7 (node_modules\esbuild\node_modules\esbuild-darwin-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-darwin-64@0.14.7: wanted {"os":"darwin","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-arm@0.14.7 (node_modules\esbuild\node_modules\esbuild-linux-arm):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-arm@0.14.7: wanted {"os":"linux","arch":"arm"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-64@0.14.7 (node_modules\esbuild\node_modules\esbuild-linux-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-64@0.14.7: wanted {"os":"linux","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-arm64@0.14.7 (node_modules\esbuild\node_modules\esbuild-linux-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-arm64@0.14.7: wanted {"os":"linux","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-mips64le@0.14.7 (node_modules\esbuild\node_modules\esbuild-linux-mips64le):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-mips64le@0.14.7: wanted {"os":"linux","arch":"mips64el"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-freebsd-arm64@0.14.7 (node_modules\esbuild\node_modules\esbuild-freebsd-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-freebsd-arm64@0.14.7: wanted {"os":"freebsd","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-android-arm64@0.14.7 (node_modules\esbuild\node_modules\esbuild-android-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-android-arm64@0.14.7: wanted {"os":"android","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-darwin-arm64@0.14.7 (node_modules\esbuild\node_modules\esbuild-darwin-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-darwin-arm64@0.14.7: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-netbsd-64@0.14.7 (node_modules\esbuild\node_modules\esbuild-netbsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-netbsd-64@0.14.7: wanted {"os":"netbsd","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-openbsd-64@0.14.7 (node_modules\esbuild\node_modules\esbuild-openbsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-openbsd-64@0.14.7: wanted {"os":"openbsd","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-sunos-64@0.14.7 (node_modules\esbuild\node_modules\esbuild-sunos-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-sunos-64@0.14.7: wanted {"os":"sunos","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-windows-arm64@0.14.7 (node_modules\esbuild\node_modules\esbuild-windows-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-windows-arm64@0.14.7: wanted {"os":"win32","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-ppc64le@0.14.7 (node_modules\esbuild\node_modules\esbuild-linux-ppc64le):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-ppc64le@0.14.7: wanted {"os":"linux","arch":"ppc64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-windows-32@0.14.7 (node_modules\esbuild\node_modules\esbuild-windows-32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-windows-32@0.14.7: wanted {"os":"win32","arch":"ia32"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-32@0.14.7 (node_modules\esbuild\node_modules\esbuild-linux-32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-32@0.14.7: wanted {"os":"linux","arch":"ia32"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules\watchpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN vuepress-starter@1.0.0 No description
npm WARN vuepress-starter@1.0.0 No repository field.

+ vuepress@1.9.7
added 1296 packages from 904 contributors and audited 1314 packages in 163.024s

98 packages are looking for funding
  run `npm fund` for details

found 18 vulnerabilities (2 low, 8 moderate, 8 high)
  run `npm audit fix` to fix them, or `npm audit` for details

zichen@DESKTOP-3176F4L MINGW64 ~/Desktop/vuepress-starter
$

进行第4步：
在这里插入图片描述
创建docs文件夹, 在docs文件夹中创建README.md文件.
在这里插入图片描述

进行第5步:
在这里插入图片描述
编辑package.json文件
在这里插入图片描述

{
  "name": "vuepress-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
  "author": "",
  "license": "ISC"
}

在这里插入图片描述
第6步本地启动服务器

zichen@DESKTOP-3176F4L MINGW64 ~/Desktop/vuepress-starter
$ npm run docs:dev
success [16:03:21] Build 88be0b finished in 7157 ms!
> VuePress dev server listening at http://localhost:8080/

访问localhost:8080查看效果
在这里插入图片描述
文件目录:
在这里插入图片描述

部署

在这里插入图片描述
部署到GitHub pages:

  1. 创建docs/.vuepress/config.js
    在这里插入图片描述
    在这里插入图片描述
    config.js内容:
module.exports = {
  base: '/vuepress/'
}

在这里插入图片描述
内容为/vuepress/, 则打算发布到 https://<USERNAME>.github.io/vuepress/
创建vuepress仓库:
在这里插入图片描述

  1. 在你的项目中，创建一个如下的 deploy.sh 文件

在这里插入图片描述
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:<USERNAME>/<REPO>.git master:gh-pages

cd -

把发布地址替换为刚才创建的仓库:
复制仓库地址
在这里插入图片描述

替换后的内容:

#!/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:zichenlbl/vuepress.git master:gh-pages

cd -

双击运行deploy.sh
在这里插入图片描述
刷新页面, 查看上传的文件
在这里插入图片描述
设置github page
在这里插入图片描述
访问看看效果
http://www.hujinya.top/vuepress/
在这里插入图片描述

了解目录结构

创建目录结构
在这里插入图片描述

在docs文件夹下创建config.md文件, 新建文本文档, 再修改名称为config.md
在这里插入图片描述

在这里插入图片描述
创建guide文件夹, 在guide文件夹中创建README.md文件
在这里插入图片描述
重新运行项目npm run docs:dev, 访问这几个地址
在这里插入图片描述
页面路由地址: /
在这里插入图片描述
页面路由地址: /guide/
在这里插入图片描述

页面路由地址: /config.html
在这里插入图片描述

了解基本配置

创建配置文件
在这里插入图片描述
在docs文件夹中创建.vuepress文件夹
在这里插入图片描述
在vuepress文件夹中创建config.js文件
在这里插入图片描述
右键, 编辑, 输入内容:

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around'
}

重新运行项目npm run docs:dev, 访问主页, 查看页眉和搜索框.
在这里插入图片描述

主题配置

首页

(默认主题)配置导航栏, 侧边栏, 首页. 也可以用别人开发的主题(我使用默认配置).
在这里插入图片描述
点击详情请参见 默认主题 , 配置文档的首页.
在这里插入图片描述
修改docs文件夹中的README.md, 在第一行添加如下参数配置
在这里插入图片描述

---
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
---

在这里插入图片描述
在这里插入图片描述
保存文件, 重新运行项目npm run docs:dev, 访问主页
在这里插入图片描述
图片加载失败, 使用#注释图片的配置参数
在这里插入图片描述
保存文件, 重新运行项目npm run docs:dev, 访问主页
在这里插入图片描述
点击快速上手, 提示404页面
修改README.md文件的actionLink配置信息:

actionLink: /guide/

因为/zh/guide/是多语言支持的配置

如果要显示图片, 需要在docs/.vuepress/public添加对应名字的图片
在这里插入图片描述
在这里插入图片描述
在docs/.vuepress文件夹中添加public文件夹
在这里插入图片描述
在public文件夹中添加hero.png图片
在这里插入图片描述
设置图片路径为/hero.png,
在这里插入图片描述
保存文件, 重新运行项目npm run docs:dev, 访问主页
在这里插入图片描述

导航栏

后面参考官方文档, 配置导航栏, 配置侧边栏, 最后更新时间, 等等一些配置后, 就可以生成和vuepress一样的文档了.

在这里插入图片描述
随后, 写md文件后, 保存后, 需要同步的时候执行deploy.sh文件就会同步了.
在这里插入图片描述
同步失败的话, 可以使用命令提示符窗口执行, 查看错误.
查看是否是github没有设置ssh.
在这里插入图片描述
执行命令./deploy.sh
在这里插入图片描述
上传成功后, 提示Resolving deltas: 100% (23/23)，done .
在这里插入图片描述

End.

谢谢您的阅读！

Copyright 2023 Zichen

Licensed under the Apache License, Version 2.0 (the “License”);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an “AS IS” BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

zicl
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vuepress-theme-hope-demo:vuepress-theme-hope的演示
03-10
将 VuePress 项目部署到 GitHub Pages 可以方便地分享和展示你的文档或博客。 总的来说，"vuepress-theme-hope-demo" 是一个展示 "vuepress-theme-hope" 主题特性和功能的实例，帮助开发者理解和应用这个强大的 Vue...
vuepress-theme-hope.github.io:Vuepress-Theme-Hope的文档
03-09
Vuepress-Theme-Hope是基于Vuepress的个性化主题，它为用户提供了一套美观且功能丰富的文档站点构建方案。Vuepress本身是由Vue.js驱动的静态站点生成器，特别适合用于技术文档和项目文档的编写。Vuepress-Theme-Hope...
VuePress部署到GitHub Pages
m0_37820751的博客
01-05 1451
自定义域名需要在自己的域名上添加解析。
vuepress搭建个人博客以及部署
qq_43206280的博客
01-27 1439
vuepress，Vue 驱动的静态网站生成器，以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。vuepress存在很多主题，也可以自定义设计主题，上传npm使用这里采用vuepress-theme-hope主题模板进行制作创建项目命令yarn/npm/pnpm都可以这里记录几个关键点。
2024年最全Vue进阶（九十六）：VuePress 详解，前端多线程断点续传
最新发布
2301_82244330的博客
05-07 597
还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。来调试你的自定义主题！
超详细的vuepress搭建教程
香辣猪头肉的博客
04-14 1426
vuepress超详细项目搭建
GitHub Actions 自动部署 VuePress
Dablelv 的博客专栏。
05-26 909
大咖好呀，我是恋喵大鲤鱼。我的第二本开源书籍《后台开发命令 365》上线啦。为了方便阅读，使用 VuePress 将之前记录的后台常用 Linux 命令博文整理成一个系统的开源在线书籍，希望能够帮到大家。是 GitHub 于2018年10月推出推出的 CI/CD 服务。GitHub Actions 允许开发人员编写构建、测试、发布等多种功能的脚本，在特定的条件下（如 push 变更到指定分支时），执行事先写好的脚本，自动完成构建发布等操作。
使用 VuePress 博客搭建并使用 Github Action 部署
TracyIverson的博客
07-27 168
记录了使用 VuePress 搭建静态博客并使用 Github Action 部署，使用 Github Page 展示的全过程
Mister-Hope.github.io:使用 vuepress-theme-hope 构建个人博客
08-04
VuePress 是一个由 Vue.js 驱动的静态站点生成器，特别适合创建技术文档和个人博客。`vuepress-theme-hope` 是一个基于 VuePress 的主题，为用户提供丰富的功能和自定义选项，使得构建个人博客的过程更加便捷和美观...
reco-blog:vuepress博客
05-09
Vuepress 是一个由 Vue.js 驱动的静态站点生成器，特别适合构建技术文档和博客。它将 Markdown 文件转化为静态网页，提供美观、高效的阅读体验。在本文中，我们将深入探讨如何使用 Vuepress 创建一个名为 "reco-blog...
vuepress-theme-vdoing-doc:vuepress-theme-vdoing主题文档
05-01
VuePress 是一个由 Vue.js 驱动的静态站点生成器，它专为技术文档而设计，具有简洁、高效的特性。VuePress 主题是用于定制 VuePress 生成站点外观的工具，而 `vuepress-theme-vdoing` 是一个针对个人技术博客的 Vue...
vuepress创建+github展示页面（一）
qq_58791174的博客
06-14 207
写在前面，想要搭建首先要准备好一下几个工具。
Press ^C at any time to quit.
weixin_30393907的博客
11-24 1099
Ctrl+C 退出.............. 转载于:https://www.cnblogs.com/tangchun/p/7889282.html
VuePress2.0 + Github Actions部署到Github Pages教程
weixin_43019353的博客
05-19 630
选择权限，看不懂不懂全勾Read and write。就代表构建失败，可点进去查看原因。这代表成功，看到红色的。构建成功会发现多了个分支。
vuePress从无到有部署网站，以及踩到的坑
maoyuanh的博客
04-18 847
vuepress从无到有搭建到部署，出现乱码问题，文件路径404问题，组件刷新不可用问题
vuepress搭建个人博客并部署
蘑菇炸了
05-03 7749
想要快速搭建自己的个人博客,记录自己的工作学习心得,争取当一条有梦想的咸鱼 相信大家都了解过vue这个框架.而今天,我们的主角vuepress 就是vue的作者尤大大的一个作品.开源于大概2年前,其本意是用来为vue及其子项目写文档,现在被大部分人用来搭建个人博客.之前一直有所耳闻,vuepress可以搭建博客,但也只是有所耳闻罢了,这回趁着五一在家休息的时间,简单的学了下vuepress的用...
vuepress+github pages 搭建学习文档（保姆级教程）
mubaiyang2019的博客
08-04 1231
Vuepress+Github Pages 搭建个人学习文档！
怎么把使用vuepress搭建的博客部署到Github Pages
weixin_30897079的博客
08-19 1067
推荐在这里阅读效果更佳 背景 网上搜了很多教程，包括官网的教程,但是还是费了一番功夫， 如果你使用自动化部署脚本部署不成功的话，可以参考我的这个笨方法 这是部署后的效果 前提 我假设你本地运行OK, 已经准备好要部署了 第一步 你的 vuepress 项目是否已经在github上的仓库下 如果是，请跳到第二步 如果不是，想在GitHub新建一个仓库，如图所示： ## 小坑 仓库名字要和...
搭建vuepress博客并发布在github.io上
Mybells
08-09 1787
先在github上新建一个库用来存放博客代码。 本地拉取这个库。 用vscode打开项目，在终端执行npm init -y初始化项目，然后 npm i vuepress安装vuepress包。 建立如下结构目录和文件 在package.json中加入以下命令： 执行npm run dev:docs就可以看到效果了 要把vuepress博客建立自动推送到github.io上。 先在github...
vue-video-player文档_Vue-Video-Player 在github官方文档
06-07
Vue-Video-Player 是一个基于 Vue.js 的视频播放器组件，可以在网页中方便地嵌入视频播放器，并支持多种视频格式的播放。 官方文档位于 https://github.com/surmon-china/vue-video-player/blob/master/README.zh-CN.md ，其中包括安装、使用、API 文档等内容。 安装： 使用 npm 安装： ```bash npm install vue-video-player --save ``` 使用 yarn 安装： ```bash yarn add vue-video-player ``` 使用： 在 Vue 组件中使用： ```vue <template> <div> <video-player ref="videoPlayer" :options="playerOptions"></video-player> </div> </template> <script> import { videoPlayer } from 'vue-video-player' export default { components: { videoPlayer }, data () { return { playerOptions: { // 视频源 source: 'http://www.example.com/path/to/video.mp4', // 视频封面 poster: 'http://www.example.com/path/to/poster.jpg', // 是否自动播放 autoplay: false, // 是否循环播放 loop: false, // 是否显示控制条 controls: true } } }, mounted () { // 获取 video-player 实例 const player = this.$refs.videoPlayer.player // 播放视频 player.play() } } </script> ``` API 文档： Vue-Video-Player 提供了丰富的 API，可以通过实例的 player 属性获取到视频播放器实例，然后调用相应方法或设置相应属性。 例如，可以通过以下代码获取视频播放器实例，并设置播放速度为 1.5 倍： ```javascript const player = this.$refs.videoPlayer.player player.playbackRate = 1.5 ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值