上次发布的随笔忘记提供源代码了,今天特地来补充,如果有什么问题,欢迎大家为我修改指正。
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 |
|
|
|
|
来源:oschina
链接:https://my.oschina.net/u/4291623/blog/3370385