如何在没有 CLI 的情况下在普通 js 文件中导入 Vue 多选

Question

我想在我没有使用 cli 的情况下在我的 Vue 应用程序中导入 vue multiselect。 它是纯 js，所有内容都在我的 html 中。但我无法导入像 Vue Multiselect 这样的库:( 在 HTML 中：

<body>
<div id="app">
<multiselect v-model="value" tag-placeholder="Add this as new tag" placeholder="Search or 

add a tag" label="name" track-by="code" :options="options" :multiple="true" :taggable="true" @tag="addTag"></multiselect>
    </div>
<script src="../assets/js/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>

<script type="module" src="../assets/js/user-list.js">
</script>
</body>

在JS中：

new Vue({
 data() { return {} }
}).$mount(#app)

我无法像以前在 vue cli 中那样导入它，例如：

import multiselect from 'vue-multiselect'

和

components: { multiselect}

当我导入时，出现如下错误：

Uncaught TypeError: Error resolving module specifier “vue”. Relative module specifiers must start with “./”, “../” or “/”.

Answer 1

尝试使用以下代码片段，其中包含components: { Multiselect: window.VueMultiselect.default } ：

 var app = new Vue({ el: '#app', components: { Multiselect: window.VueMultiselect.default }, data () { return { value: [], options: [ {"name": "aaa", "id": "1",}, {"name": "bbb", "id": "2",}, {"name": "ccc", "id": "3",} ] } } })

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-multiselect@2.1.0"></script> <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> <div id="app"> <multiselect v-model="value" placeholder="chose" label="name" track-by="id":options="options":multiple="true":taggable="true" ></multiselect> <pre>{{ value }}</pre> </div>

如何在没有 CLI 的情况下在普通 js 文件中导入 Vue 多选

问题描述

1 个解决方案

解决方案1
1 2022-11-15 21:26:38

如何在没有 CLI 的情况下在普通 js 文件中导入 Vue 多选

问题描述

1 个解决方案

解决方案1 1 2022-11-15 21:26:38

解决方案1
1 2022-11-15 21:26:38