关于如何在vuepress编辑文档

已于 2023-12-13 00:57:03 修改
阅读量368 收藏 1
点赞数
文章标签： vue.js 前端框架
于 2023-12-12 23:13:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yueniubi/article/details/134960812
版权

！！首先鸣谢鱼皮大大开源的模版框架

首先要在官网下载node和npm，版本随意，下载好后，可以打开cmd命令行来查看是否成功，输入node -v，然后回车，再输入npm -v，然后回车，出现数字版本则代表成功

 打开文件目录，执行npm install命令（注意以管理员身份运行），来下载一些资源，慢慢等候，下载完成后就可以进行下一步

在编辑器中打开文件，

 

示例：如果要在项目实战栏目中写论文，则右击鼠标，创建一个file，输入你的文章名字，注意后缀名字需要加.md

 创建好后，就可以在里面编写你的文章

可以参照其他文章的写法来进行编写，#是一级标题，##是二级，依次类推， > 会给你的文字加上阴影背景，更多样式参考其他文章。

编写完成后在本目录的README.md中用总括号添加，类似于此

 最后一步，在sidebars文件中，找到你栏目对应的名字，看title对应，然后把文章名字输入进去，记得后缀.md,文章便书写完成

编写完成后，点击主目package.json文件，点击第一个绿色小箭头，运行项目 ，点击控制台网址查看结果

效果图展示

 

