VueJS -如何注册自定义元素<v-form>，<v-checkbox>，<v-select>，<v-text-field>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

var app = new Vue({
  el: '#app',
});

Vue.component('v-form', {
  template: '<form>This is a custom form element.</form>',
});

Vue.component('v-checkbox', {
  template: '<input type="checkbox"> This is a custom checkbox element.',
});

Vue.component('v-select', {
  template: '<select><option value="1">Option 1</option><option value="2">Option 2</option></select> This is a custom select element.',
});

Vue.component('v-text-field', {
  template: '<input type="text"> This is a custom text field element.',
});

<div id="app">
  <v-form></v-form>
  <v-checkbox></v-checkbox>
  <v-select></v-select>
  <v-text-field></v-text-field>
</div>