Basic development steps (source) of the component library VUE

Last published essays forget to provide source code, specifically to complement today, if you have any questions, welcome to modify the correction for me.

 

vue.config.js file:

const path = require('path')

function resolve (dir) {

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

}

 

module.exports = {

    // The entry point to examples

    pages: {

        index: {

            entry: 'examples/main.js',

            template: 'public/index.html',

            filename: 'index.html'

        }

    },

    // for the packages to add directory babel-loader processing

    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

Guess you like

Origin www.cnblogs.com/luoluo-snow/p/11683843.html