[1]不能导入？
我想把导入Vue的js文件链接到html。似乎html正确地链接了script标记下的script.js，但javascript文件无法理解Vue，因此html无法做到这一点。我非常缺乏经验，这是基本的帮助。
- 在index.html中导入Vue
<head>
<script type="importmap">
{
"imports": {
"vue": "/lib/vue.esm.browser.js_2.6.11/vue.esm-browser.js",
"vue-multiselect":"/lib/vue-multiselect/vue-multiselect.esm.min.js",
"SingleFileComponent":"/js/SingleFileComponent.js",
"MultiSelectComponent":"/js/MultiSelectComponent.js"
}
}
</script>
</head>
- 在index.html中创建锚点
<div id="app">
<multi-select-component></multi-select-component>
</div>
<div id="single">
<single-file-component></single-file-component>
</div>
<script type="module">
import { createApp } from 'vue'
import VueMultiselect from 'vue-multiselect'
import SingleFileComponent from "SingleFileComponent";
import MultiSelectComponent from "MultiSelectComponent"
createApp({
components: {
MultiSelectComponent
}
})
.component('multiselect', VueMultiselect)
.mount('#app')
createApp({
components: {
SingleFileComponent
}
})
.mount('#single')
</script>
- 在SingleFileComponent.js中创建单个文件组件
export default {
template: `
<div>
<h1>Single-file JavaScript Component</h1>
<p>{{ message }}</p>
</div>
`,
data() {
return {
message: 'Oh hai from the component'
}
},
}
- 在MultiSelectComponent.js中创建多选组件
export default {
template: `
<multiselect v-model="value" :options="options"></multiselect>
<label>{{ value }}</label>`,
data() {
return {
value: null, options: ['list', 'of', 'options']
}
}
}