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

Question

我写了一支工作笔here。

我正在尝试在 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 run serve' 上构建良好，但是当我访问 http://localhost:8080/ 时，我只是得到一个空白屏幕。

我哪里错了？谢谢！

Answer 1

应用安装到 index.html 中的 div，而不是 App.vue[=21= 中的 div ].所以，如果你还没有在 index.html 中将 div id 重命名为 box，这就是原因。

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

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

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

How do I mount a Vue 3 CLI project like codepen

html

javascript

vue.js

vue-cli

vuejs3