使用vuejs3 CDN在页面中声明外部组件的正确方法

Question

我是一名 ASL.NET 核心开发人员，我尝试使用 vuejs 来创建一些复杂的表单。为了学习如何使用它，我创建了静态 html 文件，以了解组件在 vuejs 中的工作方式。我有以下示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vue 4 Tutorial</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/vue@next"></script>

    <script src="https://unpkg.com/vuejs-datepicker"></script>

    <script type="text/javascript" src="https://unpkg.com/@vueform/multiselect"></script>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@vueform/multiselect/themes/default.css">
    
    <script>
        const app = Vue.createApp({
            data: () => ({
                example1: {
                  value: 0,
                  options: ['Batman', 'Robin', 'Joker']
                }        
            }),
            template: `<h2>Hello with Vue CDN</h2>
            <vuejs-datepicker></vuejs-datepicker>

            <div class="example">
                <h3 id="example-1">#1 - Single select</h3>
                <div class="output">Data: {{ example1.value }}</div>
                <Multiselect v-model="example1.value" v-bind="example1"></Multiselect>
            </div>`
        });
        app.component('Multiselect', VueformMultiselect)
        app.mount("#app")
    </script>
</body>
</html>

在这个例子中，我使用了 vuejs 3、vuejs-datepicker 和 multiselect 的 CDN。我使用 app.component('Multiselect', VueformMultiselect) 命令使多选组件工作。我能理解是因为我打开了js文件，发现下面的代码

var VueformMultiselect=function(e,t).......

结果是使用 VueformMultiselect 对象添加了一个组件。

我检查了 vuejs-datepicker 代码，但找不到类似的东西来在我的应用程序中声明它。有人可以帮我为我的代码声明 vuejs-datepicker 组件吗？

谢谢

Answer 1

您不能使用 vuejs-datepicker in Vue3, you can try with vue3datepicker :

<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue3-date-time-picker@latest/dist/vue3-date-time-picker.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue3-date-time-picker@latest/dist/main.css">
<script type="text/javascript" src="https://unpkg.com/@vueform/multiselect"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@vueform/multiselect/themes/default.css">
<script>
  const app = Vue.createApp({
      data: () => ({
          example1: {
            value: 0,
            options: ['Batman', 'Robin', 'Joker'],
          },
          selDate: null
      }),
      components: { Datepicker: Vue3DatePicker,  Multiselect: VueformMultiselect },
      template: 
        `<h2>Hello with Vue CDN</h2>
          <datepicker v-model="selDate"></datepicker>
          <div class="output">Data: {{ selDate }}</div>
          <div class="example">
              <h3 id="example-1">#1 - Single select</h3>
              <div class="output">Data: {{ example1.value }}</div>
              <Multiselect v-model="example1.value" v-bind="example1"></Multiselect>
          </div>`
  });
  app.mount("#app")
</script>

使用vuejs3 CDN在页面中声明外部组件的正确方法

Right way to declare an external component in a page with vuejs3 CDN

javascript

vue.js

vuejs3