首页 > 其他分享 >我用VitePress“抄袭“了阮一峰老师的ES6入门网站，你也来试试

我用VitePress“抄袭“了阮一峰老师的ES6入门网站，你也来试试

时间：2024-08-02 18:54:08浏览次数：9  
标签：ES6 menu vp 一峰 doc link VitePress text

你好同学，我是沐爸，欢迎点赞、收藏和关注！个人知乎、公众号"沐爸空间"

基于 VitePress 框架，我在个人阿里云服务器上部署了《ES6 入门教程》的静态站点，项目访问地址：http://es6.muba888.cn/。项目代码已开源：https://gitee.com/ismuba/vitepress-es6.git，个人可以根据需要，自行下载代码和修改，用于快速部署个人博客系统或文档管理系统等。

效果预览

首页
image.png

白天效果
image.png

黑夜效果
image.png

开始之前先了解下 vitepress。

VitePress 是什么？

VitePress 是一款由 Vue.js 的作者尤雨溪主导开发的静态网站生成器，它基于 Vite 构建，专为快速、高效地构建技术文档、博客和官方网站等类型的站点而设计。以下是 VitePress 的特点和使用场景：

特点

1.快速构建与热重载：

  • VitePress 利用 Vite 的原生 ES 模块导入和高效的文件系统缓存机制，实现了快速的热重载和即时的页面预览。这意味着在开发过程中，开发者可以实时看到修改效果，大大提高了开发效率。

2.Markdown 至上：

  • VitePress 支持 Markdown 格式的文档编写，这是一种轻量级的标记语言，易于阅读和书写。同时，它还支持 Markdown 的语法扩展，允许在 Markdown 中嵌入 Vue 组件，从而提供更丰富的文档内容和交互效果。

3.易于上手与定制化：

  • 对于熟悉 Markdown 的开发者来说，VitePress 可以迅速上手。同时，它还支持自定义主题和样式，允许开发者根据需求调整站点的外观和交互效果，满足不同的品牌风格需求。

4.丰富的功能：

  • VitePress 内置了自动侧边栏生成和导航、内置搜索功能以及自定义主题和样式等功能。这些功能使得开发者可以轻松地构建出符合自身需求的文档站点，提升用户体验。

5.轻量级与高性能：

  • 相比其他静态网站生成器，VitePress 更加轻量级，学习成本更低。同时，它借助 Vite 的强大性能，实现了高效的构建和部署，使得站点能够快速加载和响应。

使用场景

1.技术文档：

  • 对于开源项目或企业内部项目，可以使用 VitePress 快速构建美观、响应式且易于维护的文档网站，如 API文档、开发手册等。

2.个人或团队博客：

  • 开发者可以搭建个人技术博客，利用 Markdown 进行内容创作，享受近乎即时的预览和高效的构建速度。同时，通过自定义主题和样式，可以打造出个性化的博客界面。

3.官方网站：

  • 企业或团队可以用 VitePress 构建内部知识库或官方网站，方便成员查阅和分享各类技术和业务文档。此外，VitePress 还支持 SEO 优化，有助于提升网站在搜索引擎中的排名。

4.在线教程：

  • 教育机构或个人讲师可以使用 VitePress 制作和发布在线教程，支持代码高亮、表格、图片等丰富格式，提升阅读体验。同时，还可以嵌入 Vue 组件来展示交互效果，使教程更加生动和有趣。

接下来重点来了，怎么利用 vitepress 开发自己的静态站点呢？下面说下 ES6 入门教程网站的开发过程。

项目开发过程

1.初始化项目并安装 vitepress

    npm init -y

    npm add -D vitepress

2.安装向导

    npx vitepress init

3.本地启动项目

    npm run docs:dev

3.编写 ES6 知识的文档
主要是从《ES6 入门教程》官网获取 md 文档并移植到本地。

4.配置文件
在项目根目录下 .vitepress/config.mts 文件中进行配置网页语言、标题、描述、根目录、logo、导航栏和菜单栏等。

