Question

我是新人。我试图渲染一个Vue组件。但我有错误。我没有使用vue-cli。我包括一个脚本https://cdn.jsdelivr.net/npm/vue

我的html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            VUE Study
        </title>
        <link href="stylee.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <div class="container" id="head">
        </div>
        <script src="components/app.js"></script>
    </body>
</html>

app.js

import Index from "./Index.vue"

new Vue({
    el: '#head',
    render: h => h(Index)
});

app.js和Index.vue都在同一文件夹中。请帮我解决这个问题。

Answer 1

发生此错误是因为浏览器无法识别import语句。由于您没有使用像webpack这样的捆绑程序，因此可以使用Vue.component()注册组件。这样将无需在其他模块中导入组件。

Vue.component('Index', {
  data() {
    return {
      value: 'Index component'
    }
  },
  template: `<h2>{{ value }}</h2>`
})

new Vue({
    el: '#head'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            VUE Study
        </title>
        <link href="stylee.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <div class="container" id="head">
            <index />
        </div>
        <script src="components/app.js"></script>
    </body>
</html>

尝试导入时出现Uncaught SyntaxError：意外的标识符错误

1 个答案: