Open xxholly32 opened 4 years ago
一个基于 vue2,vuepress,rollup的 vue 组件快速开发工具 vue-general-components
在日常开发中,我们经常会在项目中写很多组件,有些是通用的有些是非常业务的,而一些优秀的组件会随着项目结项而封印;而不会说提炼成对应的 npm 仓库;社区上有很多优秀的 ui 库比如,element-ui、ant-design-vue等,又无法加入自己的组件到其中,也无法魔改他们的组件。所以 一个简单快速的开发 vue 组件的项目 vue-general-components 就这么诞生了;
封印
它是一键生成组件项目的脚手架,从搭建到发布到 npm 仓库只需要 1 分钟,还不赶快来试试!!
利用脚手架安装
yarn create vgc <project-name># 或 npx create-vgc <project-name> yarn install # 或 npm install yarn dev
vgc 即 vue-general-components
或者直接 fork vgc 项目
生成包含以下功能
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 是根据这个名字来的
yarn create vgc
我引入的是 jest ,以及 vue-test-utils,在 demo 中加入了一个简单的 helloworld test 供参考;
一个优秀的软件,test 必不可少
package.json 配置
package.json
"jest": { "moduleFileExtensions": [ "js", "vue" ], "moduleNameMapper": { "^@/(.*)$": "<rootDir>/src/$1" }, "transform": { "^.+\\.js$": "<rootDir>/node_modules/babel-jest", ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest" }, "snapshotSerializers": [ "<rootDir>/node_modules/jest-serializer-vue" ] }
文档系统引入 vue 官方的 vuepress,用起来也最顺手,主要还是因为 vuepress 支持 md 和其内置的一些周边,代码展示,emoji 等也不用再单独引入,直接有内置;
我加入了自己的一个插件 vuepress-plugin-code-box,支持代码的隐藏可让展现方式多样化。antd 和 elementui 都有类似。
vuepress 默认的 dev 和 build 功能也支持,如果你想发布到 pages 上可以查看 vuepress 部署文档
demo实例地址
引入了 rollup 进行组件打包,喜欢撸 webpack 的也可以用 webpack
会打包出 esm、min、umd 的 js 文件以及一个 css 文件
项目中自带 husky 的 hooks,会自动对提交代码进行校验,建议使用下面提交规范。
# 或 npx git-cz yarn cz:commit
默认选项 :
可以修改提交模版,但建立在有一定 git commit 基础之上
如果您的代码是通过以上命令提交的话,那 changelog 生产就是一个命令行的事;
# npm run release yarn release
它会根据提交记录修改你的版本号和对应的 changelog 文档,让您的组件库提交变得非常简单。
更多内容可以查看 git commit 规范参考
最后只需要 push 到 npm 仓库就好了
npm publish
可以用 npm link 软链接的方式在本地进行开发
已完成 https://github.com/xxholly32/vue-general-components
一个基于 vue2,vuepress,rollup的 vue 组件快速开发工具 vue-general-components
项目背景
在日常开发中,我们经常会在项目中写很多组件,有些是通用的有些是非常业务的,而一些优秀的组件会随着项目结项而
封印
;而不会说提炼成对应的 npm 仓库;社区上有很多优秀的 ui 库比如,element-ui、ant-design-vue等,又无法加入自己的组件到其中,也无法魔改他们的组件。所以 一个简单快速的开发 vue 组件的项目 vue-general-components 就这么诞生了;它是一键生成组件项目的脚手架,从搭建到发布到 npm 仓库只需要 1 分钟,还不赶快来试试!!
项目安装
利用脚手架安装
或者直接 fork vgc 项目
生成包含以下功能
组件开发
新建组件
demo 中自带 hello-world 组件,代码中包含了简单的多语言(你也可以完全不用多语言),基本的 vue 实例,和 scss 样式
组件测试用例
我引入的是 jest ,以及 vue-test-utils,在 demo 中加入了一个简单的 helloworld test 供参考;
package.json
配置组件文档
文档系统引入 vue 官方的 vuepress,用起来也最顺手,主要还是因为 vuepress 支持 md 和其内置的一些周边,代码展示,emoji 等也不用再单独引入,直接有内置;
我加入了自己的一个插件 vuepress-plugin-code-box,支持代码的隐藏可让展现方式多样化。antd 和 elementui 都有类似。
vuepress 默认的 dev 和 build 功能也支持,如果你想发布到 pages 上可以查看 vuepress 部署文档
demo实例地址
组件打包
引入了 rollup 进行组件打包,喜欢撸 webpack 的也可以用 webpack
会打包出 esm、min、umd 的 js 文件以及一个 css 文件
组件代码提交规范
项目中自带 husky 的 hooks,会自动对提交代码进行校验,建议使用下面提交规范。
代码提交
默认选项 :
changelog 生成
如果您的代码是通过以上命令提交的话,那 changelog 生产就是一个命令行的事;
它会根据提交记录修改你的版本号和对应的 changelog 文档,让您的组件库提交变得非常简单。
发布
最后只需要 push 到 npm 仓库就好了