0.1.4 • Published 2 years ago
cyan-ui v0.1.4
cyan-ui
webpack4 打包工具 + vue2.x 框架
- 开发环境本地调试组件
- 按需引入
- 组件 prop 文档 vuese 自动生成对应 md
- 单元测试 mocha + karma + vue-test-utils + karma-coverage
- 代码格式化 prettier + eslint
- git 提交校验 husky6 + lint-staged + commitlint + commitizen + editorconfig
- typescript 文件和 vue 文件的 ts 写法
- 可通过命令行自动添加新组件相关文件和修改 src/index 内容
:beers: 使用
安装地址
yarn add cyan-ui
:running: 本地调试组件库
#本地调试样式和查看足见说明文档
yarn docs:dev
#构建完成后本地调试组件
yarn link
本地调试其他项目使用该项目
#本地使用该组件库的其他项目
yarn link cyan-ui
:heavy_exclamation_mark: 如果项目 link 后,import 报 undefined,就需要设置 webpack.chainWebpack
config.resolve.set('symlinks', false)
:rocket: 使用组件库
全量加载:
import CyanUI from "cyan-ui"
import "cyan-ui/lib/styles/cyan-ui.css"
Vue.use(CyanUI)
按需加载:
安装babel-plugin-component插件
在babel.config.js/babel.config.json/.babelrc 等文件中添加这几行代码,
plugins: [
[
"component",
{
libraryName: "cyan-ui",
libDir: "lib",
styleLibrary: {
name: "styles",
base: false, // no base.css file
path: "[module].css"
}
}
]
]
// main.js
import Vue from "Vue"
import {Button,Notice,SearchItem} from "cyan-ui"
// 普通vue组件引入方法
var arr = [Button,SearchItem]
// 之前项目用vue2+ts写的vue继承组件,返回的是Vue实例的类,无法直接获取name,需要写这个方法判断是继承的类或者是对象,并且由于按需加载的模块babel插件解析的问题,自定义的函数貌似无法直接调用这个引入的接口需要新的变量存储
function registComponent(com, Vue) {
var name = (com.extendOptions && com.extendOptions.name) || com.name
Vue.component(name, com)
}
arr.forEach(v => {
registComponent(v, Vue)
})
----------------
// 动态组件引入方法
Vue.use(Notice)
:hammer: 项目开发相关
yarn docs:dev
然后点击进页面的开发说明页面查看组件开发说明
:factory: 构建组件库
构建组件库 yarn dist