Vue3加Naive UI CDN 示例
通过CDN在HTML中使用Vue 3和Naive UI，无需任何构建步骤
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3加Naive UI CDN 示例</title>
<script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script>
<!-- 引入 Naive UI -->
<script src="https://unpkg.com/naive-ui/dist/index.prod.js"></script>
</head>
<body>
<div id="app" class="container">
<n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme-overrides="themeOverrides" :abstract="true"
:inline-theme-disabled="true">
<n-modal-provider>
<n-loading-bar-provider>
<n-message-provider>
<Hello></Hello>
</n-message-provider>
</n-loading-bar-provider>
</n-modal-provider>
</n-config-provider>
</div>
<script>
const { createApp, ref, onMounted, onUnmounted, defineComponent, h } = Vue;
const { useModal, useMessage, zhCN, dateZhCN } = window.naive;
const app = createApp({
setup() {
return {
themeOverrides: ref({
LoadingBar: {
height: '5px',
},
}),
zhCN,
dateZhCN
};
}
});
// 使用 Naive UI
app.use(window.naive);
const Hello = defineComponent(() => {
const modal = useModal();
const showDialogPreset = () => {
const m = modal.create({
title: "Dialog 预设",
preset: "dialog",
content: () => h('span', 'hello world')
});
};
onMounted(() => {
showDialogPreset();
});
return () => h('span', '子组件')
})
app.component('Hello', Hello);
app.mount('#app');
</script>
</body>
</html>