如何在 vue.js 中使用使用 CDN 的组件？

Question

我使用 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: () => ({
    }),
 
   
 }

Answer 1

您可以尝试定义 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>

Answer 2

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

如何在 vue.js 中使用使用 CDN 的组件？

问题描述

2 个解决方案

解决方案1
0 2022-09-07 14:29:21

解决方案2
0 2022-11-03 07:44:17

如何在 vue.js 中使用使用 CDN 的组件？

问题描述

2 个解决方案

解决方案1 0 2022-09-07 14:29:21

解决方案2 0 2022-11-03 07:44:17

解决方案1
0 2022-09-07 14:29:21

解决方案2
0 2022-11-03 07:44:17