Javascript Vuetable 2没有'；无法在浏览器中显示_Javascript_Html_Vue.js_Vuejs2_Vue Tables 2

Javascript Vuetable 2没有'；无法在浏览器中显示

javascript html vue.js vuejs2

Javascript Vuetable 2没有'；无法在浏览器中显示,javascript,html,vue.js,vuejs2,vue-tables-2,Javascript,Html,Vue.js,Vuejs2,Vue Tables 2,我只是按照Vuetable教程在我自己的应用程序中使用它，但我的浏览器显示一个空白页面。Vue开发工具总是说“未检测到Vue.js”；我觉得我错过了一些简单的事情。我已逐字阅读了教程，并在中工作。有人看到问题了吗 Main.js： Vue.use(Vuetable); Vue.config.devtools = true; var app = new Vue({ el: '#app', components:{ 'vuetable-pagination': Vu

我只是按照Vuetable教程在我自己的应用程序中使用它，但我的浏览器显示一个空白页面。Vue开发工具总是说“未检测到Vue.js”；我觉得我错过了一些简单的事情。我已逐字阅读了教程，并在中工作。有人看到问题了吗

Main.js：

Vue.use(Vuetable);
Vue.config.devtools = true;

var app = new Vue({
    el: '#app',
    components:{
        'vuetable-pagination': Vuetable.VuetablePagination
       },
    data: {
        fields: ['name', 'email','birthdate','nickname','gender','__slot:actions'] },

    computed: {},
    methods: {
        onPaginationData (paginationData) {
          this.$refs.pagination.setPaginationData(paginationData)
        },
        onChangePage (page) {
          this.$refs.vuetable.changePage(page)
        },
        editRow(rowData){
          alert("You clicked edit on"+ JSON.stringify(rowData))
        },
        deleteRow(rowData){
          alert("You clicked delete on"+ JSON.stringify(rowData))
        }
      },
})

HTML文件：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test environment</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Use Vue framework -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>

<body>

    <!-- Supporting javascript -->
    <script src="https://unpkg.com/smiles-drawer@1.0.2/dist/smiles-drawer.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
    <!-- vuetable-2 dependencies -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
    <!-- vuetable-2 -->
    <script src="https://rawgit.com/ratiw/vuetable-2/develop/dist/vuetable-2.js"></script>
    <script src="main.js"></script>
    <div id="app">
        <div class="ui container">
            <vuetable ref="vuetable" api-url="https://vuetable.ratiw.net/api/users" :fields="fields" pagination-path="" @vuetable:pagination-data="onPaginationData"
                      data-path="">
                <template slot="actions" scope="props">
                    <div class="table-button-container">
                        <button class="ui button" @click="editRow(props.rowData)">
                            <i class="fa fa-edit"></i> Edit
                        </button>&nbsp;&nbsp;
                        <button class="ui basic red button" @click="deleteRow(props.rowData)">
                            <i class="fa fa-remove"></i> Delete
                        </button>&nbsp;&nbsp;
                    </div>
                </template>
            </vuetable>
            <vuetable-pagination ref="pagination" @vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
        </div>
    </div>
</body>
</html>


测试环境
编辑
删除

将所有脚本标记移到页面底部。您的Vue是在呈现html之前创建的。此外，还包括两次Vue；一次在头上，一次在身体上，明白了。我知道这很简单。谢谢