VuePress笔记

hero

1、依赖环境

  • Node.js v14.18.0+open in new window

  • Yarn

  • pnpm

    yarn的安装并查看版本:

    npm install -g yarn
yarn --version

    Yarn 淘宝源安装:

    yarn config set registry https://registry.npm.taobao.org -g 
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

    pnpm的安装：

    npm install pnpm -g

    淘宝源安装:

    //查看源
pnpm config get registry 
//切换淘宝源
pnpm config set registry https://registry.npmmirror.com/

    在Windows PowerShell 执行 yarn和pnpm 命令，报错为：

    运行 Windows PowerShell（管理员）,执行命令,选择 A 或 Y

    set-ExecutionPolicy RemoteSigned

2、手动安装

  1. 创建并进入一个新目录

    cd d:\
mkdir vue文档
cd vue文档

  2. 初始化项目

    yarn init
#或
npm init

  3. 将 VuePress 安装为本地依赖

    yarn add -D vuepress@next
#或
npm install -D vuepress@next

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

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

    package.json（参考）

    {
  "name": "vuepress",
  "version": "1.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@vuepress/plugin-search": "^2.0.0-beta.60",
    "vuepress": "^2.0.0-beta.60"
  },
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

  5. 创建你的第一篇文档

    mkdir docs
echo '# Hello 我的第一篇文档' > docs/README.md

  6. 在本地启动服务器来开发你的文档网站

    yarn docs:dev

3、配置文件

项目结构：

├─ docs
│  ├─ .vuepress
│  │  ├─ components //该目录中的 Vue 组件将会被自动注册为全局组件。
│  │  ├─ config  //配置分割文件夹
│  │  │  └─ head.ts  //分割配置文件
│  │  │  └─ navconf.ts  //分割配置文件
│  │  │  └─ sidebarconf.ts  //分割配置文件
│  │  ├─ public //图片目录文件夹
│  │  ├─ styles //scss样式表文件夹
│  │  │  └─ index.scss  //scss样式表
│  │  └─ config.ts  //配置文件
│  └─ README.md
├─ .gitignore
└─ package.json

VuePress 站点的基本配置文件是 .vuepress/config.js

也可以通过命令行接口的 --config 选项来指定配置文件：

vuepress dev docs --config my-config.js

一个基础的配置文件是这样的：

import { defineUserConfig } from 'vuepress'
import { defaultTheme } from '@vuepress/theme-default'
const headconf =require('./config/head');
const navconf =require('./config/navconf');
const sidebarconf =require('./config/sidebarconf');

export default defineUserConfig({
  lang: 'zh-CN',//中文
  title: 'hwoo',//网站标题
  description: '品人间百味，觅岁月清芬',//网站描述
  head: headconf.head,//网站head
  host: 'localhost',
  port: 89,//端口
  base: '/',//默认路径，二级目录显示'/xx/'
  dest: './www',//打包目录
  pagePatterns:['**/*.md', '!**/*_bf.md', '!.vuepress', '!node_modules'],//过滤规则

//主题配置
  theme: defaultTheme({
    home:'/',//导航栏中 Logo和404 的链接
    logo: '/img/hwoo.png',
    logoDark:'/img/hwoo_f.png',
    notFound: ['该页面被人偷走了','就不告诉你，页面被我吃了'],//404 页面的提示信息。
    backToHome: '快回家吧',//404返回首页文字
    navbar:navconf.navbar,//导航
    sidebar:sidebarconf.sidebar,//侧边栏
    toggleColorMode: '切换暗黑模式',//导航颜色模式切换中文标注
    contributorsText:'到此一游',
    lastUpdatedText:'游荡时间',
    tip:'提示',
    warning:'注意',
    danger:'警告',
    
  }),

})

head.ts举例

