vue进阶04-vue文档生成工具vuepress2

介绍

VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容(如文档、博客等),然后 VuePress 会帮助你生成一个静态网站来展示它们。

VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求,但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站

它是如何工作的?

一个 VuePress 站点本质上是一个由 Vue 和 Vue Router 驱动的单页面应用 (SPA)。

路由会根据你的 Markdown 文件的相对路径来自动生成。每个 Markdown 文件都通过 markdown-it 编译为 HTML ,然后将其作为 Vue 组件的模板。因此,你可以在 Markdown 文件中直接使用 Vue 语法,便于你嵌入一些动态内容。

在开发过程中,我们启动一个常规的开发服务器 (dev-server) ,并将 VuePress 站点作为一个常规的 SPA。如果你以前使用过 Vue 的话,你在使用时会感受到非常熟悉的开发体验。

在构建过程中,我们会为 VuePress 站点创建一个服务端渲染 (SSR) 的版本,然后通过虚拟访问每一条路径来渲染对应的 HTML 。这种做法的灵感来源于 Nuxt 的 nuxt generate 命令,以及其他的一些项目,比如 Gatsby。

为什么不是 …?

Nuxt

Nuxt 是一套出色的 Vue SSR 框架, VuePress 能做的事情,Nuxt 实际上也同样能够胜任。但 Nuxt 是为构建应用程序而生的,而 VuePress 则更为轻量化并且专注在以内容为中心的静态网站上。

VitePress

VitePress 是 VuePress 的孪生兄弟,它同样由 Vue.js 团队创建和维护。 VitePress 甚至比 VuePress 要更轻更快,但它在灵活性和可配置性上作出了一些让步,比如它不支持插件系统。当然,如果你没有进阶的定制化需求, VitePress 已经足够支持你将你的内容部署到线上。

这个比喻可能不是很恰当,但是你可以把 VuePress 和 VitePress 的关系看作 Laravel 和 Lumen 。

Docsify / Docute

这两个项目同样都是基于 Vue,然而它们都是完全的运行时驱动,因此对 SEO 不够友好。如果你并不关注 SEO,同时也不想安装大量依赖,它们仍然是非常好的选择!

Hexo

Hexo 一直驱动着 Vue 2.x 的文档。Hexo 最大的问题在于他的主题系统太过于静态以及过度地依赖纯字符串,而我们十分希望能够好好地利用 Vue 来处理我们的布局和交互。同时,Hexo 在配置 Markdown 渲染方面的灵活性也不是最佳的。

GitBook

过去我们的子项目文档一直都在使用 GitBook 。 GitBook 最大的问题在于当文件很多时,每次编辑后的重新加载时间长得令人无法忍受。它的默认主题导航结构也比较有限制性,并且,主题系统也不是 Vue 驱动的。GitBook 背后的团队如今也更专注于将其打造为一个商业产品而不是开源工具。

快速上手

环境要求

Node.js v14.18.0+
Yarn v1 classic (尽量用yarn安装依赖,npm尝试n多次各种兼容问题)

hellworld

步骤1: 创建并进入一个新目录

mkdir vuepress-starter
cd vuepress-starter

步骤2: 初始化项目

yarn init

步骤3: 将 VuePress 安装为本地依赖

yarn add -D vuepress@next

步骤4: 在 package.json 中添加一些 scripts

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

安装本地vuepress后可使用命令行运行

.\node_modules\.bin\vuepress dev docs
# 分析vuepress.cmd后发现执行的js文件是
node .\node_modules\vuepress\bin\vuepress.js dev docs
# vuepress1.x md文件过多,存内存溢出的增加内存执行方式
node --max_old_space_size=7096 ./node_modules/vuepress/cli.js build
# vuepress2.x md文件过多,内存溢出的增加内存执行方式 vuepress.1.x
node --max_old_space_size=7096 ./node_modules/vuepress\bin\vuepress.js build

步骤5: 将默认的临时目录和缓存目录添加到 .gitignore 文件中

echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore

步骤6: 创建你的第一篇文档

mkdir docs
echo '# Hello VuePress' > docs/README.md

步骤7: 在本地启动服务器来开发你的文档网站

yarn docs:dev

VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时,浏览器中的内容也会自动更新。

增强指南

config.js 配置

通用配置

以下是一份大而全的配置,包括国际化,导航栏,侧边栏,插件

