带 CDN 的 Vuetify 实例不适用于 vuejs3

Question

带 CDN 的 Vuetify 实例不适用于 vuejs3

我在 aspnet mvc 和 import vuejs v3 cdn 上有应用程序，我喜欢使用 vuetify 但我不知道该怎么做。这是我的代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewData["Title"] - MVCAndVue</title>
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>
<script>
const {
    ref,
    reactive,
} = Vue;
//Define Vue app
const App = {
    data() {
        return {
        };
    },
    methods: {
        
    },
    setup(props, context) {
        
    }
};
// Create new Vue app
const app = Vue.createApp(App);
app.mount("#app");

</script>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Neh*_*oni 6

您遇到此问题是因为您包含了与 Vue 3 不兼容的Vuetify 2.x。因此，请使用Vuetify 3。

现在，通过 CDN 使用 Vuetify 的正确方法，您需要遵循以下步骤 -

head在您的标签中导入 Vuetify CSS -

<link
  href="https://cdn.jsdelivr.net/npm/vuetify@3.0.5/dist/vuetify.min.css"
  rel="stylesheet"
/>

Run Code Online (Sandbox Code Playgroud)

如果您想使用材料设计图标，请在您的head标签中导入此 CSS 链接 -

<link
  href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"
  rel="stylesheet"
/>

Run Code Online (Sandbox Code Playgroud)

body在您的标签中导入 Vuetify 脚本 -

<script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.5/dist/vuetify.min.js"></script>

Run Code Online (Sandbox Code Playgroud)

如果您还计划通过 CDN 使用 Vue3，请在您的body标签中导入 Vue 脚本 -

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Run Code Online (Sandbox Code Playgroud)

这是一个完整的工作 HTML 文件，其中包含 Vue3 和 Vuetify3 所需的所有导入 CDN -

<!DOCTYPE html>
<html>
  <head>
  <link
    href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"
    rel="stylesheet"
    />
  <link
    href="https://cdn.jsdelivr.net/npm/vuetify@3.0.5/dist/vuetify.min.css"
    rel="stylesheet"
    />
</head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.5/dist/vuetify.min.js"></script>
    <script type="text/x-template" id="app-template">
      <v-app>
        <v-card
          class="mx-auto"
          width="400"
          append-icon="mdi-human-greeting"
        >
          <template v-slot:title>
            Title
          </template>
          <v-card-text>
            Description
          </v-card-text>
        </v-card>
      </v-app>
    </script>
    <script>
      const { createApp } = Vue;
      const { createVuetify } = Vuetify;
      
      const vuetify = createVuetify();
      
      const app = createApp({
        template: "#app-template", 
      })
        .use(vuetify)
        .mount("#app");
    </script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

要了解有关使用 CDN 的更多信息，请阅读此处 -

归档时间：	2 年，11 月前
查看次数：	2652 次
最近记录：	2 年，10 月前