vue组件库的基本开发步骤(源代码)

坚强是说给别人听的谎言 提交于 2021-02-02 00:56:42

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

 

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!