yueniubi
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
blog:基于VuePress的个人博客
04-29
**VuePress 概述** VuePress 是一个由 Vue.js 驱动的静态站点生成器，主要用于创建技术文档。...在本地快速启动和预览，以及便捷的构建过程，让 VuePress 成为了现代前端开发者构建技术文档的首选方案。
vuepress+gitee免费搭建个人在线博客（无保留版）
测试划水老师傅
09-22 1869
除了CSDN、博客园等，我们还可以使用Gitee Page（国内访问速度快）或Github Page + VuePress，来搭建自己的博客网站。
【小沐学前端】VuePress制作在线电子书、技术文档（VuePress + Markdown + node）
爱看书的小沐
08-06 2000
Vue驱动的静态网站生成器，生成的网页内容放到自己服务器上管理，可用于遍写技术文档或个人博客。VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。
标题：【推荐】VuePress绝佳伴侣：vuepress-plugin-demo-code
最新发布
gitblog_00058的博客
06-22 301
标题：【推荐】VuePress绝佳伴侣：vuepress-plugin-demo-code 项目地址:https://gitcode.com/BuptStEve/vuepress-plugin-demo-code 【项目介绍】 VuePress社区的瑰宝之一是vuepress-plugin-demo-code，它为你的VuePress文档添加了一个强大的功能——代码与示例同步展示。这个插件让开发者...
创建 VuePress + GithubPages + TravisCI 在线文档
田三番的博客
03-22 1856
[TOC] 最新博客链接 VuePress 在线文档链接_Github Pages VuePress 在线文档链接_博客服务器（如果上面进不去，可以进这个，服务器在阿里云） Github链接 最终效果 最终效果链接 思路 总体 VuePress 在本地完成项目的源文件，推送至 Github 触发 Travis CI 自动构建目标文件，完成后自动部署到另一个 Github 分支，此...
【抽五分钟】使用VuePress创建在线文档中心
u012818292的博客
10-20 1565
文章目录安装初始化核心配置导航栏配置侧边栏配置静态资源配置nginx部署typora编写 安装初始化 全局安装 npm install -g vuepress 创建目录 mkdir vurepress-blog 项目初始化 cd vurepress-blog npm init -y 初始化完成生成package.json文件 在当前目录中创建docs目录，存放博客书籍内容 mkdir docs 配置首页显示（以下为默认配置）docs下创建README.md --- home:
​使用VuePress搭建在线文档网站
m0_58045771的博客
08-16 292
​使用VuePress搭建在线文档网站
使用VuePress搭建在线文档网站
SCUhzs
03-22 1909
使用VuePress搭建在线文档网站 在线文档 VuePress官方在线文档(opens new window) 搭建基本环境 # 将 VuePress 作为一个本地依赖安装 npm install -D vuepress # 新建一个 docs 文件夹 mkdir docs # 新建一个文件: docs/README.md echo '# Hello VuePress!' > docs/README.md # 启动文档项目 npx vuepress dev docs # 构建静态文件 npx
notebook:用vuepress生成文档站点
04-19
标题 "notebook:用vuepress生成文档站点" 暗示了我们将讨论如何使用VuePress这个工具来创建和管理技术文档站点。VuePress是一个由Vue.js驱动的静态站点生成器，特别适合用来构建文档和知识库。它结合了Markdown的易...
vuepress
06-16
3. **编写内容**：进入项目目录，编辑 `.vuepress/config.js` 配置文件以定制网站信息，然后在 `src` 目录下编写 Markdown 文件。 4. **预览**：运行 `vuepress dev` 命令启动本地开发服务器，可以实时预览效果。 ...
基于VuePress 轻量级静态网站生成器的实现方法
08-27
下面是关于VuePress的详细介绍。 一、 VuePress的特性 1. 内置的markdown扩展专为技术文档优化，可以在markdown文件中直接使用Vue。 2. 驱动的可定制画主题，支持PWA - Progressive Web App（渐进式网页应用程序）...
vuepress-plugin-editable:（未完成开发）让我们编辑 Vuepress 生成的文档如此简单！vuepress-plugin-editable + veaba-bot，尚未支持 Clone 用户使用。（以下英文乱写的：Let's editing vuepress generate docs so easy!） Not support clone user yet!
05-09
vuepress-plugin-editableLet's editing vuepress generate docs so easy!Safety Warning: Currently, to facilitate functionality, veaba-bot explicitly redirects the Github AccessToken to the url of your ...
vue网站案例_基于VuePress构建高基于markdown语法的网站全教程
weixin_39715290的博客
12-04 425
介绍特性环境搭建 全局安装创建项目目录始化项目，建立并编辑 package.json建立基本目录修改配置文件 - config.js修改README.md运行项目深度开发 配置导航配置侧边栏总结模板主题设置其它插件一份完整的源码介绍VuePress是一个用来构建博客以及简易网站的项目，基于vuejs，由尤雨溪亲自主持的一个静态项目，静态打包。基于这样的系统，可以方便用于小型文章发布，如帮助中心、官...
前端在线编译工具 Codepen 实现代码在线编译并分享
HHH917的博客
03-06 1865
Codepen 在线编辑前端代码的网站 Codepen 可以 在线编写代码并调试，代码可以保存在网站，方便分享与提问，比如弄个小demo复现问题，给解答者方便理解并帮助提问者解决问题，也可以在上面提供分享自己的有意思的小项目，和博客 差不多； 保存自己的代码 及一些配置 首先注册与登陆Codepen 网址 https://codepen.io/ 这里不介绍! 登录成功！后 点击pen 创建一个新的空白编辑页； 空白页 也可自行修改编译器的布局 点击 settings => behavior可以
使用vuepress-theme-vdoing搭建个人博客
wsdchong的博客
09-14 4854
使用vuepress搭建个人博客 前言 之前通过学习接触到vuepress，写了四篇博客： 我对博客网站的认识——wsdchong vuepress-theme-vdoing使用体验 对vuepress以及vuepress-theme-vdoing的认识 从不懂到了解，现在开始正式实践。准备按四部曲进行。第一步是尝试使用vuepress； 第二步是尝试使用vuepress-theme-vdoing； 第三步是部署到GitHub Pages和Coding Pages上； 最后就是设计自己的博客。 因为vuep
超详细的vuepress搭建教程
香辣猪头肉的博客
04-14 1456
vuepress超详细项目搭建
Vue3+Vite+Element-plus搭建组件库并使用Vitepress编辑组件库文档且发布到 npm并且部署 github pages（vitepress文档渲染.vue组件-推荐使用第二种）
wocwin的博客
02-07 8062
Vue3 + Vite +Ts+Element-plus搭建组件库并使用Vitepress编辑组件库文档且发布到 npm并且部署 github pages;Vitepress编辑基于Element-plus再次封装的Vue3基础组件库文档弃用vitepress-theme-demoblock，使用自己封装的Demo组件
Vue3 + Vite使用Vitepress编辑基于Element-plus再次封装的Vue3基础组件库文档弃用vitepress-theme-demoblock，使用自己封装的Demo组件
wocwin的博客
05-22 5782
Vue3 + Vite使用Vitepress编辑基于Element-plus再次封装的Vue3基础组件库文档弃用vitepress-theme-demoblock，使用自己封装的Demo组件
vitepress使用
聪明勇敢有力气的博客
07-11 798
vitepress的简单使用
如何在vue中启动vuepress
06-10
在Vue项目中启动VuePress，您需要在Vue项目的根目录下创建一个新的文件夹，例如`docs`，然后在该文件夹中创建一个`.vuepress`文件夹，用于存放VuePress的相关配置文件和静态资源文件，例如： ``` mkdir docs cd docs mkdir .vuepress ``` 在`.vuepress`文件夹中，您可以创建一个`config.js`文件，用于配置VuePress的基本信息和主题等，例如： ```javascript module.exports = { title: 'My VuePress Site', description: 'This is my VuePress site', themeConfig: { nav: [ { text: 'Home', link: '/' }, { text: 'Guide', link: '/guide/' }, { text: 'About', link: '/about/' }, ], sidebar: [ '/', '/guide/', '/about/', ], }, } ``` 然后，在Vue项目的`package.json`文件中添加以下脚本： ```json { "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } ``` 其中，`docs:dev`用于在开发模式下启动VuePress，`docs:build`用于构建VuePress生成静态文件。 最后，在终端中执行以下命令即可启动VuePress： ``` npm run docs:dev ``` 然后，在浏览器中访问`http://localhost:8080/`即可查看VuePress的网站。如果需要构建静态文件，可以执行以下命令： ``` npm run docs:build ``` VuePress会自动将静态文件生成在`docs/.vuepress/dist`文件夹中，您可以将其上传到服务器上进行部署。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值