Vue.js 3 - 没有组件的实例？

Question

在 Vue.js 2 中，可以创建一个没有组件的响应式实例，如下所示：

var vue = new Vue({
    el: '#root',
    data: { /*... */ },
    methods: { /* ... */ }
})

事实上，这就是 Vue.js 2 文档开始的基本使用模式。

我认为这是一种向现有 DOM 元素添加反应性的非常优雅的方式，并且创建的实例很容易以编程方式进行操作。 Vue.js 3 中有等效的吗？

Answer 1

使用CDN

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

const app = createApp({
  setup() {
    const msg = ref("hello world")
    
    return { msg }
  },
}).mount('#app')

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

<div id="app">
   <div>{{ msg }}</div>
   <input v-model="msg" />
</div>

使用CDN（带模板）

// 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>

使用 CLI

步骤

1.通过 npm 安装软件包

2.创建您的应用程序

3.制作“生产”代码（如果需要相同的项目则跳过）

4.使用您的 vue 应用程序（实现另一个项目或在同一个项目中使用）

示例

import { createApp, ref } from 'vue'

const app = createApp({
  setup() {
    const msg = ref("hello world")

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

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

更多信息

DOM 内根组件模板 - Vue.js 文档

多个应用程序实例 - Vue.js 文档