vuepress搭建 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

VuePress搭建博客

❞ 效果图使用技术 VuePress + vuepress-theme-reco VuePress简介 VuePress文档地址简洁至上：以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作...一、上手搭建 1.创建并进入一个新目录 mkdir vuepress-starter && cd vuepress-starter 2.使用你喜欢的包管理器进行初始化 yarn init # npm...init 3.将 VuePress 安装为本地依赖 yarn add -D vuepress # npm install -D vuepress ❝官方不推荐全局安装 VuePress ❞ 4.创建你的第一篇文档...: { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } 6.在本地启动服务器 yarn...简介 vuepress-theme-reco文档地址 ❝此主题几乎继承 VuePress 默认主题的一切功能。

6951 0

VuePress搭建永久文档博客网站VuePress 使用

VuePress 使用安装 # 全局安装VuePress npm install -D vuepress 本地新建文件夹>vuepress vuepress/新建docs文件夹 vuepress/...新建package.json文件 vuepress/docs/新建README.md文件 ?...创建文件在docs/README.md中添加代码 # my first vuepress 在package.json中添加代码 { "scripts": { "dev": "vuepress...dev docs", "build": "vuepress build docs" } } 在vuepress中启动命令 npm run dev 启动成功后打开看到以下页面说明vuepress...现在用github加vuepress，理论上来说，域名是永久可以访问的，这样一个在线文档或博客（根据你自己的配置喜好），并且vuepress也是基于vue的单页应用，访问速度及用户浏览反馈还是很棒的！

2.7K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

VuePress 搭建站点

VuePress 是静态站点生成框架之一，界面简介优雅，本文记录使用方法。...简介 VuePress 是尤雨溪（vue.js 框架作者）发布的一个全新的基于 vue 的静态网站生成器，实际上就是一个 vue 的 spa 应用，内置 webpack，可以用来写文档。...Analytics 集成支持 PWA 中文官网：https://vuepress.docschina.org/ 安装 nodejs VuePress 需要安装 Node.js，且版本要求 >= 8。...vuepress 在 nodejs 平台下安装 vuepress npm install -g vuepress # 或 yarn global add vuepress 使用方法创建框架以 Cellink...在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹和 config.js 文件，最终项目结构如下所示： VueDemo ├─── docs │ ├─

9261 0

VuePress搭建项目组件文档

下载vuepress github传送门：github.com/git-Dignity… 官网：caibaojian.com/vuepress/gu… 我先git clone官方github，运行查看完整效果...了解vuepress结构配置文件配置（参考链接：caibaojian.com/vuepress/co…） VuePress 站点的基本文件是 .vuepress/config.js，其中导出一个...\vuepress\docs\.vuepress\public\css\button.css,写法参考饿了么。在....\study\vuepress\docs\.vuepress\public\css\index.css汇总 @import './iconfont.css'; @import '....nginx上的配置 vuepress里面docs\.vuepress\config.js把base配置设为 “/”（很重要）我们把vuepress打包之后的文件放在nginx上 server

7424 0

使用VuePress 搭建个人博客

介绍 VuePress 是一个静态网站生成器，包含由Vue驱动的主题系统和插件API，同时还包含一个为书写技术文档而优化的默认主题。此篇文章只介绍如何使用VuePress 搭建个人博客的部分。...安装 ❝前置条件：VuePress 需要 Node.js >= 8.6 ❞ 安装 vuepress VuePress 安装毕竟简单，可以使用以下命令直接安装： yarn add -D vuepress...# npm install -D vuepress 验证安装为了验证VuePress 的效果，首先创建一篇文档 mkdir docs && echo '# Hello VuePress' > README.md...VuePress 目录结构 VuePress 遵循「“约定优于配置”」的原则，推荐的目录结构如下： . ├── blog │ ├── .vuepress (可选的) │ │ ├── components...首先在当前目录下创建 .vuepress 目录（所有 VuePress 相关的文件都放在此目录下），然后在 .vuepress 目录下创建 config.js 文件（也可以使用YAML (.vuepress

