vue-cli创建的项目里，如何将插件引入并使用？

用vuejs脚手架vue-cli创建的项目，如果要引入外部文件（第三方插件）的时候，要在webpack的配置文件中设置externals:webpack.base.conf.js的设置

externals中‘swiper‘是键，对应的值一定的是插件swiper.js所定义的变量Swiper:

PWA化主要解决了两大问题： 1）使web app有沉浸式体验，也就是更靠近原生体验。如：去掉浏览器的地址栏和底部工具栏；在桌面上生成图标，方便再次进入。 2）提供独立于浏览器的缓存，并且可以接收服务器的推送。如：在没有网络，或者网络状态较差的时候，仍可访问缓存在本地的数据.

1. 通过vue-cli脚手架进行安装pwa插件

此时会生成manifest.json和registerServiceWorker.js两个文件。

2. 配置manifest.json文件.(manifest.json文件主要是配置图标，app名称，显示方式等) 参考MDN手册

3. 在index.html中引入manifest.json

4. registerServiceWorker.js文件(registerServiceWorker.js主要是注册Service Worker。SW可以用于消息推送，缓存管理、后台同步、拦截和处理网络请求等。注意：使用SW需要https及浏览器兼容)

5)配置vue.config.js文件,控制Service Worker行为。设置缓存逻辑、文件名字等。 参考@vue/cli-plugin-pwa 及 workbox参考

安装VUE的方法有两种：

第一种方法：需正常打开chrome商店，搜索vuejs devtools 安装。chrome://extensions/ 开发者工具-扩展程序下启用；

第二种方法：github下载插件，npm包安装依赖，拖入浏览器扩展程序。具体 *** 作如下：

1、下载chrome扩展插件。在github上下载压缩包并解压到本地。

2、npm install下载完成后打开命令行cmd进入vue-devtools-master文件夹。

3、 打开shells>chrome>manifest.json并把json文件里的persistent：false改成true。

4、扩展chrome插件。打开chrome浏览器，打开更多工具>扩展程序；再点击加载已解压的扩展程序，然后把shells>chrome文件夹放入。

5、测试安装成功。在插件的目录下执行npm run dev，这个时候的插件就可以运行了。

---