如何从vuetify.min.js直接导入createVuetify？CodePen报错解决

问题原因 #

1. Vuetify 3仅兼容Vue 3，你当前使用Vue 2的初始化写法（new Vue()），二者不匹配
2. CDN提供的Vuetify 3压缩文件（vuetify.min.js）并非ES模块导出格式，无法通过解构导入createVuetify
3. 模板中:value="{{ testVariable }}"写法错误，Vue指令绑定直接写变量名即可，无需嵌套插值语法

正确实现代码 #

HTML #

<div id="app">
  <v-app>
    <v-text-field :value="testVariable"></v-text-field>
  </v-app>
</div>

<!-- 引入Vue 3全局版本 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 引入Vuetify 3样式 -->
<link href="https://cdn.jsdelivr.net/npm/vuetify@3.3.12/dist/vuetify.min.css" rel="stylesheet">
<!-- 引入Vuetify 3全局版本 -->
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.3.12/dist/vuetify.min.js"></script>

JavaScript #

// 从全局对象中解构所需方法
const { createApp } = Vue;
const { createVuetify } = Vuetify;

// 初始化Vuetify
const vuetify = createVuetify({
  theme: { defaultTheme: 'light' },
});

// 初始化Vue应用并挂载
createApp({
  data() {
    return {
      testVariable: "asdf"
    }
  }
})
.use(vuetify)
.mount('#app');

额外说明 #

如果偏好ES模块导入方式，需使用Vuetify的ES模块版本，同时给script标签添加type="module"属性，示例如下：

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
import { createVuetify } from 'https://cdn.jsdelivr.net/npm/vuetify@3.3.12/dist/vuetify.esm.js';
// 样式仍需单独引入

const vuetify = createVuetify({
  theme: { defaultTheme: 'light' },
});

createApp({
  data() {
    return {
      testVariable: "asdf"
    }
  }
})
.use(vuetify)
.mount('#app');

内容的提问来源于stack exchange，提问作者Nathan Wailes