您的支持是我继续创作及维护的动力感谢打赏祝您工作顺利生活美满VuePress 完整学习文档官方文档 https://vuepress.vuejs.org/zh/guide/getting-started.html二、标准目录结构固定规范你的项目文件夹--.vuepress ├──package.json ├── docs # 所有md文档存放根目录 │ ├──README.md # 网站首页配置的内容 │ ├── guide # 分类文档文件夹 │ │ └── 水果.md │ │ └── 蔬菜.md │ │ └── 主食.md │ └──.vuepress # 配置、静态资源目录核心 │ ├── config.js # 站点全局配置最重要文件 │ ├──public# 图片、favicon、图标等静态资源 │ ├── styles # 自定义全局样式 │ └── client.js # 客户端全局JS注入 │ └──.cache # 数据缓存层 加快编译速度只存数据快照 │ └──.temp # 编译产物层 输出实实在在的JS/Vue 源码程序运行真正依靠这份代码 └──.gitignore4. 编写核心配置docs/.vuepress/config.jsimport{defineUserConfig}fromvuepressimport{viteBundler}fromvuepress/bundler-viteimport{defaultTheme}fromvuepress/theme-defaultexportdefaultdefineUserConfig({// 打包工具//bundler: viteBundler(),// 网站基础信息lang:zh-CN,title:前端接口文档,description:VuePress编写项目开发文档,base:/// 部署路径github pages子仓库填写 /仓库名/// 默认主题配置theme:defaultTheme({//网站左上角图标支持网络图片地址 / 本地静态资源。//本地图片写法推荐图片放进 .vuepress/public直接写路径logo:https://vuejs.press/images/hero.png,// 顶部导航栏navbar:[{text:首页,link:/},{text:开发指南,link:/guide/},{text:Github,link:https://github.com}],// 左侧侧边栏文档目录// 侧边栏跟随文档目录自动生成/* sidebar: auto, */sidebar:[{text:登录,// 侧边栏分组标题collapsible:false,// 是否可以折叠link:/guide/登录.md,// 点击分组标题直接跳转对应地址},{text:进阶配置,collapsible:false,children:[{text:导航配置,link:/guide/navbar},{text:侧边栏配置,link:/guide/sidebar},],},],}),})6. 运行启动# 本地调试访问 http://localhost:8080npmrun docs:dev# 打包产物输出在docs/.vuepress/distnpmrun docs:build四、Markdown 增强功能1. Frontmatter 页面元信息写在md文件最顶部---title:页面标题description:页面描述sidebar:false# 关闭当前页面侧边栏prev:false# 隐藏上一页按钮next:/guide/start# 指定下一页链接tags:[Vue,文档]---正文内容...2. MD 中直接使用 Vue 组件# 测试交互MyComponent/button clickcount点击{{count}}/buttonscript setupimport{ref}fromvueconstcountref(0)/script二、 VuePress 部署 GitHub Pages 完整教程两种方案gh-pages 包自动部署 手动推送dist前置说明打包产物目录docs/.vuepress/dist部署1、打包后和 dist 同级建一个文件夹“部署上线”每次打包后的文件把dist中的文件 复制到“部署上线”文件夹中。2、在“部署上线”文件夹中创建 git init 执行命令 提交到 gh-pages。3、每次修改完本地文档执行打包编译重复操作复制到“部署上线”文件夹中执行Git命令提交到gh-pages远程仓库。总结外层编译打包内层提交 git git add.git commit-m提交git push origin gh-pageshttps://jsffzl.github.io/远程仓库名称/ 您的支持是我继续创作及维护的动力感谢打赏祝您工作顺利生活美满VuePress 完整学习文档官方文档 https://vuepress.vuejs.org/zh/guide/getting-started.html二、标准目录结构固定规范你的项目文件夹--.vuepress ├──package.json ├── docs # 所有md文档存放根目录 │ ├──README.md # 网站首页配置的内容 │ ├── guide # 分类文档文件夹 │ │ └── 水果.md │ │ └── 蔬菜.md │ │ └── 主食.md │ └──.vuepress # 配置、静态资源目录核心 │ ├── config.js # 站点全局配置最重要文件 │ ├──public# 图片、favicon、图标等静态资源 │ ├── styles # 自定义全局样式 │ └── client.js # 客户端全局JS注入 │ └──.cache # 数据缓存层 加快编译速度只存数据快照 │ └──.temp # 编译产物层 输出实实在在的JS/Vue 源码程序运行真正依靠这份代码 └──.gitignore4. 编写核心配置docs/.vuepress/config.jsimport{defineUserConfig}fromvuepressimport{viteBundler}fromvuepress/bundler-viteimport{defaultTheme}fromvuepress/theme-defaultexportdefaultdefineUserConfig({// 打包工具//bundler: viteBundler(),// 网站基础信息lang:zh-CN,title:前端接口文档,description:VuePress编写项目开发文档,base:/// 部署路径github pages子仓库填写 /仓库名/// 默认主题配置theme:defaultTheme({//网站左上角图标支持网络图片地址 / 本地静态资源。//本地图片写法推荐图片放进 .vuepress/public直接写路径logo:https://vuejs.press/images/hero.png,// 顶部导航栏navbar:[{text:首页,link:/},{text:开发指南,link:/guide/},{text:Github,link:https://github.com}],// 左侧侧边栏文档目录// 侧边栏跟随文档目录自动生成/* sidebar: auto, */sidebar:[{text:登录,// 侧边栏分组标题collapsible:false,// 是否可以折叠link:/guide/登录.md,// 点击分组标题直接跳转对应地址},{text:进阶配置,collapsible:false,children:[{text:导航配置,link:/guide/navbar},{text:侧边栏配置,link:/guide/sidebar},],},],}),})6. 运行启动# 本地调试访问 http://localhost:8080npmrun docs:dev# 打包产物输出在docs/.vuepress/distnpmrun docs:build四、Markdown 增强功能1. Frontmatter 页面元信息写在md文件最顶部---title:页面标题description:页面描述sidebar:false# 关闭当前页面侧边栏prev:false# 隐藏上一页按钮next:/guide/start# 指定下一页链接tags:[Vue,文档]---正文内容...2. MD 中直接使用 Vue 组件# 测试交互MyComponent/button clickcount点击{{count}}/buttonscript setupimport{ref}fromvueconstcountref(0)/script二、 VuePress 部署 GitHub Pages 完整教程两种方案gh-pages 包自动部署 手动推送dist前置说明打包产物目录docs/.vuepress/dist部署1、打包后和 dist 同级建一个文件夹“部署上线”每次打包后的文件把dist中的文件 复制到“部署上线”文件夹中。2、在“部署上线”文件夹中创建 git init 执行命令 提交到 gh-pages。3、每次修改完本地文档执行打包编译重复操作复制到“部署上线”文件夹中执行Git命令提交到gh-pages远程仓库。总结外层编译打包内层提交 git git add.git commit-m提交git push origin gh-pageshttps://jsffzl.github.io/远程仓库名称/ 
