Question

有人可以解释为什么关于Import Vue from 'vue'如何破坏模板的呈现吗？我已经看到了有关如何解决此问题的其他答案，但是没有一个答案详细说明了为什么会出现问题。

我运行了npm init和npm install vue，没有使用CLI。

我创建了一个index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>

    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <first-task></first-task>
        {{msg}}
    </div>
    <script src="app.js"></script>
</body>
</html>

和一个app.js如下：

import Vue from 'vue/dist/vue.js'; //Remove to fix

Vue.component('first-task', {
  template: '<p>Hello World!</p>'
});

var app = new Vue({
    el: '#app',
    data: {
      msg: "Hello World"
    }
});

删除导入，效果很好，但是我不清楚为什么会这样。我唯一的猜测是默认的new Vue没有引用完整的版本，或者隐式的Render（）没有被调用，但是我不确定如何进一步研究。

Answer 1

import语句只能出现在javascript 模块

中

<script type="module" src="app.js"></script>

应该修复它，尽管您不必像现在所看到的那样使用当前代码导入Vue

导入Vue中断Vue

1 个答案: