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

Question

在 vue 2 中，为了将 vue 合并到现有的 Web 表单 ASPX 页面中，您只需添加适当的脚本标签。像这样：

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

你能用 Vue 3 做到这一点吗？我一直在研究如何将 vue 3 合并到现有的 Web 表单应用程序中，比如 ASPX 页面，但在上面找不到任何东西。谁能告诉我如何将 vue 3 合并到 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>

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

Adding vue 3 to existing web forms ASPX page

asp.net

vue.js

vue-component

vuejs3

例子