如何在CDN模式下使用带有JSX语法的Vue 3？

Question

我想使用Vue 3 CDN模式，并使用JSX语法进行开发。如何配置？

Answer 1

Babel 无法通过 Vue.js 配置为 CDN 模式。为此，您需要 Webpack、Rollup 或 Vite 等处理器。

来源：评论

使用构建工具通常比使用 CDN 应用程序更方便，因此您可以轻松地自定义生产代码（例如，缩小它），同时保持开发代码的便利性。

替代方案：使用 CDN 与

Template

与您想要实现的目标类似的解决方案。然而，这并不能解决你想要使用 Babel 的问题。

// CDN Vue Import
const { createApp, ref } = Vue

const app = createApp({
  setup() {
    const msg = ref("hello world")
    
    return { msg }
  },
  template: `
    <div>{{ msg }}</div>
    <input v-model="msg" />
  `
}).mount('#app')

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>

<div id="app"></div>