vue组件库的基本开发步骤（源代码）

上次发布的随笔忘记提供源代码了，今天特地来补充，如果有什么问题，欢迎大家为我修改指正。

vue.config.js文件：

const path = require('path')

function resolve (dir) {

return path.join(__dirname, '..', dir)

}

module.exports = {

// 将entry指向examples

pages: {

index: {

entry: 'examples/main.js',

template: 'public/index.html',

filename: 'index.html'

}

},

// 为packages目录添加babel-loader处理

chainWebpack: config => {

config.module

.rule('js')

.include

.add(resolve('packages'))

.end()

.use('babel')

.loader('babel-loader')

.tap(options => {

return options

})

}

}

datePicker

<template>

<div>这是一个datePicker组件</div>

</template>

<script>

export default {

  name: 'datePicker'

}

</script>

datePicker/index.js

/* eslint-disable */

import datePicker from './src/datePicker.vue';

datePicker.install = function (Vue) {

Vue.component(datePicker.name, datePicker)

}

export default datePicker

Package/index.js

/* eslint-disable */

import datePicker from './datePicker';

const components = [

datePicker

]

const install = function (Vue) {

if (install.installed) return

components.map(component => Vue.component(component.name, component))

}

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

install(window.Vue)

}

export default {

install,

datePicker

}

examples/main.js

/* eslint-disable */

import Vue from 'vue';

import App from './App.vue';

import datePicker from './../packages/index'

Vue.use(datePicker)

Vue.config.productionTip = false;

new Vue({

render: h => h(App),

}).$mount('#app');

.npmignore文件

examples/

packages/

public/

vue.config.js

postcss.config.js

babel.config.js

*.map