1.4K2 0

Gitee+VuePress搭建个人博客

/vuepress-theme-reco?..._from=gitee_search在gitee页面中克隆一份VuePress-themo-reco，这里就有人会疑惑了，咱们不是整VuePress吗，怎么克隆一份VuePress-themo-reco...，VuePress-themo-reco是基于VuePress开发一款博客主题，我个人就是用的这个博客主题，感觉还蛮好的。...git clone https://gitee.com/vuepress-reco/vuepress-theme-reco.git 使用npm的同学 # init npm install @vuepress-reco...": { "dev": "vuepress dev

1.3K3 0

VuePress +Gitee 快速搭建个人博客

一、快速搭建博客 1.怎么才能实现快速搭建博客的呢？其实很简单就是拿来主义。首先你要知道有哪些工具可以搭建博客；然后你可通过搜索引擎搜索官方文档，动动手指就可以本地运行起来。...三、实战 3.1.博客快速搭建 3.1.1.本地博客搭建命令 a.npm 博客搭建 npm install @vuepress-reco/theme-cli -g #插件安装 theme-cli init...在线访问：https://huaairen.gitee.io/vuepress-demo/ 3.2.官方文档教程 VuePress 的官方教程其实特别详细，喜欢从 0 搭建博客的小伙伴可以选择官网教程。...https://vuepress.vuejs.org/zh/guide/getting-started.html 四、最后前端技术的飞速发展，博客搭建变得更加的简单。...MySql搭建个人博客站点参考 vuepress 快速上手: https://vuepress.vuejs.org/zh/guide/getting-started.html vuepress-theme

2.3K2 2

使用Vuepress和Nginx搭建个人博客

使用Vuepress和Nginx搭建个人博客 ## Vuepress VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件...说白了，VuePress就是基于Vue，用了SSR渲染成本地静态页面，解决PWA在SEO方面的弱势。...而VuePress除了使用Vue外，还继承了Vue各项能力，比如使用stylus写css，也能通过enhanceApp来增强应用，比如在Vuepress中使用Vuex等等。...后续将介绍如果安装Vuepress，如果使用enhanceApp，如果使用stylus，如何在Vuepress中自定义主题，并且最终将vuepress内容发布到Nginx供internet访问。...run docs:build 命令可以编译生成所有的静态html文件，这些静态文件可以配置在nginx服务器直接访问 vuepress目录结构 ├── docs │ ├── .vuepress (

1.5K3 0

从零开始搭建 VuePress 静态博客

（源码备份） cnguu.github.io（博客部署） # 开始使用 VuePress # 基础目录与文件新建文件夹：C:\vuepress-blog，表示为根目录在根目录中新建以下文件： .gitattributes.../usr/bin/env bash # # VuePress 通用部署脚本 # # Windows 无法执行 .sh 文件，需要安装 git 客户端 # # Author: cnguu # Email:..." }, "main": "index.js", "scripts": { "start": "vuepress dev docs", "build": "vuepress.../deploy.sh" }, "dependencies": { "vuepress": "^1.1.0" } } README.md 示例： # VuePress Blog #...（存放静态资源和配置）在 .vuepress 下新建文件夹 public（存放静态资源）在 .vuepress 下新建文件 config.js（站点配置文件）注意备份：使用 Git 提交到源码备份仓库

8355 2

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

自己总结的vuepress优点 ? 3. 同类模块横向对比 ①....个人博客：博客1（默认主题）、博客2（自定义主题）三、开始搭建 coding之前，建议大家先了解markdown语法，为之后的文档撰写做铺垫：传送门 1....全局安装 VuePress npm install \-g vuepress 2. 创建并进入项目 mkdir vuepress-demo && cd vuepress-demo 3....即 Github 提供的、用于搭建个人网站的静态站点托管服务。很多人用它搭建个人博客。这种方式的好处是免费、方便，坏处是速度可能会有些慢、不能被国内的搜索引擎收录。...// 提交到暂存区 git add . // 提交到本地仓库 git commit -m '基本搭建完毕' // push到github仓库 git push --set-upstream origin

