vue.js - 如何创建基于 Vuetify 的浏览器扩展？

Question

我正在使用 Vue CLI UI。
我创建了一个项目并添加了 vue-cli-plugin-browser-extension
到现在为止还挺好。

现在我正在尝试添加 Vuetify 进入混合。
我尝试使用官方插件，但扩展的弹出窗口中没有显示任何内容。
我尝试了 CDN 方法，但是当我尝试将 Vuetify 添加到 Vue 实例时，我收到一条错误消息，指出未定义 Vuetify。

有任何想法吗？

同样重要的是:我真的更喜欢 不是 如果可能的话，使用 CDN 方法。有没有办法使用npm install还要安装运行 Vuetify 所需的 css 和字体？

Answer 1

NPM 解决方案(使用 CDN 引入 css 和字体)

知道了!
毕竟这并不难，但您需要注意常规应用程序和由 Vue 插件创建的浏览器扩展程序之间的差异。

主要区别是:

扩展的每个部分(弹出窗口、选项、选项卡等)都是一个全新的、独立的 Vue 应用程序。

扩展部分使用的html模板是不是 public/index.html

指示:

按照上面 OP 中的说明创建项目。

安装 Vuetify npm 包:npm install vuetify

在每个 main.js在您打算使用的每个部分中，添加 Vuetify:

    import Vue from 'vue'
    import App from './App.vue'

    import Vuetify from "vuetify";

    Vue.use(Vuetify);

    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      render: h => h(App)
    });

现在查找文件 public/browser-extension.html并在标题部分添加这些行:

  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

就是这样!

如果您对如何将第 4 项转换为 npm 变体有任何想法，请分享。