vue-cli-build-components

使用vue-cli打包组件库，发布npm

• umd,common规范打包
• 单个组件单独打包，按需加载

创建项目

vue create vue-cli-build-components

目录调整

参考element的目录结构，按实际情况调整

　将src目录更名为examples，用于测试组件。

将vue-cli默认启动入口设置为examples,修改vue.config.js

配置参考 | Vue CLI (vuejs.org)

module.exports = {
  pages: {
    index: {
      // 
      entry: 'examples/main.js',
    },
  }
}

新建packages目录，存放自定义组件

组件目录可按照如下

• mian.vue，组件代码逻辑

<template>
  <button class="l-button">这是一个按钮</button>
</template>
<script>
export default {
  name: 'LButton'
}
</script>

<style lang="less" scoped>
.l-button {
  padding: 15px;
  background-color: cadetblue;
  color: #fff;
}
</style>

• index.js，用于导出组件

import Button from './src/main'

// 通过 vue.use(Button) 使用组件，按需导入
Button.install = function (Vue) {
  Vue.component(Button.name, Button);
};

export default Button

统一导出

在packages下创建index.js统一导出所有组件

使用 require.context 自动导出所有组件

index.js

const componentsContext = require.context('./', true, /\.js$/)
const components = {}

const formatContext = function () {
  // components.keys() => ['./button/index.js', './card/index.js', './index.js']
  componentsContext.keys().forEach(key => {
    // 为当前目录 不处理
    if (key === './index.js') { return }
    // 获取导入的组件module
    const component = componentsContext(key).default
    const { name } = component
    // components => { LButton: xxx, ... }
    components[name] = component
  })
}

const install = function (Vue) {
  for (const name in components) {
  // 将组件绑定到Vue上
    Vue.component(name, components[name])
  }
}

formatContext()

export default {
  install,
  ...components
}

在examples下测试统一导出

main.js

import Vue from 'vue'
import App from './App.vue'
import MyUI from '../packages'

Vue.use(MyUI)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

App.vue

	<template>
  <div id="app">
    <LHeader />
    <LButton />
    <LCard />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less">
#app {
  margin-top: 60px;
  text-align: center;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

通过yarn serve,启动服务，出现组件，说明导出成功

umd common打包

生成umd和common可直接使用vue-cli的命令进行打包

构建目标 | Vue CLI (vuejs.org)

在package.json中，新建一条scripts

"build:lib": "vue-cli-service build --target lib --name index packages/index.js --dest lib"

• --target: 打包模式
• --name: 打包的js文件名称
• [entry] packages/index.js : 打包的文件入口
• --dest: 打包的文件夹名称

​