import { defineUserConfig } from 'vuepress'
import { defaultTheme } from '@vuepress/theme-default'
import { searchPlugin } from '@vuepress/plugin-search'
//自定义插件
import sideBarPlugin  from './plugins/sidebar'
export default {
    base: '/jiedoc/',
    cmd: 'node ./node_modules/vuepress/bin/vuepress.js build',
    plugins:[
        sideBarPlugin, //自定义的插件
        searchPlugin({
            // 搜索插件
          }),
        'vuepress-plugin-mermaidjs',  //支持各种图形(流程图)等的插件
        '@maginapp/vuepress-plugin-flowchart', //支持各种图形(mermaid流程图)等的插件
        {
            openMarker:'```mermaid',
            closeMarker:'```',
            scondMarker:'flowchat',
            ignoreSecondLine:false
        }
    ],
    markdown:{
        anchor:{ permalink:false },
        toc:{ includeLevel:[1, 2] },
        extendMarkdown:md => {
            md.use(require('markdown-it-katex'))
                .use(require('markdown-it-footnote'))
                .use(require('markdown-it-ins'))
                .use(require('markdown-it-mark'))
                .use(require('markdown-it-sub'))
                .use(require('markdown-it-sup'))
                .use(require('markdown-it-abbr'))
        },
        lineNumbers: true, // 显示代码行号
    },
    head: [
        //引用一些静态的资源
        ['link', { rel: 'shortcut icon', type: "image/x-icon", href: "/assets/img/favicon.ico" }],
        ['link', { rel: 'apple-touch-icon', type: "image/x-icon", href: "/assets/img/apple-touch-icon.png" }],
        ['link', { rel: 'icon', type: "image/png", sizes: "32x32", href: "/assets/img/favicon-32x32.png" }],
        ['link', { rel: 'icon', type: "image/png", sizes: "16x16", href: "/assets/img/favicon-16x16.png" }],
        ['link', { rel: 'manifest', href: "/assets/img/site.webmanifest" }],
        ['script', { src: '/assets/js/jquery/3.3.1/jquery.slim.min.js' }],
        ['script', { src: '/assets/js/fancybox/3.5.2/jquery.fancybox.min.js' }],
        ['link', { rel: 'stylesheet', type: 'text/css', href: '/assets/css/fancybox/3.5.2/jquery.fancybox.min.css' }]
    ],
    theme:defaultTheme({
        locales: {
            '/':
            {
                selectText: '选择语言',
                selectLanguageName: '简体中文',
                logo: '/assets/img/logo.png',
                lastUpdated: '上次更新',
                smoothScroll: true,
                navbar: 
              [
                   { text: 使用指引', 
                    ariaLabel: 'Apos micro-mall operation guidelines',
                    children:
                        [
                          { text: '基本功能流程指引', link: '/zh-cn/ttttttt.html'},
                          { text: '商城', link: '/zh-cn/t.html'},
                            ]
                         },
                   { text: '业务系统使用指引', 
                    ariaLabel: 'Apos cashier operation guidelines',
                    children:
                        [
                          { text:'商品管理',link: '/zh-cn/gg.html'},
                          { text: '库存管理', link: '/zh-cn/gg1.html'}
                            ]
                         }
                    ],
                sidebar: 'auto'
            },
            '/en-us/':
            {
                selectText: 'Languages',
                selectLanguageName: 'English',
                logo: '/assets/img/logo.png',
                lastUpdated: 'Last Updated',
                smoothScroll: true,
                navbar:
                    [
                        { text: 'Doc Guide', link: '/en-us/product/guide/' }
                    ],
                sidebar: 'auto'
            },
        }
    }),
    locales:  //注意一定要在最外层定义了locales才会显示出选择语言
    {
        '/':
        {
            lang: 'zh-CN',
            title: '测试帮助中心',
            description: ''
        },
        '/en-us/':
        {
            lang: 'en-US',
            title: 'Helper Center',
            description: ' '
        },
    }
}

sidebar

全局sidebar

在config.js中配置sidebar:auto将自动将markdown的2级和3级标题显示在sidebar上,如果需要自定义sidebar可配置为(config.js):

sidebar:[
						{
							text:'新手入门',
							sidebarDepth:1, 
							collapsible:true,
							children:[
								{text:'新手入门指导', link:'/hello/first.md'},
							]
						},
						{
							text:'店铺认证',
							sidebarDepth:1, 
							collapsible:true,
							children:[
								{text:'主题认证教程', link:'/auth/body'},
								{text:'品牌认证教程', link:'/auth/pp'},
								{text:'入驻资质教程', link:'/auth/rz'},
								{text:'店铺命名指引', link:'/auth/dp'},
							]
						},
					],

link表示跳转的markdown文件

注意如果跳转到其他的markdown了,其他markdown没有配置页面级别sidebar将引用全局config.js的sidebar。

页面sidebar

也可以在单独的markdown使用yaml配置