2.2K1 0

腾讯云静态网站托管之搭建 VuePress

申请地址：https://url.cn/59FNl75 操作场景本文档介绍通过腾讯云静态网站托管服务搭建一个 VuePress 网站，并使用云开发 CLI 工具管理部署 VuePress 网站。...npm i -g @cloudbase/cli vuepress 步骤2：在本地初始化一个 VuePress 项目首先，在本地创建一个目录，这里以 tcb 为例： mkdir tcb && cd tcb...echo "# Hello TCB & Vuepress" > README.md ? 然后，执行命令，启动，并查看效果。 vuepress dev 等待其编译完成，完成后如下如所示。 ?...部署 VuePress 回到我们刚刚创建的 VuePress 的目录，执行命令构建静态页面： vuepress build 构建完成后，会提醒您，生成的静态文件在 .vuepress/dist。...步骤5：浏览 VuePress 打开腾讯云云开发控制台，单击左侧菜单栏中的【静态网站托管】>【设置】，进入设置页面，可以找到默认的域名，单击域名，就可以看到您刚部署的 VuePress。 ?

7.2K3 0

vuePress

1.项目初始化 yarn init # npm init 2.安装依赖将 VuePress 安装为本地依赖我们已经不再推荐全局安装 VuePress yarn add -D vuepress # npm...{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } 4....安装主题 vuepress-theme-reco yarn add vuepress-theme-reco # npm install vuepress-theme-reco --save-dev ...5.创建.vuepress 文件夹并创建 config.js 配置文件 mkdir docs/.vuepress && touch docs/.vuepress/config.js 编辑 config.js..., }, }; 9、写文章完成了基础搭建后，按照 config.js 里面配置的目录结构，在 docs 目录下新增相应的.md 文件，一篇文章就是一个.md 文件

7831 0

用vuepress2搭建自己的github网站

最近打算自己做一个博客网站记笔记，然后部署到github上，最终选择了vuepress的最新版本v2（使用的是vue3和TypeScript开发，默认使用Vite作为打包工具）。...一、根据官方示例搭建项目直接根据官方文档先初始化项目就行了，注意文档的版本，v1和v2还是有很多地方不同的。...项目里本地引用的图片这类静态资源尽量都用相对路径，vuepress打包的时候会根据 base 自动处理。...四、vuepress v2版本的坑最新的v2版本和v1有很大的不同，网上大部分的教程都是针对v1版的，在v2中并不起作用。1..../components下的组件并不会被自动全局注册，需要自己手动注册或者借助 @vuepress/plugin-register-components 插件来配置

8821 0

VuePress

VuePress 安装vuepress前，请确保你的 Node.js 版本 >= 8 全局安装 # 安装 yarn global add vuepress 或者：npm install -g vuepress...> README.md # 开始写作 vuepress dev . # 构建静态文件 vuepress build ....注意：vuepress dev .和vuepress build .后面的.。...在现有项目中安装 # 将 vuepress 作为一个本地依赖安装 yarn add -D vuepress 或者：npm install -D vuepress # 新建一个 docs 文件夹 mkdir...现在页面基本也搭建完成，可以在页面之间进行切换。下一步是如何在markdown中使用vue组件，也就是在页面中展示自己的项目。

1.5K1 0

第一个博客搭建之Vuepress

