Добавление vue 3 на существующую страницу веб-форм ASPX

#asp.net #vue.js #vue-component #vuejs3

#asp.net #vue.js #vue-компонент #vuejs3

Вопрос:

В vue 2, чтобы включить vue в существующую страницу web forms ASPX, вам просто нужно было добавить соответствующий тег script. Что-то вроде этого :

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

Можете ли вы сделать это с помощью Vue 3? Я изучал, как включить vue 3 в существующее приложение web forms, например ASPX pages, и ничего не могу найти в нем. Кто-нибудь может показать мне, как включить vue 3 на страницу ASPX?

Ответ №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 в prod

Пример

 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>

1. Спасибо! На странице ASPX, как только вы разместите ссылку на vue 3, как мне просто «динамически» распечатать hello world, используя vue 3? (самый простой способ) @Daniel

2. добавленный пример, вы можете использовать composition API или компоненты на основе классов или даже смешивать, если хотите. Перенос с Vue 2 должен быть простым, но вы можете найти некоторые ошибки, особенно в сторонних библиотеках

3. Спасибо @Daniel — В вашем примере использовался composition API или компоненты на основе классов?

4. он не использует composition API (который имел бы setup() функцию)

Ответ №2:

На основе официальных документов вы можете использовать CDN следующим образом :

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