---
 sidebar: 
  - text: "Group"
    children: 
    - text: "SubGroup"
      children: 
        - text: "hello1"
          link: "/group/a/"
        - text: "hello2"
          link: "/group/b/"
  - text: "Group 2"
    children: 
    - text: "gg1"
      link: "/group/a/"
    - text: "gg2"
      link: "/hello/second/"
---
# ttt
## aaa


## bbb

当浏览器访问该页面时自动引用当前页面的sidebar,同时也可以指定sidebarDepth来当前页面sidebar激活的标题显示深度,0表示不显示markdown文件的标题,1表示显示2级标题,2表示显示3级标题,1级标题永远不显示。

navbar

集成ui框架elementplus

vuepress2使用vue3.0开发,这里选择集成elementplus使用他的一些菜单和按钮组件。
vue3.0建议使用组合式编程提高复用性。
效果演示:
在这里插入图片描述
引入elemetplus

npm install element-plus --save

在.vuepress/client.js中,use,关注enhance即可


import { defineClientConfig } from '@vuepress/client'
import Layout from './layouts/Layout.vue'
import * as Icons from '@element-plus/icons-vue'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'

export default defineClientConfig({
  enhance({ app, router, siteData }){
    app.use(ElementPlus)
    // icon
    for (const icon in Icons) {
      // eslint-disable-next-line import/namespace
      app.component('ElIcon' + icon, Icons[icon])
    }
  },
  setup(){
    
  },
  layouts: {
    Layout
  }
})

新增一个配置导航栏菜单的json文件,新增.vuepress/navbar.json

{
   "tabList":[
    {
        "title":"首页",
        "href":"/"
    },
    {
        "title":"帮助中心",
        "href":"/zh-cn/Open-API/APOS开放平台1210统一对接方案.html",
        "children":[{
                "title":"发货流程",
                "href":"/zh-cn/Help-Document/Apos_cashier/commodity/Commodity_delivery_warehouse.html"
            },
            {
                "title":"商城分销",
                "href":"/zh-cn/Help-Document/Micro_mall/商城分销业务/"
            }
        ]
    },
    {
        "title":"常见问题",
        "href":"/zh-cn/Help-Document/Micro_mall/商城分销业务/independent-distribution.html"
    },
    {
        "title":"技术帮助中心",
        "href":"/zh-cn/Help-Document/Micro_mall/商城分销业务/直接分销.html"
    }
   ]
}

薪资TopHeader.vue替换navbar

<template>
  <div class="navbar">
    <div class="topHeader">
      <img class="jie_logo" src="/assets/img/newlog.png" />
      <el-menu
        :default-active="activeIndex+''"
        class="jie_tab"
        mode="horizontal"
        @select="handleSelect"
      >
       <template v-for="(item,index) in tabList" :key="index">
        <el-menu-item v-if="!item.children || item.children.length==0" :index="''+index">{{item.title}}</el-menu-item>
        <template v-if="item.children && item.children.length>0">
          <el-sub-menu :index="''+index">
            <template #title>{{item.title}}</template>
            <el-menu-item v-for="(citem,index1) in item.children" :key="index+''+index1" :index="index+'-'+index1">{{citem.title}}</el-menu-item>
          </el-sub-menu>
        </template>
       </template>
      </el-menu>

      <div class="jie_empty"></div>
      <div class="jie_searchBox">
        <SearchBox />
      </div>
      <div class="jie_rightButton">
        <el-button class="jie_button"  type="primary" @click="testUse('https://apos.jieztech.com/#/login')">登录</el-button>
        <el-button class="jie_button" type="primary" @click="testUse('https://apos.jieztech.com/umsf/index.html#/sign-up?step=1')">免费试用</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { usePageData, useSiteData } from "@vuepress/client";
import { ref,onMounted,computed  } from 'vue'
import navbar from "../navbar.json";
//创建一个vue变量activeIndex值为0
const activeIndex = ref('0')
const tabList = ref()
tabList.value=navbar.tabList
const siteData = useSiteData();
let contextPath = siteData._rawValue.base;
function matchPage(url) {
      return getPath() == encodeURI(url);
    }
function  testUse(url) {
    window.open(url);
  }
