json格式生成器_VuePress - Vue驱动的静态网站生成器

news/2024/5/16 14:14:31/文章来源:https://blog.csdn.net/weixin_39594080/article/details/110596625

还在烦恼怎么做一个简单又美观的文档或博客网站吗?VuePress,让你十分钟就能搭建一个静态网站!

5fcc604ae583d8ce330d80dc6c94af95.png

Vue.js

简介

VuePress,是 vuejs 在 Github 上开源的静态网站生成器,项目仓库位于 https://github.com/vuejs/vuepress,目前版本为 v1.5.0。VuePress 结合了 Markdown 语法和 Vue.js,可以从 Markdown 文档中直接生成一个静态网站,且可以结合 Vue.js,实现更为美观和强大的自定义主题和功能,满足快速构建如文档和技术博客网站等静态网站。相比于其他项目,VuePress 开箱即用,依赖较少,对 SEO 友好,能有效利用 Vue 处理布局和交互,渲染配置灵活。

eb06f24063e11aee026841e4f7429e0d.png

VuePress:Vue驱动的静态网站生成器

安装

VuePress使用简单,可以使用 yarn 直接安装:

yarn add -D vuepress

也可以使用 npm 安装,

npm install -D vuepress

如果项目依赖 webpack 3.x,推荐使用yarn安装,因为npm会生成错误的依赖树。

示例

VuePress使用简单,可以通过命令行生成样板项目:

yarn create vuepress [directoryName]

命令行会提示选择生成的项目类型:文档,或博客。

3595337c41993a7b301e78eb6dcf95d9.png

VuePress类型

然后,命令行会提示输入包括项目名称、描述、作者等的项目信息。依次输入后,VuePress就会生成一个样板项目结构,包括 package.json 和默认的样板内容。要启动项目,首先进行依赖的安装,运行

yarn install

依赖安装完毕后,使用预设的脚本命令

yarn dev

启动项目。等待项目构建完成后,访问 http://localhost:8080/,就会显示一个默认的静态网站:

b026232c515d5225380fe6fefee92bdc.png

VuePress默认网站

VuePress 提供了对 YAML front matter 开箱即用的支持。文档类型的样板项目的 README.md 代码如下:

58b5b0acff0854c9d8bb2bd4640a1495.png

VuePress Front Matter

使用了 YAML 格式的 Front Matter,定义了包括主页图片、特性标签、脚注等在内的内容,最终渲染得到了我们前面看到的静态页面。

更多

  • 支持 Github 风格的表格
851d116ceb1fb85cdf971b98c91bdfb3.png

VuePress表格

  • 支持目录生成
a0bd0d9ffb35d2fd684f18589835ffed.png

VuePress目录生成

  • 支持自定义容器
2915f65992ad4723929e31c7cc06708f

VuePress自定义容器

  • 支持代码块语法高亮
  • ……
c61e85e71822fde0f5bc8fd29407f1bd.png

VuePress特性

总结

VuePress 由 Vue.js 团队维护,使用简单,开箱即用,在 Vue 的驱动下能够提供用户友好的布局和交互,开发效率高,是一个值得使用的开源项目。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_769091.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sqlmap自动扫描注入点_sqlmap,扫描网站数据库并得到用户名及密码!

接着上篇文章,你已经对sqlmap有了了解。那么我们今天就进一步了解sqlmap,使用sqlmap对一个网站解剖分析!SqlMap的程序允许检查网站的SQL注入漏洞,XSS漏洞的存在,并且可以还利用SQL注入。支持多种SQL注入类型和多种数据…

论坛隐藏链接获取_同业竞争网站论坛发外链

写在前边得话:建立网站必须顽强的团队执行力,特别是在是站长,由于站长沒有强劲的营销团队,沒有深厚的资产,都没有人脉关系。站长中又也有业余组网站站长和岗位网站站长,业余组网站站长更不幸,由…

linux drupal 7安装教程,drupal7|drupal 7(建站开发工具)下载附安装教程 - 欧普软件下载...

​drupal7是一款非常好用的建站开发工具,采用PHP语言编写的开源内容管理框架,由内容管理系统(CMS)和PHP开发框架(Framework)共同构建,集内核、模块、主题三大功能于一体,可以制作不同类型的网站,小编还提供了drupal7安…

php mysql购物网站作业_购物网站的设计与实现(PHP,MySQL)(含录像)

购物网站的设计与实现(PHP,MySQL)(含录像)(毕业论文10000字,程序代码,MySQL数据库)本项目是通过B/S框架技术来进行设计和实现的。项目主要用到的技术有php,PHPscript,html/css等。数据库使用的是MySQL。购物网站共分为两个部分,一部分是面向用…

apache的网站配置目录_Apache监控与调优(一)目录结构

Apache安装好后,主要包含的目录文件有:bin、build、cgi-bin、conf、error、htdocs、icons、include、lib、logs、man、manual和modules。这些目录文件主要的作用如下:1) bin目录主要是存放一些命令文件,最常用的是apache启动、关闭…

flask+echarts+mysql_实战|Python爬虫并用Flask框架搭建可视化网站

