如何直接使用 VueQuintable 源码？

Question

我正在尝试在我的网站上使用以下 vue 表包装器，但仅用于一页。所以我不想创建整个 vue 项目。相反，我尝试直接使用源代码。

https://vuejsexamples.com/a-high-configurable-and-flexible-table-wrapper-using-vue-and-bootstrap/

https://quintet.io/vue-quintable-demo/

我是 vue 新手。我在网上按照一些例子做以下 3 步。

第 1 步：我下载了源代码并放在 vue 文件夹中，然后在我的 html 页面中包含以下链接。

<script type="text/javascript" src="vue/vue.min.js"></script>
<script type="text/javascript" src="vue/vue-quintable.umd.min.js"></script>
<link rel="stylesheet" href="vue/vue-quintable.css"></link>

第 2 步：创建 app.js 文件

var app = new Vue({
  el: '#app'  
})

第 3 步：在我的 html 页面中添加以下代码

<div id="app">
 </div>

现在，我不知道如何导入 VueQuintable 组件。演示页面有以下代码。是组件代码吗？如果有人能提供一些我下一步应该做什么的提示，我将不胜感激。 非常感谢。

<template>
        <VueQuintable  :sort-order="sortOrder" :config="config" :rows="rows"></VueQuintable>
</template>
<script>
    import VueQuintable from "../components/VueQuintable.vue"
    import Chance from "chance";

    export default {
        components:{
          VueQuintable
        },
        data() {
            return {
                config: {
                    columns: [
                        {
                            headline: "Name",
                        }, {
                            headline: "Age",
                            sort:true

                        }, {
                            headline: "Birth Place",
                        }, {
                            headline: "Job",
                            sort:true
                        }
                    ],
                    multiSort:true,
                    multiSortSelect:true,
                    pageSort:true,
                    pageSortSelect:true,
                    pagination:5,
                    search:true,
                },
                sortOrder:[{
                    index:1,
                    asc:false,
                }]

            }
        },
        computed:{
            rows(){

                let count = 30;
                const rows = [];

                const chance = new Chance();

                for(let i = 0; i < count; i++){

                    const randSortValue = Math.ceil(Math.random() * 10);

                    rows.push([
                        {
                            text:chance.name({ nationality: 'en' })
                        },
                        {
                            text:chance.age()
                        },
                        {
                            text:chance.city()
                        },
                        {
                            html:"<span class\"mr-2\">" + chance.profession() +"</span><em>"+ "["+randSortValue+"]</em>",
                            sortValue: randSortValue
                        },
                    ]);
                }

                return rows;


            }
        }
    }
</script>

Answer 1

由于我直接使用源，我不能对组件使用导入。 所以我需要把组件放在 app.js 文件中

Vue.component('vuequintable', {
      data() {
            return {
                config: {
                    columns: [
                        {
                            headline: "Name",
                        }, {
                            headline: "Age",
                            sort:true

                        }, {
                            headline: "Birth Place",
                        }, {
                            headline: "Job",
                            sort:true
                        }
                    ],
                    multiSort:true,
                    multiSortSelect:true,
                    pageSort:true,
                    pageSortSelect:true,
                    pagination:5,
                    search:true,
                },
                sortOrder:[{
                    index:1,
                    asc:false,
                }],
                chance:[{name : "aa",
                age : 2,
                city :"hk",
                profession :"kk"
                },{name : "bb",
                age : 3,
                city :"hk",
                profession :"kk"
                }],

            }
        },
        computed:{
            rows(){

                let count = 2;
                const rows = [];

                //const chance = new Chance();
               
                for(let i = 0; i < count; i++){

                    //const randSortValue = Math.ceil(Math.random() * 10);

                    rows.push([
                        {
                            text:this.chance[i].name
                        },
                        {
                            text:this.chance[i].age
                        },
                        {
                            text:this.chance[i].city
                        },
                        {
                            text:this.chance[i].profession
                        },
                    ]);
                }

                return rows;


            }
        
    },
    template:   `<VueQuintable  :sort-order="sortOrder" :config="config" :rows="rows"></VueQuintable>`
});


Vue.config.devtools = true

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="./dist/vue-quintable.css"></link>


<div id="app">
  <vuequintable></vuequintable>
</div>

<script type="text/javascript" src="./dist/vue.min.js"></script>
<script type="text/javascript" src="./dist/vue-quintable.umd.min.js"></script>