封装自定义插件库

封装自定义插件库

1. 定义一个组件

• 就是一个单文件组件 Loading.vue

2. 注册组件

import Loading from './components/Loading.vue'
export const loading = {
install () {
Vue.component( 'Loading', Loading)
}
}

3. 使用组件

import Loading from './xxx/loading/index.js'
Vue.use(Loading)

步骤：
这是基于cli3，首先用vue create lcj_plugins,然后在cli_plugins里面建components文件夹，里面写各种自定义组件

在index.js

import Vue from 'vue'
import LoadingTpl from './components/Loading.vue'
import BannerTpl from './components/Banner.vue'
import TabTpl from './components/Tab.vue'
import HeadeTpl from './components/Heade.vue'
export const Loading = {
         install (){
   Vue.component('Loading',LoadingTpl)
            }
   }
export const Banner = {
        install (){
      Vue.component('Banner',BannerTpl)
      }
}
export const Tab = {
      install (){
  Vue.component('Tab',TabTpl)
    }
}
export const Heade = {
    install (){
     Vue.component('Heade',HeadeTpl)
     }
}

在App.vue

<template>
       <div id="app">
        <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
        <Loading></Loading>
        <Banner></Banner>
        <!-- <Tab></Tab> 选项卡-->
        <Heade></Heade>
       </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
      export default {
          name: 'app',
          components: {
          HelloWorld
        }
}
</script>
<style lang="stylus">
        #app
         font-family 'Avenir', Helvetica, Arial, sans-serif
          -webkit-font-smoothing antialiased
          -moz-osx-font-smoothing grayscale
          text-align center
          color #2c3e50
          margin-top 60px
</style>

在main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import { Loading, Banner,Tab,Heade} from './lcj_plugins'
Vue.use(Loading)
Vue.use(Banner)
Vue.use(Tab)
Vue.use(Heade)
new Vue({
render: h => h(App),
}).$mount('#app')

运行 npm run serve

最后如果你要上传到你自己npm.js上面的话，npm adduser 登录 npm publish上传