为什么要使用Vuepress

VuePress由两部分组成:一个极简的静态站点生成器,带有一个vue支持的主题系统和Plugin API,以及一个为编写技术文档而优化的默认主题。创建它是为了支持Vue自己的子项目的文档需求。

由VuePress生成的每个页面都有自己的预渲染静态HTML,提供了良好的加载性能和seo友好。然而,一旦页面被加载,Vue将接管静态内容并将其转换为完整的单页应用程序(Single-Page Application, SPA)。当用户在站点中导航时,会根据需要获取额外的页面。

通过本教程中,你将从头开始构建自己的应用,分别使用 create-vuepress-site 生成器 和 云开发平台

create-vuepress-site 生成器 快速搭建项目

一、搭建本地开发环境

  • 需要NodeJS 10。您可以使用n、nvm或nvm-windows 在同一台机器上管理多个版本的Node。 要了解如何安装 Node.js,参阅nodejs.org。 如果你不确定系统中正在运行的 Node.js 版本是什么,请在终端窗口中运行node -v。

  • npm 包管理器 因为我们通常都会使用vuepress 提供的脚手架搭建项目结构,所以要下载并安装 npm 包并且npm >= 6。,你需要一个 npm 包管理器。本指南使用 npm 客户端命令行界面,该界面默认安装在 Node.js。要检查你是否安装了 npm 客户端,请在终端窗口中运行 npm -v 。

  • 你可以使用 create-vuepress-site 生成器 来创建项目,生成应用和库代码,以及执行各种持续开发任务,比如测试、打包和部署。

二、创建新的初始应用

  • 要想创建一个新的初始应用项目,请执行:
npx create-vuepress-site [optionalDirectoryName]

该命令将以交互方式询问详细信息以配置您的 VuePress 站点的元数据,例如:

  • 项目名
  • 描述
  • 维护者电子邮件
  • 维护者姓名
  • 存储库 URL

docs完成此操作后,将在当前目录下的目录(或自定义目录名称,如果通过)中创建一个脚手架文档站点。

三、启动应用服务器

进入工作区目录,并启动这个应用。

cd docs
npm install
npm run dev

npm run dev 命令会构建本应用、启动开发服务器、监听源文件,并且当那些文件发生变化时重新构建本应用,
也会打开浏览器,并访问 http://localhost:8080/ 。

你会发现本应用正运行在浏览器中。

参考文献:https://vuepress.vuejs.org/

云开发平台一键部署vuepress

作为vuepress开发者的你,云开发平台为你提供了一站式,全云端的开发平台,让你可以打开浏览器就完成开发,调试,上线,同时云开发平台底层调用的是阿里云集团Serverless产品,可以实现低门槛开发,部署,调试,降低开发上手成本,让vuepress应用可以一键快速部署!

一、创建环境

