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>
複製代碼