function getPath() {
    //"/jiedoc/zh-cn/Help-Document/Micro_mall/%E5%95%86%E5%9F%8E%E5%88%86%E9%94%80%E4%B8%9A%E5%8A%A1/%E7%9B%B4%E6%8E%A5%E5%88%86%E9%94%80.html"
    let pathname = window.location.pathname.substring(1);
    let pathNameIndex = pathname.indexOf("/");
    return pathname.substring(pathNameIndex);
}
// 定义点击事件 myFn
function handleSelect(index,path,argu){
  let firstIndex=index;
  let secondIndex=-1;
  if(index.indexOf("-")>=0){
    firstIndex=index.split("-")[0];
    secondIndex=index.split("-")[1];
  }
  let curTab = tabList.value[parseInt(firstIndex)];
  if(secondIndex>=0){
    curTab=curTab.children[parseInt(secondIndex)];
  }
  let goHref = curTab.href.startsWith("/")
      ? curTab.href.substring(1)
      : curTab.href;
  window.location = contextPath + goHref;
}
onMounted(() => {
    tabList.value.forEach((v,i)=>{
        if(matchPage(v.href)){
          activeIndex.value=i
        }
        if(v.children && v.children.length>0){
          v.children.forEach((v1,i1)=>{
            if(matchPage(v1.href)){
              activeIndex.value=i+"-"+i1
            }
          })
        }
    })
})
let noChildTabList = computed(()=>{
   return tabList.value.filter((v,i)=>{
      if(!v.children || v.children.length==0){
        return v;
      }
   })
  })
let haveChildTabList = computed(()=>{
   return tabList.value.filter((v,i)=>{
      if(v.children && v.children.length>0){
        return v;
      }
   })
  })
</script>
<script>
import "element-plus/theme-chalk/index.css";


</script>
<style>
.search-box input {
  width: 80% !important;
}
:root {
  --c-brand: rgb(133, 162, 213);
}
.el-menu--horizontal{
  border-bottom: solid 0px white;
}
</style>
<style scoped>
.navbar {
  padding: 0px;
}
.theme-container {
  background-color: rgb(242, 242, 242);
}
.topHeader {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  background-color: white;
  align-items: center;
  width: 100vw;
  height: var(--navbar-height);
  border-bottom: 1px solid rgb(238, 238, 238);
}
.jie_logo {
  width: 12vw;
  height: 100%;
}
.jie_tab {
  width: 38vw;
  margin-left: 2vw;
  background: white;
  color: black;
  /*border-bottom: 1px solid rgb(238, 238, 238);*/
}
.jie_empty {
  width: 25vw;
}
.jie_rightButton {
  width: 15vw;
  text-align: right;
  vertical-align: middle;
}
.jie_button {
  vertical-align: middle;
  margin-right: 10px;
  background-color: rgb(53, 111, 212);
  color: white;
}
.search-box {
  text-align: right;
  vertical-align: middle;
  width: 30rem;
}
@media screen and (orientation: portrait) {
  .jie_rightButton {
    display: none;
  }
  .search-box {
    display: none;
  }
  .jie_tab {
    width: 88vw;
  }
}
</style>

config.js设置别名替换

export default {
    alias: {
        '@theme/Navbar.vue': path.resolve(__dirname, './layouts/TopHeader.vue'),
    }
 }

布局继承

需求:
所有的markdown页面拓展底部新增一个好用和不好用的评价按钮
效果:
请添加图片描述
vuepress在markdown布局时提供了一些插槽可以用于新增内容,比如page-content-bottom就是内容底部:https://v2.vuepress.vuejs.org/zh/reference/default-theme/extending.html#%E5%B8%83%E5%B1%80%E6%8F%92%E6%A7%BD
.vuepress下新建目录和文件layouts/Layout.vue