想要一键部署vuepress,需要以下账号和服务:

  • Github账号 (https://github.com/),
  • 阿里云账号,并使用阿里云账号登录云开发平台 (https://workbench.aliyun.com/) ,为保证最好的使用体验,请使用Chrome浏览器。开通OSS服务。
  • 未开通阿里云OSS的用户,点击链接 (https://workbench.aliyun.com/product/open?code=oss) 开通OSS服务。OSS开通免费,有一定的免费额度,超过额度之后按量付费。

二、创建vuepress应用

  • 创建前端应用。打开快速开始 https://workbench.aliyun.com/app ,找到vuepress点击创建「创建应用」按钮。

  • 云资源访问授权。如果您之前没有使用过云开发平台,会出现云资源授权管理的选项,往下拉出现直至同意授权的字样,点击「同意授权」后出现授权成功,点击进入「下一步」。

  • 绑定Github账号。授权完成后选择来源仓库为Github,按照提示点击去绑定,绑定GitHub帐号,登录后并点击Authorize Aliyunworkben允许云开发平台构建、发布你的GitHub代码为可访问的网站。

  • 选择fork好的“vuepress”代码仓库。选择第一步中的代码仓库,主干分支,并点击下一步。主干分支一般指的是代码的master或main等分支。

填写基本信息,完成创建。填写基本信息并点击「完成」。成功后进入到应用详情和部署界面。

三、在日常环境部署

  • 一键进行应用部署。在应用详情页面点击日常环境的「部署」按钮进行一键部署,部署状态变成绿色已部署以后可以点击访问部署网站查看效果。

  • 访问vuepress网站。日常环境的测试域名也是可以访问的,点击访问已部署网站按钮会出现一个弹出,点击弹出上的立即访问就能够访问已经部署好的站点了。在部署完成后,可以继续本地编码,并将代码push到应用的“基本信息”中对应的代码仓库内。

阿里云开发平台多端应用

在平台中拥有热门开源应用的中心,以此去为每一位开发者的开发之路保驾护航。目前共涵盖多个领域,不乏像vuepress.js、React、Nuxt.js、Next.js、AntDesign等热门必备的框架,也包含了内容管理平台Hexo、Docusaurus、vuepressPress、Sapper等。提供给您了一个免费、便捷的云上研发工作平台,通过学习与实操演练两种模式,从入门到精通快速上手Serverless和云开发技术。0门槛全云端开发、随时随地在线协同、业界领先Serverless架构、行业应用一件初始化等特性也同步在每一次的实践。

云原生应用、主机应用部署、前端应用部署三大板块的支持,也供开发者们找到最合适自己神器,令开发工作事半功倍。其中满足IoT语音技能、小程序、H5应用等开发者低门槛应用开发的需求;也支持代码编译部署到ECS主机服务器的场景,帮助用户管理传统主机应用的能力;让前后端应用能够更高效地协同。平台将持续与开发者一起共同成长,帮忙开发者更好、更快以及更低成本的开发,多端的应用更加快速的上云。

基于Vue的极简生成器 — Vuepress相关推荐

  1. 基于python的个人博客_一款基于 Django 的极简主义个人博客系统

    shadow_blog 介绍 shadow_blog 是一款基于 Django 的极简主义个人博客,已应用在苍茫误此生博客 前端基于 Boundless-UI,风格简约.支持响应式布局, 已适配主流的 ...

  2. 基于SpringBoot+Bootstrap极简运维监控系统

    真正的大师,永远都怀着一颗学徒的心! 一.项目简介 基于SpringBoot+Bootstrap极简运维监控系统 二.实现功能 支持cpu使用率 支持cpu温度 支持内存使用率 支持磁盘容量 支持磁盘 ...

  3. 从零开始仿写一个抖音App——基于FFmpeg的极简视频播放器

    本文首发于微信公众号--世界上有意思的事,搬运转载请注明出处,否则将追究版权责任.微信号:a1018998632,交流qq群:859640274 1.从零开始仿写一个抖音app--开始 4.从零开始仿 ...

  4. cli3解决 ie11语法错误 vue_vue-admin-template基于vue2的极简后台管理系统

    简介 vue-admin-template一款极简的 vue admin 管理后台. 它只包含了 Element UI & axios & iconfont & permiss ...

  5. serverless搭建html,基于ServerLess的极简网页计数器:源码分析与实践

    这几天基于支持HTML5无感认证的ServerLess平台开发了一款博客.门户网站等web平台常用的PV统计工具:page-counter .主要用到的技术是js+webpack. 回首看来,解决了以 ...

  6. Vue.js 极简小例: 点击事件

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 代码: <template><div> <!-- jy_mothed ...

  7. Vue.js 极简小例:表单 (输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox)

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 代码: <template> <div > <p>------- ...

  8. Vue.js 极简小例: 4 种方式样式绑定、style 的多种方式实现

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 代码: <template><div id="app"> ...

  9. Vue.js 极简小例:数值计算、千米换算为米、九九乘法表、循环

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 代码: <template><div id="app"> ...

最新文章

  1. apktoolkit apk反编译没有文件_重新编译mono——修改apk中Assembly-CSharp.dll并重新打包...
  2. word笔记之选择性粘贴-设置默认粘贴为当前格式
  3. RuntimeError: cudnn64_7.dll not found.
  4. RxJava 和 RxAndroid 二(操作符的使用)
  5. Zend Framework学习(3)第一个zend应用
  6. 合成孔径雷达算法与实现_地基干涉合成孔径雷达图像非线性大气相位补偿方法...
  7. [Java] 蓝桥杯ALGO-145 算法训练 4-1打印下述图形
  8. 解决Win7系统没有声音 麦克无声等问题
  9. 用iFrame遮挡DropDownList的方法
  10. 【Luogu1345】周游加拿大(动态规划)
  11. 浅谈移动前端的最佳实践
  12. 【POJ 3348】Cows【凸包裸题】
  13. 这款App连夜被下架!
  14. 嵌入式硬件Linux,嵌入式linux硬件什么要求
  15. boost库的安装和使用
  16. html设置横线中间的字,CSS伪元素before,after制作左右横线中间文字效果
  17. Java爬虫.HttpClient
  18. .NET网站本机调试通过、发布后EXCEL导入数据库报错问题的解决
  19. 尺规虽设,犹奈“度”何
  20. 济源一中2021高考成绩查询入口,喜讯!高考刷新济源最高纪录!

热门文章

  1. 数据库字段类型、实体类字段类型、mapper文件jdbcType三者对应关系
  2. ubuntu新增固态硬盘的方法
  3. 努比亚手机浏览器 安全证书失效_彻底解决Charles手机抓包的证书问题
  4. 使用画笔 Stock Pens
  5. jQuery(动画,核心函数)
  6. python读取文件去掉换行符
  7. DIY旧电脑-解决旧电脑硬盘无法显示
  8. [天池竞赛系列]IJCAI-17 口碑商家客流量预测冠军思路
  9. 关于在VMware里面运行安卓模拟器提示需要电脑开启VT功能的方法
  10. python画出送花表情图编程_用Python来写一个男女相亲小程序|码农的情人节