如何在vue.js中使用CDN组件？
如何在vue.js中使用CDN组件？
提问于 2022-09-07 14:23:02
我使用vue.js作为CDN。我需要关于如何构建一个应用程序以在index.html中显示组件的原理图的帮助。目前，我的结构如下：
<div id="app">
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
}
}).mount('#app')
</script>component.js：
<template>
<div>
Test
</div>
</template>
export default {
data: () => ({
}),
}回答 2
Stack Overflow用户
发布于 2022-09-07 14:29:21
您可以尝试定义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>
Stack Overflow用户
发布于 2022-11-03 07:44:17
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>app.html
<router-link to="/">one</router-link> |
<router-link to="/two">two</router-link>
<component_three/>
<router-view />index.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>index.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文件被读取为字符串。也许把它们放在后端/数据库服务器中。为了更快地加载，请使用Promise.all([])对所有等待组件。工作示例：www.julven.epizy.com/vuetest
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73637154
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号