感谢 vuepress-theme-reco主题与一篇博客使用文章使用 vuepress 构建个人博客在写这篇文章前，本人非前端专业人士，只是一时兴起想开始搭建一个博客，在该博客上记录与分享一下自己所学的一切内容...一时兴起，萌生了搭建博客的想法，然后开始搜索搭建博客的知识，于是乎就有了这篇文章。...初步搭建博客界面要展示给别人看，就必须得搞前端 UI 界面，同时为了快速开发，我又百度了相关的前端 UI 框架，其中决定用 layui，界面风格布局可以接受，于是乎在搜索用过 layui 框架搭建的个人博客...放一些链接放一些自己搭建这个博客过程中用到的一些链接地址，主要针对插件安装这些 VuePress 官网 VuePress 社区 awesome-vuepress reco 主题一个非常详细的搭建教程...但还是要说的，要看自己到底要不要搭建博客，记录与分享文章，别盲目跟从。同时如果搭建博客，请把重心放在创作和笔记上，反复去美化主题对技术的提升远不如一篇有技术性的文章总结。

1.1K1 0

用vuepress2搭建自己的github网站

最近打算自己做一个博客网站记笔记，然后部署到github上，最终选择了vuepress的最新版本v2（使用的是vue3和TypeScript开发，默认使用Vite作为打包工具）。...一、根据官方示例搭建项目直接根据官方文档先初始化项目就行了，注意文档的版本，v1和v2还是有很多地方不同的。...项目里本地引用的图片这类静态资源尽量都用相对路径，vuepress打包的时候会根据 base 自动处理。...四、vuepress v2版本的坑最新的v2版本和v1有很大的不同，网上大部分的教程都是针对v1版的，在v2中并不起作用。 1..../components下的组件并不会被自动全局注册，需要自己手动注册或者借助 @vuepress/plugin-register-components 插件来配置

8564 0

H5-Dooring可视化搭建文档.vuepress

Dooring 文档搭建文档系统我们采用的是vuepress, 它提供了很便捷的文档编写部署方案, 且支持移动端适配, 我们来看看H5-Dooring的文档界面: ? 文档组织结构: ?

1.1K3 0

使用vuepress+github page搭建网络收藏夹

使用vuepress+github page搭建收藏夹在开发学习过程中总会遇到各种各样的问题，当时解决之后，如果没能做好笔记，过一段时间之后很容易遗忘。...搭配vuepress做成可以在线阅读的笔记本。...为什么选择vuepress： 1.使用vue的时候比较多 2.vuepress的界面比较符合我的审美开工 1.创建仓库并设置仓库开启github page setting->GitHub Pages...2.克隆这个库在你本地使用vuepress进行初始化。...# 生成静态文件 npm run docs:build # 进入生成的文件夹 cd docs/.vuepress/dist #创建.nojekyll 防止Github Pages build错误

9552 0

Vuepress 介绍

# 插件 # 插件整理 vuepress-plugin-mermaidjs (opens new window) 流程图、时序图、类图、状态图 ...... vuepress-plugin-baidu-autopush...(opens new window) 百度推送 vuepress-plugin-thirdparty-search (opens new window) 第三方搜索链接 vuepress-plugin-one-click-copy...(opens new window) 代码块复制按钮 vuepress-plugin-zooming (opens new window) 放大图片 vuepress-plugin-comment...Valine方式加入评论 | Valine-Admin (opens new window) 加入邮箱通知 # 插件使用方法加入插件包 yarn add -D vuepress-plugin-xxx...# npm install -D vuepress-plugin-xxx 使用插件包 module.exports = { plugins: [ [ 'vuepress-plugin-xxx

3902 0

VuePress 入门

安装全局安装 # 安装 yarn global add vuepress # 或者：npm install -g vuepress # 新建一个 markdown 文件 echo '# Hello...VuePress!'...> CORE 2 # 开始写作 vuepress dev . # 构建静态文件 vuepress build . 2....局部安装如果想在一个现有项目中使用 VuePress，同时想要在该项目中管理文档，则应该将 VuePress 安装为本地依赖。...# 将 VuePress 作为一个本地依赖安装 yarn add -D vuepress # 或者：npm install -D vuepress # 新建一个 docs 文件夹 mkdir docs

8143 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