使用 CDN 链接的 VueJs 组件，无需 npm

Question

想使用 Laravel Vue 分页

.HTML

<ul>
<li v-for="user in users.data" :key="user.id">{{ user.name }}</li>
</ul>
<pagination :data="users" @pagination-change-page="getUsers"></pagination>

Vue/Js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/laravel-vue-pagination@2.3.1/dist/laravel-vue-pagination.umd.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
users: [],       
},
mounted() {
this.getUsers();
},
methods: {
getThoughts(page = 1) {
axios.get('/api/users?page=' + page)
.then(response => {
this.users = response.data;
});
}
}
});
</script>

问题：使用分页组件时循环工作正常，出现以下错误。

错误

[Vue warn]: Unknown custom element: <pagination> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

试

Vue.component('pagination', require('laravel-vue-pagination'));

给我以下错误

Uncaught ReferenceError: require is not defined

Answer 1

您正在使用 UMD 模块加载组件。通过脚本标记加载 UMD 模块时，该模块将添加到窗口对象中。您可以使用window['module-name'].然后你需要在 Vue 对象中注册组件，就像你正常做的那样。

在您的情况下，您需要添加：

components: {
pagination: window['laravel-vue-pagination']
},

到你的 Vue 组件，所以 umd 模块 laravel-vue-pagination 将被注册并准备在模板中使用。