我正在使用带有 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")
其他组件可以工作，但数据表在控制台上给出警告消息：
[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>
虽然其他组件不需要导入。
如果使用CDN，则必须单独加载组件（参见docs），因此对于datatable和column，需要添加：
<script src="https://unpkg.com/primevue/datatable/datatable.min.js"></script>
<script src="https://unpkg.com/primevue/column/column.min.js"></script>
这是一个片段：
const { createApp, ref } = Vue
const App = {
setup() {
const products = ref([])
return {
products
}
},
components: {
"p-column": primevue.column,
"p-datatable": primevue.datatable
}
}
const app = createApp(App)
.use(primevue.config.default)
.mount("#app")
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/primevue/core/core.min.js"></script>
<script src="https://unpkg.com/primevue/datatable/datatable.min.js"></script>
<script src="https://unpkg.com/primevue/column/column.min.js"></script>
<div id="app">
<p-datatable :value="products">
<p-column field="code" header="Code"></p-column>
<p-column field="name" header="Name"></p-column>
<p-column field="category" header="Category"></p-column>
<p-column field="quantity" header="Quantity"></p-column>
</p-datatable>
</div>
<script src="app.js"></script>有一些组件似乎包含在核心中，因此您不必单独导入它们：