使用 CDN 时如何将 Vue 组件存储在 html 之外？

Answer 1

简短的回答：将组件保存在另一个文件中并使用脚本标签导入它，就像使用 Vue 一样。

建议：通常人们会在部署之前捆绑并打包他们的 JavaScript 代码。有不同的工具可以完成这项工作，但 Vite 是一个选择。在这里阅读更多相关信息：https://vitejs.dev/

Answer 2

是的，您可以在例如创建一个js文件。 `components/component1.js'，包含组件的定义。

const component1 = {
        template: `<div> <p>{{ item }}</p></div>`,
        props: ['prop'],
        data: () => ({ item: 'test' }),
    }

将该文件导入到 html 文件中：

<script src="components/component1.js"></script>

并且该组件将在脚本部分中可用。

  <script>
        const app = Vue.createApp({
            data: () => ({ someData: 'prop' }),
        })
        
        app.component('test', component1)
        app.mount('#app')
    </script>