Vue.js作為一種流行的JavaScript框架，有著強大的自定義插件功能。本文將介紹如何編寫一個簡單的Vue自定義插件demo。

首先，我們需要使用Vue.extend()方法生成一個構造器，這個構造器將被用于創建Vue組件。我們將編寫一個名為my-component的組件，代碼如下：

Vue.component('my-component', Vue.extend({
template: '#my-component-template',
props: {
msg: {
type: String,
required: true
}
}
}));

這段代碼定義了一個名為my-component的組件，組件所用的HTML模板為id為my-component-template的模板。props屬性用于定義該組件所需要的數據類型和是否必須，這里定義了一個名為msg的屬性，類型為字符串，必須存在。

接著，我們編寫HTML模板，用于渲染my-component組件。這里我們假設已經有一個id為app的元素作為Vue實例的根元素，代碼如下：

<code id="my-component-template" type="text/x-template">
<div>
<p>{{ msg }}</p>
</div><div id="app">
<my-component msg="Hello, world!"></my-component>
</div>

這里的HTML模板為my-component組件提供了一個包含msg屬性的p標簽。在Vue實例的根元素中，我們使用了my-component標簽，并為msg屬性賦值了"Hello, world!"。

最后，我們需要實例化Vue，并將其綁定到HTML元素上。代碼如下：

Vue.config.productionTip = false;
new Vue({
el: '#app'
});

這里的代碼禁用了Vue在生產環境下產生的一些提示信息，并綁定了Vue實例到id為app的元素上。至此，我們已經編寫好了一個簡單的Vue自定義插件demo。