使用vue-cli3开发Chrome插件全攻略

"这篇文章主要介绍了如何使用vue-cli3来开发Chrome插件，通过vue-cli-plugin-chrome-ext插件实现快速编译打包，并引入了element-ui作为UI框架进行按需加载，以减小插件的文件大小。" Vue CLI 3 是 Vue.js 官方提供的一款现代化的脚手架工具，它简化了项目的初始化和配置过程。在本文中，作者探讨了如何利用 Vue CLI 3 的优势来开发Chrome插件。传统的Chrome插件开发可能涉及到手动配置，而通过 webpack 可以使开发流程更加高效，代码结构更模块化，并在打包时自动压缩代码。 首先，为了开始开发，作者创建了一个基于 Vue CLI 3 的新项目，命令行输入 `vue create vue-extension` 并按照提示选择默认配置。接着，进入项目目录并安装 `vue-cli-plugin-chrome-ext` 插件，使用命令 `vue add chrome-ext`。此插件专门用于简化Chrome扩展开发，它可以与 Vue CLI 3 集成，使得在开发Chrome插件时能够方便地引用UI框架和npm插件。 随后，为了适应Chrome插件的开发需求，作者删除了一些不必要的Vue CLI 3 默认文件和文件夹，如 `src/main.js`、`public` 目录以及 `src/components`。这样可以创建一个更适合Chrome插件的项目结构。 在运行项目时，作者推荐使用 `npm run build-watch` 命令，以便在开发过程中实时编译修改的文件，并在根目录下的 `dist` 文件夹中生成结果。要让浏览器加载插件，需将 `dist` 文件夹作为Chrome扩展加载。需要注意的是，对于 `background` 文件和 `manifest.json` 的改动，浏览器不会自动刷新，需要手动重新加载插件。 为了提升用户体验，文章提到了引入流行的UI框架 element-ui。通过 `npm install element-ui` 安装后，为了控制插件的文件大小，采用按需加载的方式引入组件。这需要安装 `babel-plugin-component` 插件，并在 `babel.config.js` 文件中进行配置，指定组件库名称为 "el"。 通过这样的步骤，开发者可以利用 Vue CLI 3 和 webpack 的强大功能，结合 element-ui 的按需加载特性，高效地开发出具有美观界面的Chrome插件，同时保持较小的文件体积，从而提高用户加载速度和体验。