目录说明

|-- README.md
|-- babel.config.js           
|-- lib                                组件库打包编译后的文件                     
|        
|       
|-- packages                           组件库源文件
|   |-- EtmButton                      EtmButton组件文件夹
|   |   |-- index.js                   EtmButton入口文件导入导出
|   |    `-- src           
|   |        `-- EtmButton.vue         EtmButton组件源码
|   |       
|   `-- index.js                       组件库整体导入导出
|
|
|-- styles                             组件库样式表
|   |-- index.scss                     样式统一入口
|   |-- element.scss
|   |-- global.scss
|   |-- icon.scss
|   |-- layout.scss
|   |-- mixin.scss
|   |-- popover.scss
|   |-- rev-theme.scss
|   |-- rev-var.scss
|   |-- sidebar.scss
|   |-- theme.scss
|   |-- transition.scss
|   `-- variables.scss
|
|-- src                                组件库游乐场
|   |-- App.vue                        游乐场首页
|   |-- main.js                        游乐场入口
|-- package.json    
|-- vue.config.js
`-- yarn.lock

开发说明

内部组件统一以EtmXXX命名

下面以EtmButton组件作为示例

1. 在packages里新建EtmButton文件夹, 用来开发EtmButton组件
2. 在EtmButton文件夹里新建src文件夹,用于存放源码, 在src里建立EtmButton.vue源代码文件, 代码如下:

<template>
  <button v-bind="$attrs" v-on="$listeners">
    <slot>default-text</slot>
  </button>
</template>

<script>
export default {
  name: 'EtmButton', // 重要! 必填 && 唯一
}
</script>

3. 在EtmButton文件夹里新建index.js, 用于导出EtmButton组件, 代码如下:

import EtmButton from './src/EtmButton'

EtmButton.install = function(Vue) {
  Vue.component(EtmButton.name, EtmButton)
}

export default EtmButton

4. 在packages里新建index.js, 用于导出整个组件库, 代码如下:

如果文件已存在只需要在里面添加对应的组件即可!

import EtmButton from './EtmButton'

// 导入你的组件

const components = [
  EtmButton, 
 //...注册你的组件
]

const install = function(Vue) {
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  install, EtmButton,
  //...导出你的组件
}

预览

• 配置packages组件库进行编译(已配置)
• main.js中引入组件库并use(已配置)
• npm run serve启动游乐场(已配置)
• 在App.vue中使用你的组件(已配置示例)

打包

• 使用npm run lib进行组件库编译打包
• 代码提交到仓库 git add . && git commit
• 发布组件
  • 切换npm源为内网服务器 npx cgr use etm
  • 登录到服务器 npm login, 输入用户名/密码/邮箱后进行下一步操作
  • 小版本更新 0.0.x 直接执行npm run pub进行发布
  • 大版本更新 x.x.0 手动更改package.json中的版本号(大版本更新前务必通知组内成员)