README
vue-general-components
基于 vuepress 文档的 vue 组件快速开发方案
项目背景
在日常开发中,我们经常会在项目中写很多组件,有些是通用的有些是非常业务的,而一些优秀的组件会随着项目结项而封印
;而不会说提炼成对应的 npm 仓库;社区上有很多优秀的 ui 库比如,element-ui、ant-design-vue等,又无法加入自己的组件到其中,也无法魔改他们的组件。所以 一个简单快速的开发 vue 组件的项目 vue-general-components 就这么诞生了;
项目安装
利用脚手架安装
mkdir <project-name>
# 或 npx create-vgc
yarn create vgc
# 或 npm install
yarn install
vgc 即 vue-general-components
或者直接 fork vgc 项目
生成包含以下功能
- hello-world 组件
- 组件 api 文档系统
- 组件测试用例
- 组件打包
- 组件版本日志
组件开发
新建组件
demo 中自带 hello-world 组件,代码中包含了简单的多语言(你也可以完全不用多语言),基本的 vue 实例,和 scss 样式
组件多语言还需要加入 lang 语言包
<template>
<div>
<p class="demo-box">
This is VGC {{ t("hgc.helloworld.hello") }} {{ message }} demo
</p>
</div>
</template>
<script>
import Locale from "../../../src/utils/mixins/locale.js";
export default {
name: "HelloWorld",
mixins: [Locale],
data() {
return {
message: "world",
};
},
};
</script>
<style lang="scss" scoped>
.demo-box {
font-size: 24px;
font-weight: bold;
}
</style>
如果不是
yarn create vgc
命令生成的项目一定要修改对应的 package.json 中的 name,这个很重要,因为最终发布到 npm 是根据这个名字来的
组件测试用例
我引入的是 jest ,以及 vue-test-utils,在 demo 中加入了一个简单的 helloworld test 供参考;
一个优秀的软件,test 必不可少
package.json
配置
"jest": {
"moduleFileExtensions": [
"js",
"vue"
],
"moduleNameMapper": {
"^@/(.*)