[英]How can I build multiple Vue.js components to Native Web Components using Vue CLI at once?
[英]How Can I use components using CDN in vue.js?
我使用 vue.js 作為 CDN。 我需要有關如何構建應用程序以在 index.html 中顯示組件的示意圖的幫助。 目前,我有以下結構:
<div id="app">
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
}
}).mount('#app')
</script>
組件.js:
<template>
<div>
Test
</div>
</template>
export default {
data: () => ({
}),
}
您可以嘗試定義 Vue 並使用.component
//in other file const component1 = { template: `<div> {{ item }} <p>{{ prop }}</p></div>`, props: ['prop'], data: () => ({ item: 'test' }), } const app = Vue.createApp({ data: () => ({ someData: 'prop' }), }) app.component('test', component1) app.mount('#app')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="app"> <test:prop="someData" /> </div>
component_one.html
<p>component one</p>
component_two.html
<p>component {{two}}</p>
<input type="text" v-model="two"/>
component_three.html
<p>component three</p>
應用程序.html
<router-link to="/">one</router-link> |
<router-link to="/two">two</router-link>
<component_three/>
<router-view />
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.41/vue.global.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.1.6/vue-router.global.js"></script>
<title>test</title>
</head>
<body>
<div id="app"/>
<script type="text/javascript" src="index.js"> </script>
</body>
</html>
索引.js
const one = async () => {
let template = await fetch("component_one.html")
template = await template.text()
return ({
template: template,
setup() {/*...*/ }
})
}
const two = async () => {
let template = await fetch("component_two.html")
template = await template.text()
return ({
template: template,
setup() {
return {
two: Vue.ref("TWO"),
}
}
})
}
const three = async () => {
let template = await fetch("component_three.html")
template = await template.text()
return ({
template: template,
setup() {/*...*/ }
})
}
const app = async () => {
let template = await fetch("app.html")
template = await template.text()
return ({
template: template,
components: {
"component_three" : await three(),
},
setup() {/*...*/ }
})
}
const init = async () => {
const index = Vue.createApp(await app());
const routings = VueRouter.createRouter({
history : VueRouter.createWebHashHistory(),
routes : [
{path:'/', component: await one()},
{path:'/two', component: await two()}
]
})
index.use(routings)
index.mount("#app")
}
init()
html 文件被讀取為字符串。 也許將它們放在后端/數據庫服務器中。 為了更快地加載,請對所有 await 組件使用Promise.all([])
。 工作示例: www.julven.epizy.com/vuetest
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.