如何在Vue SFC Playground中使用Vuetify？或集成Vue Router到Vuetify Playground？

一、Vue SFC Playground中补全Vuetify CSS的方法 #

Vue SFC Playground没有专门的CSS导入区域，可通过以下两种方式导入Vuetify样式：

方法1：在index.html中添加链接标签 #

打开左侧文件列表的index.html，在<head>内添加Vuetify的CSS CDN链接（版本需与你导入的Vuetify JS版本一致）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue SFC Playground</title>
  <!-- 导入Vuetify CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.7.15/dist/vuetify.min.css">
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

方法2：在main.js中直接导入CSS #

在main.js开头添加CSS的导入语句：

import 'https://cdn.jsdelivr.net/npm/vuetify@3.7.15/dist/vuetify.min.css'
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import router from './router'
import App from './app.vue'

const vuetify = createVuetify()

createApp(App)
  .use(vuetify)
  .use(router)
  .mount('#app')

二、Vuetify Playground中集成Vue Router的方法 #

Vuetify Playground的createApp部分不可编辑，可通过在组件中获取当前App实例并注册路由的方式绕过限制：

步骤1：在Import Map中添加Vue Router #

打开左侧的「Import Map」面板，添加Vue Router的导入配置：

{
  "imports": {
    "vue-router": "https://unpkg.com/vue-router@4/dist/vue-router.esm.js"
  }
}

步骤2：创建路由实例 #

新建router.js文件，定义路由规则并导出路由实例：

import { createRouter, createWebHistory } from 'vue-router'
// 按需创建对应的页面组件（比如Home.vue、About.vue）
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

export default createRouter({
  history: createWebHistory(),
  routes
})

步骤3：在App.vue中注册路由 #

在App.vue的<script setup>中，通过getCurrentInstance获取App实例，然后调用use(router)完成注册：

<script setup>
import { getCurrentInstance } from 'vue'
import router from './router'

// 获取当前App实例并注册路由
const app = getCurrentInstance().appContext.app
app.use(router)
</script>

<template>
  <v-app>
    <v-app-bar>
      <!-- 使用Vuetify按钮结合路由跳转 -->
      <v-btn to="/">首页</v-btn>
      <v-btn to="/about">关于</v-btn>
    </v-app-bar>
    <v-main>
      <!-- 路由视图容器 -->
      <router-view></router-view>
    </v-main>
  </v-app>
</template>

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