节点安装组件的基本用法（例如datepicker）

Question

我想使用vue3 datepicker组件。然而，我似乎无法启动它。

使用npm-i vue3-datepicker安装datepicker后，我将提供的代码输入到本地html文件中：

<script setup>
import Datepicker from '../src/datepicker/Datepicker.vue'
import { ref } from 'vue'
const picked = ref(new Date())

</script>

<template>
  <datepicker v-model="picked" />
</template>

我保存并打开了该文件，但代码似乎没有做任何事情。

示例代码甚至没有用于连接日历的输入元素。

Chrome控制台的错误是

未捕获的SyntaxError：无法在模块外使用import语句

如何启动并运行datepicker？我错过了什么？有人能提供一个更完整的示例（完全工作的代码吗？）

Answer 1

看来你犯了两个错误：

1. 文件类型错误
2. 导入错误

此工作流程适用于我：

NPM i Vue3-DatePicker/纱线添加Vue3-DatePicker

// MyDatepicker.vue
<template>
  <Datepicker v-model="picked" />
</template>

<script setup>
import Datepicker from 'vue3-datepicker'
import { ref } from 'vue'
const picked = ref(new Date())
</script>

// App.vue
<template>
  <MyDatepicker />
</template>

<script setup>
import MyDatepicker from './components/MyDatepicker.vue'
<script>

注意：您的vue.js版本必须是版本3+