大家好,我是J哥,也可以叫我菜J,专注原创,致力于用浅显易懂的语言分享网络爬虫、数据分析、可视化等干货,希望人人都能学到新知识。项目背景事情是这样的,最近呢,一直有朋友问我有没有什么办法将…

服务器管理器建网站,搭建web服务器

打开一台windows 2008服务器(并保证已安装DNS服务器,Ip地址是192.168.6.1DNS指向自已)计算机右击管理打开服务器管理器点击角色选择添加角色,开始配置安装 ,单击“下一步”选择web(iis)在弹出的对话框中单击添加必须的功能,单击“…

上传图片配置控制大小_网站限制图片上传大小怎么办?巧用这个神器,瞬间突破限制...

现在很多网站都会限制图片的上传大小,怎么办呢?通常的做法是将图片压缩,那么问题又来了:压缩图片的同时,怎么保证图片的清晰度呢?这就要看你是怎么压缩图片大小的啦!接下来就向大家推荐一些不错…

域名服务器虚拟主机购买,如何注册网站域名和购买虚拟主机

如何注册网站1、注册网站会员进入2、如何注册网站域名首先,进到西部数码的域名注册页面,在搜索框中,输入想注册的域名名称,检测是否可以注册我们拿网站域名注册来测试下:wangzhanyumingzhuce,点击“查域名”…

工作四年,分享一些实用工具和网站

前言 今天来跟大家分享下常用的学习网站 & 各种小工具! 本文主要是针对那些学生党,相信有工作经验的大部分你应该都用过。 工欲善其事必先利其器,如果能帮到你,记得点赞、关注,谢谢! B 站 去哪里学…

Nginx网站服务 (web虚拟主机)

Nginx网站服务 实验材料 centos7一台Xshell连接,ip 192.168.100.102 vm1 win2008server一台,做dns解析 ip 192.168.100.66 vm1 安装及运行控制 1.编译安装Nginx 1)安装支持软件 [rootCentOS7-02 ~]# yum -y install pcre-devel zlib-dev…

Tomcat网站服务,和Nginx结合的群集

Tomcat网站服务 Tomcat,适用于JAVA语言的开放环境,而apache和Nginx适用于PHP环境的开发环境, Tomcat适用于访问量不是很大的生产环境下 实验材料 一台centos7 ip 192.168.100.102 Xshell连接 Tomcat软件包,我后面会提供百度云&…

apache优化:设置错误页面友好显示,mo_deflate网站压缩功能和mod_expires缓存功能

实验环境如下 一台centos7纯净,配置好yum源,IP为192.168.1.11,关闭防火墙 一.源码安装httpd服务 安装服务不是本次重点,这里就安装一下就可以 下面是apache的软件包,上传至服务器 链接:https://pan.baid…

概要设计和详细设计模板_网站模板不用设计 直接下载免费网站模板

今天给大家分享几个下载网站模板的网站,国外精品网站模板,设计风格大气,思路清晰,可下载,可学习别人的设计理念和制作方法,非常不错的几个网站,强烈建议收藏了。一.Awwwards精挑细选世界各地的最…

语种切换_完美的多语种网站插件WEGLOT

什么是 Weglot?Weglot在几分钟之内即可将您的网站变成多语种网站。Weglot只需在您的网站上添加一个语言切换器按钮,即可翻译内容而无需任何编码。如何安装Weglot?本文介绍以WordPress网站为例,介绍如何设置Weglot插件使您的网站具有多种语言…

华为云服务器几个网站,云服务器支持几个网站

云服务器支持几个网站 内容精选换一换香港节点和大陆节点的区别如下:香港节点购买域名后无需备案,可以直接在后台绑定域名并使用。大陆节点购买域名后需要先完成备案,才可以在后台绑定域名。香港节点支持绑定多个一级或者子域名,大…

如何用计算机建网站,如何在自己的电脑上建网站

我们要知道建一个网站,需要承载网站的容器,有了容器之后还要能让网站运作起来的环境;有了网站运作的环境之后,我们就需要一个能管理网站内容图片,用框架的形式展现出来的东西,也就是CMS;接下来我…

php模版前台加织梦后台,dedecms网站后台如何使用sql语句给dedecms模板添加自定义属性...

dedecms网站后台如何使用sql语句给dedecms模板添加自定义属性?织梦dedecms模板前台调用文章时经常会觉得属性不够用,我们可以自定义很多属性标签,这样前台调用时就可以做到非常精准,而添加也是非常简单的,下面是我网上…

html.partial mvc5,ASP.NET MVC5网站开发我的咨询列表及添加咨询(十二)

上次把咨询的架构搭好了,现在分两次来完成咨询:1、用户部分,2管理部分。这次实现用户部分,包含两个功能,查看我的咨询和进行咨询。一、菜单打开上次添加的ConsultationController控制器,添加Menu action&am…

网站服务器操作系统的用户数,服务器操作系统的用户数

服务器操作系统的用户数 内容精选换一换如果您需要使用毕昇编译器,则需要先在服务端安装毕昇编译器。毕昇编译器基于开源LLVM开发,并进行了优化和改进,同时将flang作为默认的Fortran语言前端编译器,是针对鲲鹏平台的高性能编译器。…