4.1 项目结构首先说明一下官方推荐的目录结构:4.2 创建项目文件夹可以右键手动新建,也可以使用 mkdir 命令新建:mkdir vuepressBlogDemo全局安装 VuePressnpm install -g vuepress进入 vuepressBlogDemo 文件夹,初始化项目 使用 npm init 或 npm init -y(默认yes)npm init -y4.3 创建文件
前言从 9 月份开始,vuepress 源码进行了重新设计和拆分。先是开了个 next 分支,后来又合并到 master 分支,为即将发布的 1.x 版本做准备。最主要的变化是:大部分的全局功能都被拆分成了插件的形式,以可插拔的方式来支撑 vuepress 的运作,这一点很像 webpack。具体架构如下: 架构从图中我们可以看出,vuepress 被划分成了两个部分:前端部分和服务端
VuePress 由两部分组成:一部分是支持用 Vue 开发主题的极简静态网站生成器,另一个部分是为书写技术文档而优化的默认主题。它的诞生初衷是为了支持 Vue 及其子项目的文档需求。每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的
一、构建项目1.构建基本项目结构1.新建一个名为 blog-demo 的文件夹,命令行进入到该文件夹目录,输入命令:# 按默认配置初始化一个项目,此时会在当前目录下生成 package.json 文件
npm init -y2.将 VuePress 作为一个本地依赖安装npm install -D vuepress3.在 package.json&
1、使用 vue-cli 创建项目,并且安装依赖vue-cli文档: https://cli.vuejs.org/zh/说明:博客样式仿照 reco ,官网:https://vuepress-theme-reco.recoluan.com/,reco 是基于 VuePress 的一个静态博客,如果只是想搭建静态博客的话 reco 可以是一个好的选择,托管到 gitee page 或者 github
Vue 代码调试consoledebugger浏览器调试推荐文章 初入职场,还是个前端小白,代码写不出来,师傅不在 小梦 vs 后端大兄弟:我运行了一个东西,一直出不来 后端大兄弟:我可以试一试断点,看哪里出错 ······ 后端大兄弟: 我好像不懂 如何打前端断点,都被webpack 重新封装过了 小梦:okok,是时候总结一番 Vue代码如何进行调试 console作为小白,日常最常使用
前实现效果:https://blog.cls1277.com/本来打算用Halo的框架,一是因为Java且开源,二是也有生态但是之前在服务器上遇到了点问题,加上我现在更加喜欢云开发,最后还是决定了VuePress的框架,部署到了腾讯的云开发上中其实这篇博客的技术含量一点儿也不高,可以说是一种记录吧https://github.com/TencentCloudBase/cloudbase-templ
转载
2023-11-15 23:02:42
105阅读
VuePress简述VuePress是Vue的作者开发的一套用于快速搭建静态网站的框架,其实从它的名字就可以看出来,如果你对WordPress比较熟悉的话。VuePress的强大之处在于它是以Markdown文档为核心的,如果你已经习惯于用Markdown来写作,而且想基于此搭建一个类似于博客或官方网站类的应用,那么你是时候登录一下VuePress的官方网站了解了一下了,你应该会有所收获!当然,其
转载
2023-12-23 21:01:11
58阅读
VuePress由以Vue驱动的主题系统的静态网站生成工具和优化后的默认主题组成。在容易上手的同时,VuePress还兼容Markdown语法,因此VuePress很适合用于博客。(使用VuePress需要云服务器) 想要使用VuePress,需要对VuePress进行安装和配置。1.设置安全组 这一步的目的是开放22和8080端口。22端口令ecs可以使用SSH连接,8080端口用于实现网页浏览
随着开源项目knife4j添加的新特性越来越多,搭建一个开源软件的技术博客迫在眉睫,针对非专业前端的开发者来说,能快速搭建一个网站当然是最好的,正好,看到了VuePress这款产品特点简直是和自己完美契合,主要有几点;通过编写Markdown文件就可以轻松完成整个站点的内容输出,不用考虑排版,专注于协作基于Vue、Node等技术的可插拔式的自定义插件开发体系,构建自定义的主题、插件等简单、方便安装
花了2天多的时间总算搭出一个博客的雏形了。 搭建的博客没有使用官方提供的主题,而是自己创建了一个主题。所以,在样式上,有自己的风格和特点。转入正题。
环境搭建安装VuePressyarn global add vuepress
或者:npm install -g vuepress
也可以直接下载我的代码。然后cnpm i 下载依赖 https://github.com/newway7/blog
在项目扩展到一定程度,我们会对项目中大量的公共业务做封装,当多人开发时就带来一个问题:如何让所有人快速使用封装好的组件,降低学习成本?这里提供一个解决方案,那就是Vuepress框架,最新的 Vuepress2.x 框架已经蓄势待发,支持Vue3.x。一、创建一个基础Vuepress项目1、创建并进入一个新目录创建VuepressDocs目录mkdir VuepressDocs
cd Vuepre
通过VuePress管理项目文档
原创
2021-07-21 16:29:53
469阅读
Vuepress Vuepress 从名字上看就知道
原创
2022-07-24 00:35:51
288阅读
说明最近想把常用的一些干货知识点都集中起来,方便发布和查找。相当于创建一个自己的知识库,我就叫它Java技术文档。虽然博客写文档也挺方便,但是在于文档的集中阅读和管理方面还是不够简洁和快速。此处就以Vue官方文档举例,它就是用的自家技术vuepress创建的。关于vuepresshttps://www.vuepress.cn/关于github pagesGithub Pages其实等于jekyll
1 什么是VuePress?vuePress是以vue驱动的主题系统的简约静态网站生成工具2 如何搭建?在官方网址上说的其实很清楚的,这边简要的说一下2.1 利用npm 安装 vuepress# 初始化 npm
npm init -y
# 安装
yarn global add vuepress # 或者:npm install -g vuepress
# 新建一个 docs 文件夹
mkdir
最终效果使用方式页面效果一、需求vitepress-theme-demoblock插件在编辑md文件时,不支持TSX模式,也无法import其他依赖,并且展开隐藏的vue代码都在md文件中,不够优雅,且每个md文件太长。至此弃用此拆件,改用自己封装demo组件二、plugins配置:在docs/.vitepress下新建config文件夹1、在config文件夹新建global.ts文件,代码如下
前言在上一篇文章 vuepress(一):搭建个人博客插件的使用基础用法module.exports = {
plugins: [ 'vuepress-plugin-xxx', .... ]
}Babel 式module.exports = {
plugins: [
[
'vuepress-plugin-xxx',
{ /* options */ }
百家饭团队开发的百家饭OpenAPI平台是用vuepress2.0搭建的,搭建的时候不知道2.0还处在beta状态,所以导致后来踩了一些坑,使用过程中vuepress2.0也从2.0.0-beta.18升到了2.0.0-beta.48,有很多的变化,所以想写一个教程介绍一下vuepress2.0的情况以及使用经验。这里先给搜索进来的同学提个醒:
使用技术VuePress + vuepress-theme-recoVuePress简介VuePress文档地址简洁至上:以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。Vue 驱动:享受 Vue + webpack 的开发体验,可以在 Markdown 中使用 Vue 组件,又可以使用 Vue 来开发自定义主题。高性能:VuePress 会为每个页面预渲染生成静态的 HTM
转载
2023-12-24 08:00:41
46阅读