将vue 3添加到现有的web表单ASPX页面

Question

在vue 2中，为了将vue合并到现有的web表单ASPX页面中，您只需要添加适当的脚本标记。类似这样的东西：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

你能用Vue 3做到这一点吗？我一直在研究如何将vue3整合到现有的web表单应用程序中，比如ASPX页面，但在上面找不到任何东西。有人能告诉我如何将vue3整合到ASPX页面中吗？

Answer 1

使用此

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>

或

<script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>

Vue软件包提供多种软件包：

• vue.cjs.js
• vue.cjs.prod.js
• vue.esm-browser.js
• vue.esm-browser.prod.js
• vue.esm-bundler.js
• vue.global.js
• vue.global.prod.js
• vue.runtime.esm-browser.js
• vue.runtime.esm-browser.prod.js
• vue.runtime.esm-bundler.js
• vue.runtime.global.js
• vue.runtime.global.prod.js

您可以选择最有效的方法，但最简单的方法是在开发过程中使用vue.global.js，在生产中使用vue.global.prod.js

---

示例

const app = Vue.createApp({
template: document.getElementById("appTemplate").innerHTML
})
app.component('my-component', {
template: document.getElementById("componentTemplate").innerHTML,
props:{name:{default: "🤷‍♂️"}}
})
app.mount('#app')

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app"></div>
<template id="appTemplate">
<h1>APP</h1>
<my-component name="world"></my-component>
</template>
<template id="componentTemplate">
Hello {{name}}
</template>

Answer 2

根据官方文档，您可以使用CDN，如下所示：

<script src="https://unpkg.com/vue@next"></script>