yb-cli

vue组件包开发模板

写前端通用 vue 组件和 markdown 写组件文档的工程模板，支持 markdown 的代码块中写 vue 组件并渲染成 demo，通过 yb-cli 快速创建

# 安装依赖

# 修改npm源为私服地址
npm config set registry http://192.168.1.100:8081/repository/npm-all

# 安装依赖
npx yarn

1
2
3
4
5

# 命令

# rollup监听编译src到packages目录
npm run dev

# 直接编译src到packages目录
npm run build

# 启动文档web服务
npm run docs:dev

# 打包文档静态页面
npm run docs:build

# eslint 检测
npm run lint

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 目录结构

├── /.husky/ # husky管理git hooks的目录，默认添加了 pre-commit 和 commit-msg 两个钩子
├── /docs/ # mardown文档目录
│ ├── /.vuepress/ # vuePress运行的相关配置
│ │ └── index.md # 文档首页的内容
├── /packages/  # 组件包打包后的目录
├── /src/  # 组件开发源码目录
│ ├── /components/ # 所有.vue组件
│ ├── /scss/ # 组件的通用样式
│ │ └── vars.scss # 默认 @import "element-ui/packages/theme-chalk/src/common/var.scss";
│ ├── /components/ # 当前项目的通用组件如 ： example.vue
│ ├── /utils/  # 组件的通用工具目录
│ └── index.js # 所有组件的归总
├── .eslintignore # eslint忽略检测的配置
├── .gitgnore # git忽略检测的配置
├── .prettierrc # prettier配置
├── commitlint.config.js # commitlint配置
├── package.json #
├── README.md # 每个git工程要写说明
└── rollup.config.js  # rollup配置文件，用于打包组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 组件开发

在src/components以 vue 单文件开发组件，组件的命名应该统一前缀，style 禁用 scoped，样式用全局方式，样式类名也统一前缀规范，避免全局冲突

# template 方式

<!-- src/components/ye-example-component.vue -->
<template>
    <div class="ye-example-wrapper"></div>
</template>

<script>
    export default {
        // 必须，例子：统一以 "ye-"开头
        name: 'ye-example-component',
    };
</script>

<style lang="scss">
    .ye-example-wrapper {
        position: relative;
    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# jsx 方式

用 jsx 写，可以选择用一个*.render.jsx 来管理组件的 render 函数，因为用<sript lang="jsx">,vscode 的 Vetur 插件并不会对 vue 文件的 jsx 有提示等效果

// src/components/ye-example-component.render.jsx
export default const jsxRender = function(h){
    // h 是必须的
    h=h||this.$createElement;
    return (<div class="ye-example-wrapper"></div>);
}

1
2
3
4
5
6

<!-- src/components/ye-example-component.vue -->
<script>
    import jsxRender from './ye-example-component.render.jsx';
    export default {
        // 必须，例子：统一以 "ye-"开头
        name: 'ye-example-component',
        render: jsxRender,
    };
</script>

<style lang="scss">
    @import '../../scss/vars.scss';
    .ye-example-wrapper {
        position: relative;
        color: $--color-primary;
    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 组件主题

scss 的基础变量来源于 element-ui 的 scss 变量，所以在 "src/scss/vars.scss" 默认 @import "element-ui/packages/theme-chalk/src/common/var.scss";

当前组件包定义的通用变量在 "src/scss/vars.scss" 中需要声明 !default，以便在 web 项目开发中引用组件时作 scss 变量覆盖

// src/scss/vars.scss
@import 'element-ui/packages/theme-chalk/src/common/var.scss';

$--ye-border-color: #f2f2f2 !default;

1
2
3
4

# 打包组件

经过 rollup 打包后(npm run build)，会将样式剥离出单独的.scss 文件，即有 "src/packages/es/components/ye-example-component.js" 和 "src/packages/es/components/ye-example-component.scss"，主要目的按需引用组件，同时按需引用组件的样式

# 发布组件

首先在 package.json 中确认组件包的名称(name)，确认要发布的文件目录(files)，修改版本号(version)，版本号遵循语义化版本号 2.0 规范 (opens new window)

# 假如当前npm源是私服地址，直接登录， 登录的账号由私服管理员分配
npm login

# 也可以直接登录指向私服
npm login --registry http://192.168.1.100:8081/repository/npm-all

# 发布
npm publish

1
2
3
4
5
6
7
8

可以在私服如下地方查看已发布的 npm 包

npm-local

# 文档编写

文档编译基于 vuepress (opens new window) 和 vuepress-theme-vdoing (opens new window)

在 "docs" 目录添加 .md 文件，文件名以数字为前缀，用于文件的排序和侧边导航的排序，内容开头定义如下声明

---
title: web项目开发模板
date: 2021-07-29 16:00:00
permalink: /yb-cli/create-web-template/
---

1
2
3
4
5

permalink 是页面路由 path

在 ".vuepress/config/nav.js" 中配置头部导航

# 组件 demo

首先在 ".vuepress/config.js" 修改如下位置的 "tagStarWith"

// 生成组件库的按需文件
initCreateDemanded({
    sourceDirs: [],
    sourceFiles: glob.sync(path.resolve('docs/**/*.md')),
    outputFilePath: path.resolve('docs/.vuepress/demanded/index.js'),
    libs: [
        {
            // 组件库名称
            libraryName: packjson.name,
            // 以什么开头的规则
            tagStarWith: 'ye-',
            // 对应组件文件的路径，用于递归检索
            getRecursiveSearchFile: (tagname) => {
                return path.resolve(`packages/es/components/${tagname}.js`);
            },
        },
        {
            libraryName: 'element-ui',
            tagStarWith: 'el-',
            addRegExps: [/(?<=\(\s*)[A-Z]\w+(?=\s*,)/g],
            defaultComponentNames: ['Icon'],
            customName: (name) => {
                return name.replace(/^El/g, '');
            },
            getRecursiveSearchFile: (tagname) => {
                return path.resolve(
                    `node_modules/element-ui/lib/${tagname.replace(
                        /^el-/g,
                        ''
                    )}.js`
                );
            },
        },
    ],
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

在.md 文件中编写 demo 代码

::: demo (这里换行) ```html
<template>
    <div class="red-center-text">
        <el-button type="primary">{{name}}</el-button>
        <!-- <ye-example>啦啦啦</ye-example> -->
    </div>
</template>
<script>
    export default {
        data() {
            return {
                name: '以element-ui的按钮为例',
            };
        },
    };
</script>
<style>
    .red-center-text {
        color: #ff7875;
        text-align: center;
    }
</style>
` ` ` (<=删除左边的 ` 的空格) (这里换行) :::

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

渲染后的示例

<template>
    <div class="red-center-text">
        <el-button type="primary">{{name}}</el-button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                name: '以element-ui的按钮为例',
            };
        },
    };
</script>
<style>
    .red-center-text {
        text-align: center;
    }
</style>

复制

上次更新: 2023/02/22, 11:34:36

← web项目开发模板 Layui项目开发模板→