尤小右:VitePress 初步实现小目标,极简静态站点生成器
VitePress:Vite & Vue 驱动的静态网站生成器 https://github.com/vuejs/vitepress
VuePress的小兄弟,建立在vite的基础上
npm install -D vitepress
echo '# Hello VitePress' > index.md
# starts dev server
npx vitepress
# build > .vitepress/dist
npx vitepress build
注意,这是早期的WIP! 默认的主题是不存在的,但基本的工作流程是有的。
定制化
可以通过.vitepress/config.js进行配置(见src/config.ts)。
您可以通过添加以下文件来开发您的自定义主题。
.vitepress/theme/Layout.vue
<template><h1>Custom Layout!</h1><Content/><!-- make sure to include markdown outlet -->
</template>
.vitepress/theme/index.js
import Layout from './Layout.vue'export default {Layout,NotFound: () => 'custom 404', // <- this is a Vue 3 functional componentenhanceApp({ app, router, siteData }) {// app is the Vue 3 app instance from createApp()// router is VitePress' custom router (see `lib/app/router.js`)// siteData is a ref of current site-level metadata.}
}
与VuePress不同,在一个主题中唯一有固定位置的文件是index.js----其他的东西都是在那里导入和导出,就像在一个普通的应用程序中一样。
动机
我喜欢VuePress,但是构建在webpack之上,为一个只有几个页面的简单文档站点启动dev服务器所需的时间正变得难以忍受。即使是HMR更新也可能需要几秒钟才能在浏览器中反映出来!
作为一个参考,Composition API RFC repo只有两页,但启动服务器需要4秒,而任何编辑在浏览器中反映出来的时间几乎是2秒。
从根本上讲,这是因为VuePress是一个底层的Webpack应用程序。即使只有两页,也要编译完整的webpack项目(包括所有主题源文件)。当项目有很多页面时,情况变得更糟-必须首先完全编译每个页面,服务器才能显示任何内容!
顺便说一下,vite很好地解决了这些问题:几乎是即时启动服务器,按需编译,只编译正在服务的页面,以及快速的HMR。此外,还有一些额外的设计问题,我在VuePress中注意到了一些额外的设计问题,但由于需要大量的重构,所以一直没有时间去解决。
现在,借助vite和Vue 3,现在应该重新考虑“ Vue驱动的静态站点生成器”的真正含义了。
对VuePress的改进
1.使用Vue 3
利用Vue 3改进的模板静态分析来尽可能对静态内容进行分类。静态内容是作为字符串文字而不是JavaScript呈现函数代码发送的-JS有效负载因此解析起来便宜得多,并且合成也变得更快。
注意,在应用优化的同时,用户仍然可以在标记内容中自由混合Vue组件 - 编译器会自动为你做静态/动态分离,你永远不需要考虑。
2.在后台使用vite
开发服务器启动更快
更快的热更新
更快的构建(内部使用汇总)
3.页面更轻
Vue 3 tree-shaking + Rollup 代码分割。
不为每个请求的每个页面发送元数据。这将使页面权重与页面总数解耦。只发送当前页面的元数据。客户端导航会将新页面的组件和元数据一起获取。
不使用vue-router,因为VitePress的需求是非常简单和具体的--使用一个简单的自定义路由器(200LOC以下)来代替。
(WIP) i18n locale数据也要按需获取。
其他的区别
更多固定内容,可配置性更低。VitePress的目标是缩减当前VuePress的复杂性,并从极简主义的根源上重新出发。
面向未来:VitePress只针对支持原生ES模块导入的浏览器。它鼓励使用原生JavaScript和CSS变量进行主题设计。
这将成为未来的下一个VuePress吗?
也许!当前使用的是另一个名称,因此我们不会过分致力于与当前VuePress生态系统(主要是主题和插件)的兼容性。我们将看到在不损害上面列出的设计目标的情况下可以达到的距离。但是总的想法是,VitePress将具有尽可能少的主题API(最好使用JavaScript API而不是文件布局约定),并且可能没有插件(所有自定义均在主题中完成)。
推荐阅读:
译文:Vue3 Composition API 是如何取代 Vue Mixins 的?
译文:使用Vue 3加快网络应用的速度
Vue.js 专栏课程推荐,助你更好迎接Vue 3.0
扶我起来,我还能学:迎接 Vue 3.0
转发让更多人陪你学~
尤小右:VitePress 初步实现小目标,极简静态站点生成器相关推荐
- Linux趣味小知识---tty终端内置的极简QQ功能
Linux趣味小知识---tty终端内置的极简QQ功能 首先,需要了解几个基本的概念: a, tty(终端设 ...
- 【邢不行|量化小讲堂系列06-Python量化入门】极简方法将日线数据转为周线、月线或其他周期
引言: 邢不行的系列帖子"量化小讲堂",通过实际案例教初学者使用python进行量化投资,了解行业研究方向,希望能对大家有帮助. [历史文章汇总]请点击此处 [必读文章]EOS期现 ...
- 微信小程序实现手写签名(极简横版)
以下代码在仅在基础库2.6版本无法正常运行,其他版本暂未测出问题. 文章目录 1.横版JSON配置 2.效果预览 3.代码实现 3.1 HTML 3.2 CSS 3.3 JSON 3.4 JS 1.横 ...
- 玩转微信小程序 之 初步了解微信小程序(2019/04/05)
LZ-Says:现在能做的,就是踏踏实实,走好每一步- 不去想未来会如何,安心做好自己应该做的事儿即可. 前言 前几日,集团官网开发暂时告一段落,回顾这段经历,感觉自己各方面还是有很多不足. 不过还好 ...
- 微信小程序(一)初步,包括(初步了解微信小程序,小程序项目结构,小程序宿主环境,发布与上线等)
文章目录 前言 一 微信小程序 1. 小程序与普通网页开发的区别 2. 注册小程序开发帐号 3. 安装开发者工具 4. 创建小程序项目 5. 查看项目效果 6. 主界面的 5 个组成部分 二 项目结构 ...
- 第十五周学习周记——微信小程序开发初步
第十五周学习周记 前言 一.小程序简介 二.小程序代码构成 1. JSON配置 2. WXML模板 3. WXSS样式 4. JS逻辑交互 总结 前言 这一周将开始微信小程序的学习. 一.小程序简介 ...
- api 定位 微信小程序 精度_微信小程序开发知识点集锦
一 小程序的生命周期 代码生命周期就是一个对象的生老病死,通常指程序从创建.开始.暂停.唤起.停止.卸载的过程.小程序的生命周期又可分为应用生命周期和页面的生命周期,先单独分析,在结合两者分析 应用生 ...
- android小闹钟课程设计,《小闹钟》教学设计
<小闹钟>教学设计 作为一名为他人授业解惑的教育工作者,编写教学设计是必不可少的,借助教学设计可以提高教学质量,收到预期的教学效果.那要怎么写好教学设计呢?下面是小编整理的<小闹钟& ...
- 小熊派开发实践丨小熊派+合宙Cat.1接入云服务器
摘要:使用小熊派开发板,以合宙的AIR724为通信模组(Cat.1),以AT指令方式,通过mqtt协议接入云服务器. 本贴使用小熊派开发板+合宙的Air724(Cat.1模组),接入自己搭建的EMQ服 ...
最新文章
- NET穿透技术---UDP打孔
- Price suggestion(EDA)下--nlp的处理
- nginx 漏洞(适用于0.1.0-0.8.14)补丁
- mendeley引用参考文献不显示_免费文献管理器Mendeley
- 牛客题霸 [有关阶乘的两个问题1] C++题解/答案
- 开放医疗交通大数据技术 服务于公共便民领域
- linux系统月初月末,Linux last显示系统开机以来获是从每月初登入者的讯息命令详解...
- 在Windows 7中安装、配置和使用IIS7和ASP
- 扫描仪twain驱动是什么_建湖扫描仪卡纸一般多少钱
- apache、nginx验证
- 安装mysql后环境变量_环境变量配置2 安装mysql
- 心理学实验必备 | 脑电实验流程及注意事项
- sql数据库中毒,扩展名被改为.supporthelpgood​,.666decrypt666​​​​​​,.xxxxx,.dom,勒索病毒加密该如何恢复数据
- 360 linux 杀毒,360主机卫士Linux后门专杀版
- 朴素贝叶斯-凉鞋问题
- 京东云安装docker
- 【人工智能项目】MNIST手写体识别实验及分析
- 计算机专业的学习方法
- Echarts的折线图堆叠示例,去掉线上小圆圈;多条折现可重叠。
- 央企建筑施工企业职工教育培训数字化解决方案
热门文章
- 爆刘德华脚踩两只船 喻可欣称娶谁与己无关
- 葡萄酒真的是用脚踩出来的吗?
- JavaScript简餐——代理Proxy与反射(一)
- Photoshop-填充和描边
- 家庭路由器设置(非企业路由器)
- 微信小程序 - 商城项目 - 搜索框组件
- String截取字符串的指定字节长度
- String获取字符串长度--length方法
- wps临时文件不自动删除_网易科技频道--小心!使用WPS Office的自动存盘会造成“泄密”!...
- 华为p40android auto,华为P40 Pro升级EMUI 11并获Wi-Fi6认证:底层基于Android 10