module.exports = {
    head: [
        ['link', { rel: 'icon', href: '/img/favicon.ico' }],
        ['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }]
      ],
   
}

navbar

示例1：

export default {
  theme: defaultTheme({
    navbar: [
      // NavbarItem
      {
        text: 'Foo',
        link: '/foo/',
      },
      // NavbarGroup
      {
        text: 'Group',
        children: ['/group/foo.md', '/group/bar.md'],
      },
      // 字符串 - 页面文件路径
      '/bar/README.md',
    ],
  }),
}

示例2：

export default {
  theme: defaultTheme({
    navbar: [
      // 嵌套 Group - 最大深度为 2
      {
        text: 'Group',
        children: [
          {
            text: 'SubGroup',
            children: ['/group/sub/foo.md', '/group/sub/bar.md'],
          },
        ],
      },
      // 控制元素何时被激活
      {
        text: 'Group 2',
        children: [
          {
            text: 'Always active',
            link: '/',
            // 该元素将一直处于激活状态
            activeMatch: '/',
          },
          {
            text: 'Active on /foo/',
            link: '/not-foo/',
            // 该元素在当前路由路径是 /foo/ 开头时激活
            // 支持正则表达式
            activeMatch: '^/foo/',
          },
        ],
      },
    ],
  }),
}

sidebar

export default {
  theme: defaultTheme({
    // 侧边栏对象
    // 不同子路径下的页面会使用不同的侧边栏
    sidebar: {
      '/guide/': [
        {
          text: 'Guide',
          children: ['/guide/README.md', '/guide/getting-started.md'],
        },
      ],
      '/reference/': [
        {
          text: 'Reference',
          children: ['/reference/cli.md', '/reference/config.md'],
        },
      ],
    },
  }),
}

4、Frontmatter 页面

首页

---
home: true
title: HWOO官网主页
heroImage: /img/hwoo.png
heroImageDark: /img/hwoo_f.png
heroText: H-W-O-O  #首页大标题
tagline: 品人间百味，觅岁月清芬 #首页的标语
pageClass: xo #自定义页面样式

actions: #首页按钮
  - text: SLOGAN
    link: slogan.html
    type: primary
  - text: VUE笔记
    link: /vue/
    type: secondary
    
features: #配置首页特性列表。
  - title: 简洁至上
    details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
  - title: Vue 驱动
    details: 享受 Vue 的开发体验，可以在 Markdown 中使用 Vue 组件。
  - title: 高性能
    details: VuePress 会为每个页面预渲染生成静态的 HTML
    
footer: Copyright © hwoo 2004-2022 <a href="https://beian.miit.gov.cn">苏ICP备12028655号-1</a>
footerHtml: ture #页脚作为 HTML 代码处理
---

自定义index.scss样式

//logo触发旋转、居中
  .navbar span a img{transition: transform .5s;}
  .navbar span a img:hover{transform:rotate(360deg);}

  @media (max-width: $MQMobile) {
  .navbar span a{  
      margin-left: 40%;
  } 
  }

//自定义xo页面样式
.theme-container.xo {
  //title
  h1#main-title {
    text-decoration: line-through;
     
}
  //无限旋转
  .hero img{
   animation:myanimation 5s infinite;
  }
  
@keyframes myanimation {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}

}

5、内置组件、容器

内置组件

其他<Badge type="tip" text="提示上" vertical="top" />
其他<Badge type="warning" text="提示中" vertical="middle" />
其他<Badge type="danger" text="提示下" vertical="bottom" />

其他提示上 其他提示中 其他提示下

容器

::: tip 提示
这是一个提示
:::

::: warning
这是一个警告
:::

::: danger
这是一个危险警告
:::

::: details
这是一个 details 标签
:::

提示

这是一个提示tip

注意

这是一个警告warning

警告

这是一个危险警告danger

这是一个 details 标签details

注释

6、搜索

安装插件

npm i -D @vuepress/plugin-search@next

config.js配置

import { searchPlugin } from '@vuepress/plugin-search'

export default {
  //插件
  plugins: [
    searchPlugin({
      //搜索最大数
      maxSuggestions:10,
      // 排除首页
      isSearchable: (page) => page.path !== '/',
      //搜索中英文展示
      locales: {
        '/': {
          placeholder: '我搜',
        },
        '/en/': {
          placeholder: 'Search',
        },
      },

   }),
  ],
}

7、测试、编译

测试

yarn docs:dev

编译打包

yarn docs:build
游荡时间:
到此一游: xoxu, xo, 大荣