<template>
  <ParentLayout>
    <template #page-content-bottom>

    <div class="dialog_backdrop" v-show="dialogTableVisible">
    </div>
    <div class="dialog-wrap" v-show="dialogTableVisible">
      <div class="dialog" style="min-width: 450px; max-width: 75%; transform-origin: 712.5px 465px 0px;">
        您接的没用的原因是:<br/>
        <textarea style="width:80%;height:100px" v-model="useMsg"></textarea><br/>
        <button @click="submitIssue">提交</button>&nbsp;&nbsp;<button @click="dialogTableVisible=false">关闭</button>
      </div>
    </div>

    <div class="divlast">
      <button @click="usefullFun" class="btn" style="border:1px solid red;color:red">
           <span class="btnicon" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAu9JREFUWAnFV81LG0EU/43JpodqjWigiOClFBSpBwkUvVgwNKYg9ODF/gXtSYu30oIfBU+Kl/Yv0IuHQKAaUMhFUMitBaGligexQhClUqTxY/vezG6yxsyukbX7YDKbfb95v7fvzccbgRuKOTwcwdHRM4IPUeuk1mo16rBvtS3qM2hqyomlpSIrvER4AcxU6iGKxQ8Q4hVM84EXXuqF+E3YBUQik2J5+cBtjNYBc3DwHs7P39Hgt2TsvpsRrU6IP6SbRTj8Uays/K2Gq+qA/OqzszQRP602qOZ3QmzCMF5Wi8Y1B8xk8gkuLr4QeVvNRG4DhNgjmymxtvbNCbvigPXled/JbUZ2wjDizkjU2TqZcxV2f7/cJuCeo0ockst6X3JATji/cu4krXxmDjW5pUamwAr9T/LwdrO9ksTrP68Ow3jEqVAR4HX+v8jZOeZiThIhd7jj4wK9rL7JxOPA2Bhjgbk5IJ9Xz7rfm+J5s4pGY8IcGHhOtrI6e1hcBGIxpS4UgJERLVQqasMnOQW8twclQ+wAHyx64bDzl3PjZy+pDd/JKfhONh972b0j/Q+OAB+rQUmrWoZB0dOCZAe4mAhKfgXtwD47wGWUu0xPqxXQ0OCOY20oBExMAPPzQJ1nhrcYkfG0Wl8PdHUBMzNAS4sebhjA+DjQ2wuqC4HLSz1WaTLeWzEDo1EVgTY6qU9OgHQaWF8HDqjcM02guRno6aEtjfa09nbg9BQYHQV2dvQO2FsxI2gv+ETdaz2aNI2N6kzo63OFYXdXRWp72x0HfKbq6E3tx3F3N5BIAB0d5XQcHkIS53LAxgbovHcndxzHpZLMTCQmKZzv3Uf6pBViSqyuyuO4PE2pdKbaf9MnCr0Z5mAuS0oR4P+BFqXsgKxWQ6EXFIk9/u+r2GV5xU2pnAKLTWSzX7l09jUd6mISr7wTMOU1B/iljEQ43E9OTFHj69XthMeyDbLlvAs4jV2ZA06F/SznRRCXU9sBu7+r6/k/b6kihzk07qQAAAAASUVORK5CYII=)"></span>
           有用
      </button>&nbsp;&nbsp;&nbsp;
      <button @click="noGoodFun" class="btn" style="border:1px solid black;margin-left:50px">
        <span class="btnicon" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA0JJREFUWAnFV01IG1EQnt00bUGIB4mWKKSB0kPRCmpMEaEGlDYGCj3oQe9ii3gI9FRooZJDLzm21yD0JBhpCenN60rMpYVASsEEJakpIkhySMSk3zyyIdrdzQ+uebD7fubnm52Z996sRC22hYWF25lMxntxcfFCkqRHEHNUq1UHi2OeRZfFPGmxWL46nc7dra2tMtOaNakZg9vtvlepVN4BZBkAtmb8TAfvGXi/yLL8IR6P/zGS0TXA5/PdyefzbyEcwNNjpMSAVgQt1N/fH4zFYiUtPk0Dal8dgcATLaEO1hR446WWN/4zwOPxPEaco3DhUAdAuiIIyxF0zicSiZ+NTJcM4C8HU/y6wVVANgKPu9ETskrkmCPZImaBMw7rZgzGUnEt6qC3t/c9xsvq3MR+qFgsVnO53C5jiBDUku435p1me7v2FpGUDzgUIgS8z28QnI3tqWGSzCccEkPX9VNTUxSNRsXD42atVX7GFNiTk5PPsO2+6ylm8IGBAUE+Pj4mv9+vxyrW2+HHsf1c5rPdUKOJRMa2DA4OvgHGfT2cdDpNY2NjhMylYDBIh4eHeqxivR1+hKEoTUxMpLA/HxpqNYkIA37JABdXqkkYhmoZu34SGnKaRIQHqjJeXEx0q+XYA900IHsLcUjCiJlWXIB9S16vl6anp2lkZIT6+vrIarXS6ekppVIpUhSFUHhQoVBoRR1fTkmp2UGkapqdnaX19XVyOIxzlrfr5uYmhcNhwj5XxTV7PogkPg4PDg7+whrdei8QCNDS0pJQAl7a3t4mXCSEG43Oz8/JbrfT6OgoLS4u0vDwsOBjb6ytrWkC8yJy78zlctnFbTg+Pv4Ja6/0uHd2doS7Q6EQRSJcqem3ubk5WllZoZOTE1pdXdVnJPqM6uh1S9exzWYj3F4tx9YItUarX8eiIMlmswXE9i6IT7WES6USlctlLVKnax/39/e/sXD9IOLSGXOlU41tyCk1LCEiQqAKd7UoZSO4RMLW8CNDj1Sjrqtnndhp840VMeuuh0AF2tvb+wFmN+bXGQ6FdV79J9A0gBfZSsRpBsMNPPx71Wlj2Q3WdfXLVYWXckBdbOxrFfPN/5w2GsFjs37P/wFZa428Xb42JwAAAABJRU5ErkJggg==)"/>
        没用</button>
    </div>
    </template>
  </ParentLayout>
</template>
<script>
import ParentLayout from '@vuepress/theme-default/layouts/Layout.vue'
import { usePageData } from '@vuepress/client'

export default {
  name:"layout",
  data(){
    return {
      dialogTableVisible:false,
      usePreKey:"use_",
      useMsg:"",
    }
  },
  components: {
    ParentLayout
  },
  setup() {
    const page = usePageData()
    const frontmatter=page.frontmatter;//这里就可以获取到页面定义的frontmatter
  },
  methods:{
    //如果用后台存储只需要实现重写ifClick和storeKey方法即可
    //判断用户是否点击过
    ifClick(key){
      if(localStorage.getItem(key)!=null){
         alert("您已经赞过了")
         return true;
      }
      return false;
    },
    //用于点击后存储的key
    storeKey(key,msg){  
       localStorage.setItem(key,msg)
    },

    usefullFun(){
      let key=this.usePreKey+window.location.href;
      if(!this.ifClick(key)){
        this.storeKey(key,"")
      }
    },
    noGoodFun(){
      let key=this.usePreKey+window.location.href;
      if(!this.ifClick(key)){
         this.dialogTableVisible = true
      }
    },
    submitIssue(){
      let key=this.usePreKey+window.location.href;
      if(!this.ifClick(key)){
        if(this.useMsg=="" ||this.useMsg.trim()==""){
          alert("请输入您的意见")
          return;
        }
        this.storeKey(key,this.useMsg)
        this.dialogTableVisible = false;
      }
    }
  }
}
</script>
<style scoped>
  .divlast{
    margin-top: 50px;
  }
  .spanbg{
      
  }
  .btnicon{
    display: inline-block;
    width:16px;
    height:16px;
    background-size: 16px 16px;
  }
  .btn{
     vertical-align: middle;
     width:120px;
     height:60px;
     cursor: pointer;
     background-color:white;
     border-radius:15px;
  }
  .dialog_backdrop{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    z-index: 1050;
  }
  .dialog-wrap {
    position: fixed;
    overflow: auto;
    top: 30%;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    text-align: center;
    font-size: 0;
    white-space: nowrap;
}
.dialog {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-align: initial;
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    white-space: normal;
}

</style>

新增.vuepress/client.js

import { defineClientConfig } from '@vuepress/client'
import Layout from './layouts/Layout.vue'
export default defineClientConfig({
  enhance({ app, router, siteData }){
    
  },
  setup(){
    
  },
  layouts: {
    Layout
  }
})

ssr渲染

布局页面使用ssr将整个vue在服务器上解析,不能出现常用的浏览器对象(window,navigator等),他会将所有的前端页面markdown调用Layout.vue进行渲染。
需求:在layout.vue中排除掉部分页面,不出现有用和无用的按钮。
methods中添加ifExcept方法

   //引用页面数据
  import { usePageData } from '@vuepress/client'
  //method添加方法
  methods:{
    ifExcept(){
      const page = usePageData()//这里就可以获取到页面定义的frontmatter和页面数据
      const compilePath=page._value.path;//获取渲染的页面路径
      let footExceptVar=footExcept?.except||[];
      return footExceptVar.indexOf(decodeURI(compilePath))<0
    }
    }

在#page-content-bottom中添加v-if即可

    <template v-if="ifExcept()" #page-content-bottom>

插件开发

需求:
需要开发一个插件,该插件可以定义一批页面的侧边栏菜单都是同一个,支持设置页面扫描标题深度.

  1. group1下自定义两个标题,这两个标题自动扫描2级别标题。
  2. group3直接指向一个markdown扫描2-3级别标题
  3. 中文文件名这个兼容中文,能扫描到2级别标题。

注意在页面设置sidebar点击有link的地址是会跳转的,如果浏览器的访问路径和你导航栏的link一致的事情,会自动高亮,才会显示2-3级别标题。

效果如下:
请添加图片描述

vuepress架构

在开发插件前需要了解vuepress整个构建的生命周期
在这里插入图片描述
上图展示了 VuePress 的简要架构:

  • Node App 会生成临时文件,包括页面、路由等。

  • Bundler 会将 Client App 和临时文件一起进行打包,就像处理一个普通的 Vue SPA 一样。
    作为开发者,你必须要意识到 VuePress 分为两个主要部分: Node App 和 Client App ,这一点对于开发插件和主题来说都十分重要。

  • 插件或者主题的入口文件会在 Node App 中被加载。

  • 客户端文件会在 Client App 中被加载,也就是会被 Bundler 处理。比如组件、客户端配置文件等。

