如何挂载像codepen这样的Vue 3 CLI项目？

Question

我写了一支工作笔这里。

我试图在vue-cli项目中复制同一个应用程序。所有内容都处于默认设置(vue3预览)，但这2个文件除外：

main.js

import { createApp } from 'vue'
import BoostApp from './App.vue'
    
createApp(BoostApp).mount('#box')

App.vue

<template>
  <div id="box" class="demo">
    <h1>
      Compound vault
      <br />
    </h1>
    <span>
    Deposit
    <input type="number" min="0" v-model="deposit" style="width:6em" /> USD (in stablecoins)
    </span>
    <br />
    <br />CRV needed for 2.5x boost:
    <br />
    {{Math.ceil(deposit/CRVneeded*100)/100}} CRV for 4 years
  </div>
</template>

<script>
  export default {
    name: "BoostApp",
    data() {
      return {
        deposit: 10,
        CRVneeded: 2.12
      };
    }
  };
</script>
<style>
</style>

它与'npm运行服务‘构建良好，但当我访问http://localhost:8080/时，我只得到一个空白的屏幕。

我哪里出问题了？谢谢!

Answer 1

该应用程序安装到index.html中的div，而不是App.vue中的。因此，如果您没有将div id重命名为box in index.html，这就是原因所在。

您还可以将其改为#app (推荐)：

createApp(BoostApp).mount('#app')