实现一个vue组件库发布到npm

初始化一个vue项目，具体过程这里不再过多描述，如果不太清除，可以看下博客上一遍vue-router的实现原理。

src下面创建一个plugins文件夹，index.js文件，这个文件是组件的出口文件。

先来实现两个很简单的组件

toast/index.vue

button/index.vue

两个组件都是很简单的组件。下面我们要把这两个组件导出。

我们要达到这样的效果，如下面的vue的入口文件main.js。只需要引入plugins，然后Vue.use()一下就可以在全局使用toast组件和button组件。所以这两个组件一定是全局注册的，注册的过程就在Vue.use()调用的过程中，所以重点是要实现这个过程。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import plugins from './plugins'

Vue.config.productionTip = false
Vue.mixin({
  mounted() {
    console.log('组件加载完成')
  }
})
Vue.use(plugins)

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

index.js文件中不管是暴露一个对象还是一个函数，都必须有一个静态的方法install

我们先来这么写

import Toast from './toast'
import Button from './button'

const install = (Vue) => {
    console.log(Vue, Toast, Button)
}

export default {
    install
};

看一下打印结果，分别是Vue和两个组件实例。

我们可以在这里调用vue的方法，注册组件。

import Toast from './toast'
import Button from './button'

const install = (Vue) => {
    console.log(Vue, Toast, Button);
    Vue.component(Toast.name, Toast);
    Vue.component(Button.name, Toast);
}

export default {
    install
};

在原来有的helloword.vue组件中使用vue-button组件 

 

可以看到组件已经可以正常展示了。并且可以在任意的地方使用。

但是这里代码还有可以优化的地方。

如果plugins里面组件比较多，就需要写很多引入的代码，然后再一个一个的去注册，这里需要简化一下。

plugins/index.js

const requireComponent = require.context('./', true, /\.vue$/);
console.log(requireComponent.keys())
const install = (Vue) => {
    if(install.installed) return;
    install.installed = true;
    requireComponent.keys().map(path => {
        const config = requireComponent(path);
        console.log(config)
        const componnetName = config.default.name;
        Vue.component(componnetName, config.default || config)
    })
}

export default {
    install
};

 console.log(requireComponent.keys())

console.log(config)

这样去写代码简化了很多，组件可以正常展示。

 现在我们试下tosat组件。

点击toast出现，2秒后自动消失。

接下来对项目打包发布。

调整package.json文件 scripts

"lib": "vue-cli-service build --target lib --name vue-toast --dest lib src/plugins/index.js"

npm run lib

 

package.json文件这几个属性不可缺少

登陆npm。如果没有npm 账号，就去注册一个。

使用的时候

npm i vue-toast-maile

import plugins from 'vue-toast-maile'
import "../node_modules/vue-toast-maile/lib/vue-toast.css"

Vue.use(plugins)

可以在项目中的任意一个组件中使用。