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

【问题标题】：How do I mount a Vue 3 CLI project like codepen如何挂载像 codepen 这样的 Vue 3 CLI 项目
【发布时间】：2021-03-17 14:20:48
【问题描述】：

我写了一支工作笔here。

我正在尝试在 vue-cli 项目中复制相同的应用程序。一切都在默认设置（vue3 预览），除了这两个文件：

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 run serve”可以很好地构建，但是当我访问 http://localhost:8080/ 时，我只是得到一个空白屏幕。

我哪里错了？谢谢！

【问题讨论】：

标签： javascript html vue.js vue-cli vuejs3

【解决方案1】：

应用挂载到 index.html 中的 div，而不是 App.vue 中的那个。因此，如果您没有在 index.html 中将 div id 重命名为 box，这就是原因。

您也可以将其改回#app（推荐）：

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

【讨论】：