import { defineConfig } from 'vitepress'

export default defineConfig({
    lang: 'zh-CN',
    title: 'ES6',
    description: '阮一峰ES6入门教程, 一本高质量、全面深入的ES6学习教程',
    lastUpdated: true,
    base: '/',
    cleanUrls: true,
    markdown: {
        theme: {
            dark: 'dracula-soft',
            light: 'material-theme'
        }
    },
    themeConfig: {
        logo: 'https://s21.ax1x.com/2024/07/16/pkIr1Bj.jpg',
        nav: [
            { text: '目录', link: '/menu/README' },
            { text: '关于项目', link: '/menu/about-project' }
        ],
        sidebar: {
            '/menu/': [
                {
                    text: '目录',
                    items: [
                        { text: '0.前沿', link: '/menu/README' },
                        { text: '1.ECMAScript 6简介', link: '/menu/intro' },
                        { text: '2.let 和 const命令', link: '/menu/let' },
                        { text: '3.变量的解构赋值', link: '/menu/destructuring' },
                        { text: '4.字符串的扩展', link: '/menu/string' },
                        { text: '5.字符串的新增方法', link: '/menu/string-methods' },
                        { text: '6.正则的扩展', link: '/menu/regex' },
                        { text: '7.数值的扩展', link: '/menu/number' },
                        { text: '8.函数的扩展', link: '/menu/function' },
                        { text: '9.数组的扩展', link: '/menu/array' },
                        { text: '10.对象的扩展', link: '/menu/object' },
                        { text: '11.对象的新增方法', link: '/menu/object-methods' },
                        { text: '12.运算符的扩展', link: '/menu/operator' },
                        { text: '13.Symbol', link: '/menu/symbol' },
                        { text: '14.Set 和 Map 数据结构', link: '/menu/set-map' },
                        { text: '15.Proxy', link: '/menu/proxy' },
                        { text: '16.Reflect', link: '/menu/reflect' },
                        { text: '17.Promise 对象', link: '/menu/promise' },
                        { text: '18.Iterator 和 for...of 循环', link: '/menu/iterator' },
                        { text: '19.Generator 函数的语法', link: '/menu/generator' },
                        { text: '20.Generator 函数的异步应用', link: '/menu/generator-async' },
                        { text: '21.async 函数', link: '/menu/async' },
                        { text: '22.Class 的基本语法', link: '/menu/class' },
                        { text: '23.Class 的继承', link: '/menu/class-extends' },
                        { text: '24.Module 的语法', link: '/menu/module' },
                        { text: '25.Module 的加载实现', link: '/menu/module-loader' },
                        { text: '26.编程风格', link: '/menu/style' },
                        { text: '27.读懂规格', link: '/menu/spec' },
                        { text: '28.异步遍历器', link: '/menu/async-iterator' },
                        { text: '29.ArrayBuffer', link: '/menu/arraybuffer' },
                        { text: '30.最新提案', link: '/menu/proposals' },
                        { text: '31.Decorator', link: '/menu/decorator' },
                        { text: '32.参考链接', link: '/menu/reference' }
                    ]
                },
            ]
        },
        socialLinks: [
            { icon: 'github', link: 'https://github.com/ruanyf/es6tutorial' }
        ]
    },
    head: [
        ['link', { rel: 'icon', href: 'https://es6.ruanyifeng.com/favicon.ico' }]
    ]
})

5.编写首页 index.md
首页配置用于对网站进行简要介绍和说明，提供进入其他页面的入口。

---
layout: home
title: ES6 入门教程
description: 为前端项目提供完善的监控手段
hero:
  name: ECMAScript 6入门
  text: 一本高质量、全面深入的 ES6 学习教程
  image:
    src: https://s21.ax1x.com/2024/08/02/pkXqBdK.jpg
    alt: VitePress
  actions:
    - theme: brand
      text: 快速开始
      link: /menu/README
    - theme: alt
      text: 关于项目
      link: /menu/about-project
    - theme: alt
      text: View on GitHub
      link: https://github.com/ruanyf/es6tutorial
