小鹅通技术分享

使用须知

2019-07-09

快速上手 →

目录结构

     |-- docs
         |-- README.md
         |-- .vuepress
         |   |-- config.js  vuePress 配置文件
         |   |-- assets  静态资源
         |   |   |-- css  css样式
         |   |   |-- icon 图标
         |   |   |-- img  图片
         |   |-- components  默认注册组件文件夹
         |   |-- config
         |   |   |-- codeTemplate  代码demo
         |   |-- dist  打包文件
         |   |-- public  
         |   |-- theme  博客主题
         |   |   |-- Layout.vue  博客主题入口
         |   |-- utils
         |-- frontEnd  前端博客页面
         |-- tags

页面常用命令介绍

预览

<!-- more -->命令之前的信息会生成预览，在目录可看到。

页面创建命令

使用命令创建页面基本信息 会自动生成页面模板，包含 时间 tag

---
title: 使用须知
date: '2019/07/09 15:16:02'
tag:  # tag支持字符串 数组
  - 使用须知
  - 帮助
meta:
  -
    name: description
    content: 小鹅通博客
  -
    name: keywords
    content: 小鹅通博客
---

mufengblog post -p <dirName> --page README.md 会在dirName目录下生成README.md,这将有助于排序分类，需安装 mufengblog-shell

demo在线运行

<demo codeName='codeTemplate' mountElId='mount-el'></demo>

demo组件有2个参数 codeName mountElId
codeName 是会去自动加载 docs/.vuepress/config/codeTemplate的js运行文件
mountElId 非必填，同个页面多个dome组件时必填

组件引用

如果你正在使用或演示非 SSR 友好的组件（比如说包含了自定义指令），则可以将它们包装在内置的 <ClientOnly> 组件中。 默认加载docs/.vuepress/components目录下的组件 Markdown 中使用 Vue

Emoji表情引用

输入

:tada: :100:

输出
🎉 💯 表情大全

静态资源引用

![An image](./image.png)

静态资源加载

←