我正在使用带有CDN选项的PrimeVue.在教程中，它说"包含要与脚本标记一起使用的组件".但有些组件不需要导入就可以工作，只需将它们注册为组件就足够了，如按钮、消息、输入文本等，但对于其他组件，如DataTable，只能首先进行导入.此外，如果有一个用于CDN选项的教程中所有组件的列表来导入，这将是很有帮助的，它只显示如何导入日历.
HTML页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PrimeVue Demo</title>
<link rel="stylesheet" href="https://unpkg.com/primevue/resources/themes/lara-light-blue/theme.css" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/primevue/core/core.min.js"></script>
</head>
<body>
<div id="app">
<p-datatable :value="items">
<p-column field="id" header="Id"></p-column>
<p-column field="name" header="Name"></p-column>
</p-datatable>
<p-button label="Submit"></p-button>
<p-inputtext type="text" />
<p-message>Message</p-message>
</div>
<script src="app.js"></script>
</body>
</html>
App.js脚本:
const { createApp, ref } = Vue
const App = {
setup() {
const items = ref([{ id: 1, name: 'Item 1'}])
return { items }
},
components: {
"p-button": primevue.button,
"p-inputtext": primevue.inputtext,
"p-message": primevue.message,
"p-column": primevue.column,
"p-datatable": primevue.datatable
}
}
createApp(App).use(primevue.config.default).mount("#app")
其他组件可以工作，但DataTable在控制台上给出警告消息:
[Vue warn]: Component is missing template or render function.
at <PDatatable value= ...
因此，当导入DataTable组件时，问题就解决了:
<script src="https://unpkg.com/primevue/datatable/datatable.min.js"></script>
<script src="https://unpkg.com/primevue/column/column.min.js"></script>
虽然其他部件不需要进口.