Vue编写全局插件的例子

能够将页面顶部 navbar.vue 编写成全局插件。

1.编写 src/components/navbar/navbar.vue

navbar.vue:

<template>
  <div class="nav-bar">
    <div class="nav-bar-inner">
      <img src="/images/pnb-logo.jpg"
           style="width: 120px; height: 44px;" /> | 收银台
    </div>
  </div>
</template>

<script>
export default {
  props: {
    bgColor: { default: '#FFFFFF' } // 背景色
  },
  components: {}
}
</script>

<style lang="less" scoped>
.nav-bar {
  height: 64px;
  line-height: 64px;
  background-color: #ffffff;
  & > .nav-bar-inner {
    width: 1000px;
    height: 64px;
    margin: 0 auto;
    text-align: left;
  }
}
</style>
复制代码

2.在src/components/目录中，新建 vue-component.js

在 src/components/ 目录中，新建 vue-component.js 用来install一下。

vue-component.js:

import VNavbar from './navbar/navbar.vue'

export default {
  install (Vue) {
    Vue.component('VNavbar', VNavbar)
  }
}
复制代码

3.在 main.js中注册全局插件

在 main.js 注册全局插件，那么在每一个组件中，都能使用 <VNavbar></VNavbar>

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 使用 ant design vue
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

// 全局插件
import vueComponent from './components/vue-component.js'

// 本身写的公共的样式
import '@/css/common.less'

Vue.config.productionTip = false

// 全局注册 Antd
Vue.use(Antd)

Vue.use(vueComponent)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
复制代码

4.在组件中使用全局插件

在任意组件中均可以使用：

<template>
    <div>
        <VNavbar></VNavbar>
    </div>
</template>
复制代码