在日常開發(fā)中，我們常常會需要通過vue引用公共模板，來避免重復(fù)編寫代碼并提高開發(fā)效率。下面將詳細(xì)講解vue引用公共模板的方法。

首先，需要在項(xiàng)目中創(chuàng)建一個公共模板組件，這個組件中包含了一些公共的模板內(nèi)容，比如header、footer等。在創(chuàng)建組件時需要在template標(biāo)簽中編寫HTML代碼，同時還需要在script標(biāo)簽中進(jìn)行vue組件的注冊。

const CommTemplate = {
template: `
公共頭部
`
}
Vue.component('comm-template', CommTemplate)

在上面的代碼中，我們創(chuàng)建了一個comm-template組件，其中包含了一個公共頭部和底部，還包含了一個slot，用來承載具體頁面的內(nèi)容。通過這樣的方式，我們可以很方便地在不同的頁面中引用這個公共模板。

接下來，我們需要在具體頁面中引用這個公共模板。在這里，我們可以使用Vue中的slot，來將具體頁面的內(nèi)容插入到comm-template的slot中。

在上面的代碼中，我們先在template標(biāo)簽中引用了comm-template組件，然后在comm-template組件中插入了一個div，用來承載具體頁面的內(nèi)容。由于我們在comm-template組件中使用了slot，所以這個div中的內(nèi)容會被自動插入到comm-template組件的slot中。

最后，我們需要在入口文件中進(jìn)行組件的注冊，這樣我們才能在具體頁面中引用comm-template組件。

import Vue from 'vue'
import App from './App.vue'
import './assets/css/reset.css'
import './assets/css/common.css'
import './components/CommTemplate.vue'
new Vue({
render: h =>h(App),
}).$mount('#app')

在上面的代碼中，我們先引入了comm-template組件，然后通過Vue.component將這個組件進(jìn)行注冊。這樣我們在具體頁面中就可以使用comm-template組件了。

總之，通過以上的步驟，我們就可以很方便地在vue中引用公共模板了。這樣不僅可以提高我們的開發(fā)效率，還能讓我們的代碼更加簡潔易懂。