cmdc-public-components v0.2.0

PublicComponents

基于 Vue.js 的公共组件仓库

npm 安裝 / yarn

npm i cmdc-public-components --save-dev

yarn add cmdc-public-components -D

引入方式

Script 标签

将打包后的文件放到自己的 CDN 上面，然后引入

<script src="https://你的CDN地址/cmdc.min.js"></script>
<script>
  console.log(window.cmdc)  // 打印你导出的对象
</script>

全量引入

// main.js
import Vue from 'vue'
import cmdc from 'cmdc-public-components'

Vue.use(cmdc) // 会执行cmdc的install方法，内部全部组件全局注册

按需引入

首先安装babel-plugin-import

yarn add babel-plugin-import -D

配置.babelrc

"plugins": [
  ["import", {
    "libraryName": "cmdc-public-components",
    "libraryDirectory": "lib/components"
  }]
]

使用webpack-bundle-analyzer可以查看模块按需引入的打包依赖图。

引入公共组件示例

<template>
  <public-menu :data="xxx">
  </public-menu>
</template>

import { Transfer } from 'cmdc-public-components'

export default {
  components: {
    Transfer,
  },
}

约定

新建文件夹 新建一个文件夹，文件夹命名存在多个单词的话用-分隔开

index.js 和 组件文件 在index.js中引入组件文件并暴露给外界使用。 组件以大写字母开头

公共组件文件编写约定 跟往常的vue文件编写方法一样，需要指定props数据的格式，组件的数据由调用它的父组件提供，不在组件内调用获取数据的方法