使用VUE3 开发Chorm插件(并整合element-ui)不行你来砍死我

最新推荐文章于 2024-08-13 16:44:40 发布

一朵野花2

最新推荐文章于 2024-08-13 16:44:40 发布

阅读量1.8k

点赞数 1

分类专栏： chorme 插件vue开发 vue 文章标签： vue chorme插件 chorme element-ui npm

本文链接：https://blog.csdn.net/HUDCHSDI/article/details/108848776

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

chorme 插件vue开发

1 篇文章 0 订阅

订阅专栏

网上搜索了很多vue开发Chorm插件的博客，在一步步试的过程中，总是会有这样那样的问题。经过不懈努力，终于走通了一条。下面是我的过程, 如果你只想要demo的代码，请直接调到文档最后有github仓库地址。

环境准备

1 npm版本 6.13.4
2 node版本 12.16.1
3vueCLI 版本 4.5.6

如果你还是vuecli2 的话，你要先卸载掉vue-cli2 ,在安装vue-cli3。

vue -V  // 查看版本号

vue install vue-cli g  // 安装vue2
vue uninstall vue-cli g  // 卸载vue2

npm install -g @vue/cli  //安装vue3
npm uninstall -g @vue/cli  // 卸载vue3

初始化vue项目

vue create demo

以上命令会初始化一个vue项目，在第一步的时候，让你选择vue2 还是vue3 ，切记，选择vue2，即我们使用vue3的工具来初始化一个vue2项目 ,后面的按照默认即可。

添加Chorme 插件拓展

进入demo目录下，执行

vue add chrome-ext

执行以上命令之后项目就引入了chorme拓展插件。你就可以看到如下图，package.json 中多了一个 build-watch
在这里插入图片描述
执行

npm run build-watch

然后打开Chorme 浏览器->拓展程序->添加已解压拓展程序。选择当前目录下生成的dist。然后在右上角点击插件图标，如下则说明chorme插件引入成功。

在这里插入图片描述

引入element-ui

1 引入按需加载插件

vue add babel-plugin-component

2 引入element-ui

vue add element-ui

3 配置 babel.config.js 如下

module.exports = {
    presets: [
        '@vue/app'
    ],
    "plugins": [
        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ]
    ]
};

测试element-ui

1 修改popup下index.js,引入一个Button
2 修改popup 下App.vue,添加一个element-ui的button
3 点击保存，会进行自动刷新，查看结果如下

至此终于完成。

遇到的问题

因为我对VUE的认识的肤浅之程度，在搭建过程中，遇到了很多问题，照着很多帖子走下来，始终遇到了各种奇奇怪怪的问题。

1 cnpm run build-watch 时候，控制台报错如下

"export 'default' (imported as 'Vue') was not found in 'vue'

提示找不到vue，这个是因为我初始化的时候选择的是VUE3 ，初始化之后，启动npm run serve 正常启动没有问题，添加chorm插件之后启动报错这个，但是dist目录可以正常的添加到Chorme 插件中，但是点击插件的图标，没有内容，猜测是chorme-ext 插件还没有兼容vue3导致。这也就是，开头的时候，初始化项目的时候一定要选择vue2 的原因。

2 element-ui 不生效的问题

安装element 插件，如果你开始的时候，走错了路，安装了vue3, 那么使用npm install element-ui 命令安装该插件，会不成功，提示要vue2下才能使用该命令，然后你卸载了vue3 安装了vue2，重新初始化项目，但是却在安装chorme-ext 插件的时候。发现你怎么搞，都不能正确的安装上chorme 插件。

终极解决办法：安装chorme-ext 插件之后，使用 vue add element-ui 的方式添加element-ui 插件，babel按需加载插件也是如此。

安装完按需加载插件之后，不要忘了照着上面修改配置babel.config.js, 不然你的element-ui的样式还是不会生效。

git-基础demo

鉴于搭建一个demo工程是如此坎坷。所以特地奉上，已经搭建好的一个基础工程。整合了chorm-ext 和element-ui的基础工程，你要做的就是将你的vuecli 升级到vuecli3 ，以及让你的npm版本和node版本不要太落后。拉下来直接

npm i
npm run build-watch

即可。
github

参考博客

https://www.jb51.net/article/162129.htm
https://www.cnblogs.com/zhangnan35/p/11122029.html
https://stackoverflow.com/questions/63768491/export-default-imported-as-vue-was-not-found-in-vue
https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html