如何使用vue-cli3进行Chrome插件开发实践？

本文共计1659个文字，预计阅读时间需要7分钟。

之前查找了很多如何开发谷歌插件的文章，发现内容大多很基础，且没有提及如何快速编译打包插件。我就在想，为什么不能通过webpack来打包插件呢？如果用webpack进行编译，会有什么好处呢？

之前找了不少如何开发谷歌插件的文章，结果发现都是些很基础的内容，并没有写到如何快速编译打包插件。我就在想为什么不能通过webpack来打包插件呢？如果通过webpack编译的话，就能使开发过程变得更舒服，使文件结构趋向模块化，并且打包的时候直接编译压缩代码。后来发现了 vue-cli-plugin-chrome-ext 插件，通过这个插件能很方便地用 vue-cli3 来开发谷歌插件，并能直接引用各种UI框架跟npm插件。

tip：如果你没接触过谷歌插件开发的话建议先看看基础文档：

• Chrome插件开发全攻略

搭建环境

• 创建一个vue-cli3项目： vue create vue-extension，对话流程选择默认就行。
• 进入项目cd vue-extension
• 安装vue-cli-plugin-chrome-ext插件：vue add chrome-ext,根据安装对话选项设置好。