vue3_创建一个 Vue 应用

应用实例

1.在vscode的main.js中创建应用实例

<!--main.js-->
// 通过 createApp 函数创建一个新的 应用实例
import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './views/chuangjianyigevueyingyong.vue'

const app = createApp(App)
// 挂载应用
app.mount('#app')

2.在views文件夹中编写.vue文件

<!-- chuangjianyigevueyingyong.vue-->
<!-- 编写DOM实现挂载应用 -->
<template>
    <div id="app">
        123
    </div>
</template>

3.打开终端运行即可看到vue应用被创建，实现挂载

DOM 中的根组件模板

1.CTRL+N+CTRL+S保存为.xml文件
2.应用代码使得可用vue3

<!--.html文件-->
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

3.编写DOM

<!--.html文件-->
<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

4.在挂载容器内编写模板

<!--.html文件-->
import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

5.右击+show preview实现效果

（PS：浏览器会影响显示效果，
遇到此问题换浏览器试试）

应用配置

.config 对象允许我们配置一些应用级的选项

多个应用实例

createApp API 允许你在同一个页面中创建多个共存的 Vue 应用
1.代码实现如下

<!--.html文件-->
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<!-- 编写DOM -->
<div id="app">
  <button @click="count++">{{ count }}</button>
</div>
<div id="container-1">
  <button @click="count++">{{ count }}</button>
</div>
<div id="container-2">
  <button @click="count++">{{ count }}</button>
</div>

<script type="module">
 import { createApp } from 'vue'
// 在挂载容器内编写模板
const app = createApp({
data() {
  return {
    count: 0
  }
}
})

app.mount('#app')
app.config.errorHandler = (err) => {
  /* 处理错误 */
}
// createApp API 允许你在同一个页面中创建多个共存的 Vue 应用
const app1 = createApp({
  data() {
  return {
    count: 0
  }
}
})
app1.mount('#container-1')

const app2 = createApp({
  data() {
  return {
    count: 0
  }
}
})
app2.mount('#container-2')
</script>

2.右击+show preview+效果如下