PublicComponents

基于 Vue.js 的公共组件仓库，使用 webpack 搭建一个 library 脚手架可以参考这个仓库的源码。

npm 安裝 / yarn

npm i rjelement-components --save-dev

yarn add rjelement-components -D

引入方式

全量引入

// main.js
import Vue from 'vue'
import Rjelement from 'rjelement-components'

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

按需引入

首先安装babel-plugin-import

yarn add babel-plugin-import -D

配置babel.config.js / vuecli2.0 创建的项目配置.babelrc

"plugins": [
  ["import", {
    "libraryName": "rjelement-components",
    "libraryDirectory": "packages/components"
  }]
]

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

按需引入示例

<template>
  <rj-drawer title="xxx" :visable="true">
  </rj-drawer>
</template>
<script type="es6">
import { drawer } from 'rjelement-components'
export default {
  components: {
    'rj-drawer': drawer
  },
}
</script>

公共组件编写

参考 组件编写约定