核心流程与 Hooks

在这里插入图片描述
上图展示了 VuePress 的核心流程以及 插件 API 的 Hooks :

在 init 阶段:

主题和插件会被加载。这意味着插件需要在初始化之前使用。
由于我们要使用 markdown-it 来解析 Markdown 文件,因此需要在加载页面文件之前创建 markdown-it 实例:

  • extendsMarkdownOptions Hook 会被调用,用以创建 markdown-it 实例。
  • extendsMarkdown Hook 会被调用,用以扩展 markdown-it 实例。
    页面文件会被加载:
  • extendsPageOptions Hook 会被调用,用以创建页面。
  • extendsPage Hook 会被调用,用以扩展页面对象。

在 prepare 阶段:

  • 临时文件会被生成,因此所有和客户端文件相关的 Hooks 会在此处调用。

在 dev / build 阶段:

  • Bundler 会被加载:
  • extendsBundlerOptions Hook 会被调用,用以生成 Bundler 的配置。
  • alias Hook 和 define Hook 会被用在 Bundler 的配置中,所以它们会在此处调用。

具体参见api请参考官网:
https://v2.vuepress.vuejs.org/zh/reference/plugin-api.html
因为我们需要在编译文件之前需要插入sidebar,所以可以在onInitialized注入
在.vuepress下新建plugins目录新建文件sidebar.js

//自定义了一个.vuepress/sidebar.json,用来定义sidebar
import sidebar from "../sidebar.json"
/**
 * 对配置文件中文链接进行转码,否则有匹配问题
 * @param {*} sidebar 
 */
function encodeLink(sidebar){
    for(let sb of sidebar){
        if(sb.link){
            console.log(sb.link+"--->")
            sb.link=encodeURI(sb.link)
            console.log(sb.link)
        }
        if(sb.children && sb.children.length>0){
            encodeLink(sb.children)
        }
    }
}
/**
 * 将sidebar的所有链接加入到matchPage(所有的link页面应用相同的sidebar)
 * @param {} sidebar 
 * @param {*} list 
 */
function getAllLink(sidebar,list){
    for(let sb of sidebar){
        if(sb.link && list.indexOf(sb.link)<0){
            list.push(sb.link)
        }
        if(sb.children && sb.children.length>0){
            getAllLink(sb.children,list)
        }
    }
}
/**
 * 获取某个link对应的某个属性,主要是为了获取某个页面的sidebarDepth
 * @param {*} sidebar 
 * @param {*} link 
 * @param {*} proName 
 * @returns 
 */
function getLinkPro(sidebar,link,proName){
    for(let sb of sidebar){
        if(link==sb.link && sb[proName]!=null){
            return sb[proName]
        }else if(sb.children && sb.children.length>0){
            let s=getLinkPro(sb.children,link,proName)
            if(s!=null){
                return s;
            }
        }
    }
    return null;
}
export default  {
    name: 'vuepress-plugin-usermenu',
    onInitialized(app) {
      for(let menu of sidebar.sidebarList){
            encodeLink(menu.sidebar)
      }
      app.pages.forEach((item) => {
        let itemPath=item.path
        for(let menu of sidebar.sidebarList){
            //将所有sidebar下的link的sidebar都设置为相同。
            if(menu.matchAllSideBarLink){
                menu.matchPage=menu.matchPage||[]
                getAllLink(menu.sidebar,menu.matchPage)
            }
            if(menu.matchPage.indexOf(itemPath)>=0){
                //查询是否有sibar对应link的sidebarDepth,存在应用,不存在获取全局
                let sidebarDepth=getLinkPro(menu.sidebar,itemPath,"sidebarDepth")
                if(sidebarDepth!=null){
                    item.frontmatter.sidebarDepth=sidebarDepth;
                }else if(menu.sidebarDepth!=null){
                    item.frontmatter.sidebarDepth=menu.sidebarDepth;
                }
                item.frontmatter.sidebar=menu.sidebar;
            }
        }
      });
    }
  }

.vuepress/sidebar.json内容:

{
    "sidebarList":[{
        "matchPage":["/zh-cn/t.html"],
        "matchAllSideBarLink":true,
        "sidebarDepth":1,
        "sidebar":[
            {
                "text": "Group 1",
                "collapsible": true,
                "children": [
                {
                    "text": "Active on /foo/",
                    "link": "/zh-cn/sidebar/tt.html"
                },
                {
                    "text": "Always active",
                    "link": "/zh-cn/sidebar/tt1.html"
                }
              ]
            },
            {
                "text": "Group 2",
                "collapsible": true,
                "children": [
                {
                    "text": "Active on /foo/",
                    "link": "/zh-cn/sidebar/tt2.html",
                    "sidebarDepth":1
                }
              ]
            },
            {
                "text": "Group 3",
                "collapsible": true,
                "link": "/zh-cn/sidebar/tt3.html",
                "sidebarDepth":2
            },
            {
                "text": "中文文件名",
                "collapsible": true,
                "link": "/zh-cn/sidebar/中文测试.html",
                "sidebarDepth":1
            }
          ]
    }]
}

config.js中引用插件

import sideBarPlugin  from './plugins/sidebar'
export default {
    base: '/jiedoc/',
    cmd: 'node ./node_modules/vuepress/bin/vuepress.js build',
    plugins:[
        sideBarPlugin
    ],
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 使用VSCode写Vue的好处如下: 1. 内置支持:VSCode默认支持Vue开发,可以识别.vue文件和其内部的模板语法、样式和JavaScript代码。 2. 插件扩展:VSCode拥有丰富的插件生态系统,可以通过插件扩展Vue的开发体验,例如Vetur插件提供了更好的语法高亮、代码补全、错误检查和格式化等功能。 3. 调试工具:VSCode内置了强大的调试工具,可以在调试Vue应用程序时提供良好的支持。 4. 代码片段:VSCode支持代码片段功能,可以通过自定义代码片段来提高开发效率。 5. Git集成:VSCode与Git的集成非常好,可以轻松管理代码库、提交代码和查看变更历史记录。 综上所述,使用VSCode开发Vue应用程序可以提高开发效率和代码质量,同时也提供了丰富的工具和插件来优化开发体验。 ### 回答2: 用VSCode写Vue有以下几个好处: 1. 强大的代码编辑功能:VSCode是一款功能强大的代码编辑器,它提供了丰富的代码编辑功能,包括智能代码补全、语法高亮、代码片段、多光标编辑等,有助于提高编码效率和准确性。 2. 丰富的插件生态系统:VSCode拥有庞大的插件生态系统,为Vue开发提供了众多插件和扩展,如Vue 2 Snippets、Vetur、Vue Peek等,这些插件提供了许多有用的功能,如语法检查、模板预览、组件导航等,能够让Vue开发更加便捷和高效。 3. 集成的终端和调试工具:VSCode内置了终端和调试工具,可以在开发过程中方便地执行命令和调试代码。对于Vue项目来说,可以直接在VSCode的终端中运行npm命令或Vue-CLI命令,无需切换到外部终端。同时,VSCode提供了强大的调试功能,可以方便地对Vue应用进行调试,提高调试效率。 4. Git集成和版本控制:VSCode内置了Git工具,可以直接在编辑器中进行版本控制操作,如提交代码、查看修改、合并分支等。对于Vue项目来说,这个功能十分便利,能够更好地管理和追踪代码的改动。 5. 自定义配置和主题:VSCode提供了丰富的配置选项和主题,可以根据个人喜好进行自定义配置,如设置缩进、代码样式、主题色彩等。这对于提升开发效率和舒适度都有很大帮助。 综上所述,用VSCode写Vue能够提供强大的代码编辑功能、丰富的插件和扩展、便捷的终端和调试工具、便利的Git集成和版本控制,同时还可以进行个性化的配置和主题选择,这些优势能够提高Vue开发的效率和质量。 ### 回答3: 使用VSCode写Vue有以下几个好处: 1. 代码智能提示和自动补全:VSCode内置了针对Vue的智能提示功能,能够根据Vue组件的数据、props、方法等信息给出提示,在编码过程中能够减少错误和提高效率。 2. 丰富的插件生态系统:VSCode有大量的Vue相关插件可供选择,比如Vue VSCode Snippets、Vetur、Vue Peek等,这些插件可以进一步增强开发体验,提供更多的功能和快捷操作。 3. 强大的调试功能:VSCode对调试的支持非常强大,可以通过插件如Vue Devtools和Debugger for Chrome等来进行Vue代码的调试。 4. 代码格式化和代码片段:VSCode可以通过插件进行代码格式化,保持代码的一致性和良好的可读性。同时,开发者还可以根据自己的需求创建代码片段,提高编码效率。 5. 版本控制和团队协作:VSCode与常用的版本控制工具(如Git)无缝集成,可以直接通过界面进行版本管理,并且能够与团队成员方便地共享和协同开发。 总之,使用VSCode写Vue有助于提升开发效率、改善开发体验,并且能够更好地与其他工具集成,满足团队协作的需求。它的智能提示、插件、调试功能都为Vue开发者提供了便利和更多可能性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值