vue组件包开发模板
写前端通用 vue 组件和 markdown 写组件文档的工程模板,支持 markdown 的代码块中写 vue 组件并渲染成 demo,通过 yb-cli 快速创建
# 安装依赖
# 修改npm源为私服地址
npm config set registry http://192.168.1.100:8081/repository/npm-all
# 安装依赖
npx yarn
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
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配置文件,用于打包组件
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>
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>);
}
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>
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;
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
2
3
4
5
6
7
8
可以在私服如下地方查看已发布的 npm 包
# 文档编写
文档编译基于 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/
---
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`
);
},
},
],
});
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>
` ` ` (<=删除左边的 ` 的空格) (这里换行) :::
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
渲染后的示例
更多请了解 vuepress (opens new window) 和 vuepress-theme-vdoing (opens new window)