devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

VitePress搭建个人网站手把手教学(从搭建到部署在github服务器上)按照步骤直接cv就可以了_vitepress使用教程

作者：笔触狂放9 | 2024-05-15 19:51:49

赞

踩

vitepress使用教程

前提：安装Node环境后使用npm命令或者安装yarn(yarn全局安装命令：npm i yarn -g)

初始: 先创建一个Blogs文件夹 然后用vscode打开

 

第二步 安装VitePress包 第三步 添加脚本 可以启动项目和打包

 

  1. //直接复制
  2.  
  3.  
  4. "scripts": {
  5.     "docs:dev": "vitepress dev docs",
  6.     "docs:build": "vitepress build docs",
  7.     "docs:serve": "vitepress serve docs"
  8.   },

第四步 在根目录创建docs文件夹，docs文件夹里面放 index.md文件和 .vitepress文件夹，.vitePress文件夹里面放config.js文件

 

  1. module.exports = {
  2.     title: '标题',
  3.     description: 'Just playing around.'
  4. }

第五步 再docs文件夹里的index.md里配置这些代码然后启动项目就可以看到效果了(内容要写在index.md文件里)

  1. ---
  2. layout: home
  3.  
  4. hero:
  5.   name: 名称
  6.   text: 文本
  7.   tagline: 标语
  8.   actions:
  9.     - theme: brand
  10.       text: 开始
  11.       link: /guide/what-is-vitepress
  12.     - theme: alt
  13.       text: View on GitHub
  14.       link: https://github.com/vuejs/vitepress
  15.  
  16. features:
  17.   - icon: ⚡️
  18.     title: Vite, The DX that can't be beat
  19.     details: Lorem ipsum...
  20.   - icon: 
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/574711
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。