vue.js - VueJs - 在 asp.net 核心项目中导入组件

Question

我有 asp.net 核心项目，它使用 vuejs 框架（javascript） 这是页面结构的示例（为简单起见，所有内容都被剥离了）

//索引.cshtml

<div id="page-1">
</div>
<script src='~/page-1.js' defer></script>

//page-1.js
(function () {
    var Page1Vue = new Vue({
        el: "#page-1",
});
})();

一切正常（已安装，所有方法等）

我想引入这个外部组件https://vue-multiselect.js.org/，但不能让它工作。有没有人可以将外部组件集成到现有实例中。

Answer 1

• 在_Layout.cshtml中导入外部库，请导入esm.js库

 <script type="importmap">
      {
        "imports": {
          "vue": "/lib/vue.esm.browser.js_2.6.11/vue.esm-browser.js",
          "vue-multiselect":"https://cdnjs.cloudflare.com/ajax/libs/vue-multiselect/3.0.0-alpha.2/vue-multiselect.esm.min.js"
        }
      }
 </script>

• 将多选节点插入Index.cshtml

<div id="app">
     <multiselect v-model="value" :options="options"></multiselect>
</div>

• 在Index.cshtml 中创建 Vue 组件

<script type="module">
      import { createApp } from 'vue'
      import VueMultiselect from 'vue-multiselect'
       createApp({
                  data () {
                    return {
                    value: null,
                           options: ['list', 'of', 'options']
                    }
                  }
        })
        .component('multiselect', VueMultiselect)
        .mount('#app')
</script>

@section Scripts
{
    <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
}

• 结果如下