这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天

1.核心技术栈

• js:vue3、ts、babel、
• 样式：css、less、postcss
• 构建工具：webpack5、gulp

2.质量保障

• 使用了较为火热的jest作为单元测试

3.规范

代码提交使用了:husky、commitlint、lint-staged 代码风格使用了:eslint、stylelint、prettier 文档使用了vuepress2

vuepress2的使用

文档主要分为首页，导航栏和侧边栏的编写 在vuepress中，页面是通过.md文件编写的，每个.md都会被vuepress编译为vue路由 首页的编写在docs/READ.md文件中编写。

vuepress导航栏和侧边栏的编写

第一步先在docs/.vuepress目录创建config.js文件,配置例如

import { defaultTheme } from "vuepress";
import navbar from "./config/navbar";
import sidebar from "./config/sidebar";
import { defineUserConfig } from "vuepress";
import plugin from "./plugin";
export default defineUserConfig({
    lang: "zh-CN",
    title: "dingzhen-ui",
    description: "dingzheng-ui is a pure component library",
    head: [["link", { rel: "icon", href: "favicon.ico" }]],
    base: "/dingzhen-ui/",
    theme: defaultTheme({
        // 默认主题配置
        navbar,
        sidebar,
    }),
    plugins: [plugin],
});

其中defaultThme里配置项的navbar和sidebar分别代表导航栏和侧边栏

其中导航栏和侧边栏的配置我们可以通过在docs/.vuepress目录下创建一个config文件夹，并且在这个文件夹创建sidebar.ts,navbar.ts sidebar.ts配置如下

export default [
    {
        text: "安装使用",
        link: "/componentDocs/install",
    },
    {
        text: "快速上手",
        children: [
            {
                text: "安装使用",
                link: "/componentDocs/install",
            },
        ],
    },
]

侧边栏可以配置一级栏，也可以配置二级栏，二级栏用children数组表示。导航栏的配置和侧边栏的配置一模一样。

组件通常放在docs/.vuepress/components中，样式文件通常放在thme-chalk中。静态资源一般放在public文件夹中。使用静态资源时，"/代表根目录，根目录为docs/.vuepress/publuc目录"。在编写侧边栏和导航栏的md文档时，通常都是放在componentDocs里，并且里面的"/代表根目录，根目录为docs"，编写导航栏和静态资源要特别注意。

在注册组件时，我们通常通过更改增强组件文件地址来异步注册全局组件,在配置文件中配置好插件后

import { path } from "@vuepress/utils";
export default {
    name: "dz",
    clientConfigFile: path.resolve(__dirname, "../client.js"),
};

创建客户端配置client.js,通过异步并且使用!__VUEPRESS_SSR__来解决不支持SSR的情况(不这样做会报window is not undefined),文件如下

import { defineClientConfig } from "@vuepress/client";
export default defineClientConfig({
    async enhance({ app, router, siteData }) {
        if (!__VUEPRESS_SSR__) {
            let components = await import("./components");
            app.use(components.default);
        }
    },
});