be-vui v1.0.3

SPAP-UI

项目安装/初始化

yarn install

组件编写

yarn dev

组件打包

yarn build

文档更新

yarn docs

文件目录

build 配置文件目录

使用 vuepress 手动实现类 ElementUI 组件的应用手册

下面的内容，旨在说明如何完成 vuepress 的配置，不进行安装说明。

注意： 需要先查看 vuepress 的结构目录，添加配置文件，完善基本的结构。 以下内容的配置都是基于默认主题来的，并不适用于所有的主题。

静态文件

静态文件存放在 .vuepress/public 目录中。在该目录下的文件在打包时会自动复制到项目的根节，比如，在 public 目录下有一个 images 文件夹，访问该文件夹就可以在 *.md 文件中用 /images/** 进行访问。

修改首页的配置

---
home: true  # 是否为首页
heroImage: /images/home/spap-logo.jpg # 默认主题的首页大图
heroText: SPAP-UI # 默认主题的首页标题
tagline: 基于 vue2.0 的桌面端组件库 # 默认主题的首页描述
---

导航与侧边栏

不得不说，阅读官方手册首先要通篇全读，不能看一点儿做一点儿，不然还真不好理解其中的含义。通篇全读之后在回来细致查看，注意里面的配置细节，这样才能保证成功。

导航
此处设置的导航，是显示在头部右侧的。需要自行设置导航的名称以及链接，支持外部链接，最终生成 a 标签。如果需要生成下拉菜单，或者给下拉菜单分组，都可以参考手册进行设置，此处手册给出的相对还是比较完善的。导航设置参考手册

注意： 这里的配置必须要放在 themeConfig 中。

// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'Bryan', link: 'https://www.yihdot.com' },
    ]
  }
}

导航的设置相对比较简单，只要注意主题应用，设置了基本上就能成。相对比较麻烦的就是侧边栏的设置。

侧边栏
侧边栏的设置可谓是比较复杂的，值可以是字符串、数组、对象。各个方式都不同。而且还会比较郁闷的是，发现设置了侧边栏之后并没有生效，侧边栏还是不显示，这就是配置不正确的原因造成。

1/ 首先解决设置了侧边栏不显示的问题。

不知道是不是我的问题，侧边栏一直都不显示，晚上又找不到相关的问题。首先说明一下遇到这种问题的情况。栏目下的 md 文件为了省力都是复制的，基本上都是复制的首页，在读取到首页配置的时候就会隐藏掉侧边栏，所以解决侧边栏不限时的问题，就需要将 md 文件里的配置过滤一下。这个时候那么不配置，左侧也会有一片的空白区域。

2/ 关于 'auto'

设置侧边栏的值为 'auto'，根据官方手册的说法是自动生成侧边栏。经个人测试，生成的侧边栏仅仅是当前文章的列表，无法加入其他文章标题和列表。所以说，想要想手册上那样，可以在多个页面之间跳转，还是需要进行手动设置。

3/ 手动配置侧边栏

侧边栏参考手册
刚开始看手册的时候一脸懵逼啊，这是啥跟啥。看的多了才慢慢反应过来。 1. 支持字符串 ‘auto’; 2. 支持数组，指定侧边栏对用的文件，这里需要注意的就是 / 的用法；

• /page_one 表示的找当前目录下的 page_one.md 文件;
• /page_one/ 表示找当前目录下的 page_one/README.md 文件；
• ['/page_one', 'one title'] 表示当前目录下的 page_one.md 文件引入侧边栏，使用自定义主题 one title;

3. 支持对象，支持多语言，多页面，多侧边栏以及侧边栏分组；
4. 生成侧边栏的标题层级；
5. 侧边栏是否展开；

如何在 vuepress 中引入 scss 样式

因官方手册说法模糊，亲测多次，实现在项目中引入组件中的 *.scss 文件。

配置

首先需要在 config.js 中进行设置，使其支持scss。并配置 webpack 别名，方便文件引入。

// .vuepress/config.js
module.exports = {
  // ...
  sass: { indentedSyntax: true }, // 支持 *.scss 样式文件
  // 设置 webpack 别名
  configureWebpack: {
      resolve: {
          alias: {
              "@src": path.resolve("../../src/")
          }
      }
  }
  // ...
}

引入 scss 文件

需要在 .vuepress 文件夹下新建 enhanceApp.js 文件，方便引入扩展或者插件，而外部样式的引入就需要在这个文件中进行。

// .vuepress/enhanceApp.js
// 引入组件样式
import '@src/assets/them/index.scss'

引入组件

上面的配置和文件操作实际就是在为引入组件做准备。 如果之前两部都已经完成，只需要找到组件所在的目录即可完成组件的引入。

+ import SpapUI from '@src/components';
import '@src/assets/them-default/index.scss'
+ export default ({
+   Vue, // VuePress 正在使用的 Vue 构造函数
+   options, // 附加到根实例的一些选项
+   router, // 当前应用的路由实例
+   siteData // 站点元数据
+ }) => {
+   Vue.use(SpapUI); // 加入组件
+ };

vuepress 高级扩展

自定义容器

自定义容器的重点是将 markdown 转换成 html。所以需要安装 markdown 相关插件。