features:
  - title: 清晰易懂
    details: 以清晰、简洁的语言阐述ES6的新特性和用法，使得复杂的技术概念变得易于理解。
    icon: 

标签：ES6,menu,vp,一峰,doc,link,VitePress,text	

From： https://blog.csdn.net/m0_37943716/article/details/140872179

相关文章

  • VitePress安装总结
    1、安装node.js2、安装vscode，并在扩展中安装markdown插件3、在vscode的终端中修改淘宝镜像源：1npmconfigsetregistryhttps://registry.npmmirror.com4、在终端中输入1npmadd-Dvitepress5、在D盘创建文件夹，右键用vscode打开，或在vscode中打......
  • es6-promise-polyfill 自己实现promise.js
       https://github.com/lahmatiy/es6-promise-polyfill/blob/master/promise.js  (function(global){////CheckfornativePromiseandithascorrectinterface//varNativePromise=global['Promise'];varnativePromiseSupported=NativePr......
  • ES6 Object.freeze()和Object.seal()
    在JavaScript编程中，管理对象的可变性对于保持代码的稳定性和可预测性至关重要。有两个强大的方法可以帮助控制对象属性的变化，它们分别是Object.freeze()和Object.seal()。这篇文章将深入探讨Object.freeze()和Object.seal()的实际用途，并通过实例来说明它们的功能和使用场景，帮助......
  • es6-splice方法例子
    constarr=['a','b','c','d'];////1.1、删除指定位置的一个元素//arr.splice(1,1);//console.log('arr',arr);//["a","c","d"]////1.2、删除指定位置的两个元素/......
  • es6中对数组的常用操作方法-普通数组
    参考https://www.jianshu.com/p/856f4200d3c0最近，经常操作数组，可是数组中的一些常用操作方法很迷糊，看了上面一篇文章之后，茅塞顿开。于是自己按照上面文章的用法，自己全部从头到尾写了一遍，分为普通的数组以及对象数组的操作。//定义数组constarr=[1,2,3,4,5]......
  • es6中对数组的常用操作方法-对象数组
    //定义对象数组constarrayObject=[{name:'name1',title:'title1'},{name:'name2',title:'title2'},{name:'name3',title:'title3'}];//数组对象......
  • 前端模块化CommonJS、AMD、CMD、ES6
    在前端开发中，模块化是一种重要的代码组织方式，它有助于将复杂的代码拆分成可管理的小块，提高代码的可维护性和可重用性。CommonJS、AMD（异步模块定义）和CMD（通用模块定义）是三种不同的模块规范，它们在定义模块、加载模块以及依赖管理等方面存在差异，并适用于不同的场景。CommonJS、A......
  • 09 ES6的模块化语法
    ECMAScript6（简称ES6）是JavaScript语言的下一代标准，其中引入了许多新特性，包括模块化语法。ES6的模块化语法允许开发者将代码分割成独立的模块，每个模块可以包含变量、函数和其他资源，并且可以在不同的文件中进行导入和导出。导出模块（Export）在ES6中，可以使用export关键字来导出......
  • 08 ES6的for...of和for...in的区别
    在JavaScript中，for...in和for...of是两种不同的循环结构，它们分别在不同的ECMAScript版本中被引入，并且具有不同的用途和特性。for...in循环（ES5）for...in是ECMAScript5（ES5）中引入的，用于遍历对象的可枚举属性和数组的索引。它提供了一种方式来获取对象的键或数组的索引。......
  • 04 ES6中对象的简写
    在ES6中，对象字面量的书写方式进行了一些简化，使得对象的创建更加简洁。以下是ES6中对象简写的几种形式：属性值缩写：当对象的属性名和属性值的变量名相同时，可以省略属性值，只写属性名。//ES5constname='Alice';constage=25;constperson={name:name,a......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99