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

我正在使用Vue CLI用户界面。
我已经创建了一个项目并添加了

vue cli插件浏览器扩展

到目前为止还不错

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

有什么想法吗

同样重要：如果可能的话，我真的更愿意而不是使用CDN方法。有没有办法使用

npm install

来安装运行Vuetify所需的css和字体

NPM解决方案（使用CDN引入css和字体） 明白了
毕竟这并不难，但你需要注意常规应用程序和Vue插件创建的浏览器扩展之间的区别

主要区别在于：

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

用于扩展部件的html模板是而不是

public/index.html

说明：

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

安装Vuetify npm软件包：

npm安装vuetify

在要使用的每个部分的

main.js

中，添加Vuetify:

现在查找文件

public/browser extension.html

，并在标题部分添加以下行：

就这样

如果您对如何将第4项转换为npm变体有什么想法，请与我们分享。

关于最难的部分（第4点），下面是您可以做的

首先，确保你的网页可以加载css文件（我认为你需要

mini-css-extract-plugin

）

然后只需使用以下工具导入Vuetify和材质设计图标：

导入'vuetify/dist/vuetify.min.css'；
导入“材料设计图标iconfont/dist/material design icons.css”；
//或者，如果您喜欢：
导入“@fortwome/fontwome free/css/all.css”；

这是最简单的部分。现在要获得Roboto字体，您需要下载字体样式

https://fonts.googleapis.com/css?family=Roboto:100，300400500700900

中的每种字体下载它并用本地路径替换

url

路径。为此，我编写了可以使用Node执行的简单脚本：

const fetch=require（“节点提取”）；
常数fs=要求（“fs”）；
常量mkdirp=require（'mkdirp'）；
const fontDirPath='。/font/Roboto'；
mkdirp.sync（fontDirPath）；
（异步（）=>{
常量文本=等待（等待获取（'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900', {
标题：{
//我们需要提供用户代理标题，因为没有它，Google将返回不同的（不充分的）响应
“用户代理”：“Mozilla/5.0（Windows NT 10.0；Win64；x64；rv:78.0）Gecko/20100101 Firefox/78.0”，
}
})).text（）
const fontCss=文本
.split（“\n”）
.map（行=>{
const hasURL=line.includes（'url（https'）；
const[，url，fileName]=line.match（新的RegExp（'（https://.*/（.*.woff2））\\））|【】；
if（hasURL）下载文件（url，`${fontDirPath}/${fileName}`）；
返回hasURL？
行。替换（url、文件名）：
线路；
})
.join（'\n'）；
fs.writeFileSync（`fontDirPath}/font_roboto.css`，Buffer.from（fontCss，'utf-8'）；
})()
异步函数下载文件（url、路径）{
const res=等待获取（url）；
const fileStream=fs.createWriteStream（路径）；
等待新的承诺（（决定，拒绝）=>{
res.body.pipe（文件流）；
res.body.on（“错误”，拒绝）；
fileStream.on（'finish'，resolve）；
});
}

脚本可以改进，现在它只寻找“woff2”字体

导入下载并编辑的CSS文件后：

import./font/Roboto/font_Roboto.css'；

另一个选择是切换到Vue/Quasar框架，其中包括对创建浏览器扩展的支持

---

如果您想要脱机版本：

vue create my-app
cd my-app
vue add vuetify

然后回答以下问题：

Choose a preset: 
> Configure (advanced)

Use fonts as a dependency (for Electron or offline)? 
> Yes

---

我认为这是一个很好的方法，不需要编写任何代码。

因为任何人都希望在没有任何CDN的情况下完成本地构建

已经有Vue+Vuetify+材质设计图标

我做了这个回购协议，它最初是从微软的回购协议中克隆出来的

克隆repo，然后安装依赖项并生成

npm-i
#用于生产
npm运行构建
#用于开发（没有HMR）
npm运行开发

您可以从文件夹

/dist/

编辑

webpack.config.js

以添加更多入口点

编辑

/src/popup/popup.js

以添加vuex或vue路由器

---

清单文件是

/src/manifest.json

，它将在构建后复制到

dist

文件夹中

您可能需要将Vuetify添加到构建配置中（package.json等），请参见。文档中唯一相关的部分是关于使用CLI-我想这不起作用，因为两个插件之间存在冲突。其他的方法有Nuxt和WebPack，我都不使用。嘿，谢谢这条帮助我的帖子：）。你知道我是否需要在

webpack.config

中添加一些规则吗？我用的是这个初学者样板

vue create my-app
cd my-app
vue add vuetify

Choose a preset: 
> Configure (advanced)

Use fonts as a dependency (for Electron or offline)? 
> Yes