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