Vue.js入门教程（十五）：如何创建自己的插件

Posted 2023-04-12

参考技术A 通常，我们不会去接触vue底层的东西，又或者我们突发奇想需要自己创造一套框架。可回头看看我们使用最多的，其实还是插件。
插件，你也可以理解为就是一套方法的集合，当我们需要调用它的时候，引入一下就行了。

举个例子，比如说，swiper和elementui。

一般来说，我们每个项目都会安装一大堆的插件。用于处理各种交互效果和逻辑，但是，网上能搜到了插件不一定能解决我们所有的问题。也就是说，我们剩下30%左右的逻辑部分是需要自己处理的，比如说，转化时间，处理字符串等等。

这些东西网上是没有现成插件的，需要我们自己来写。此时，如果你每一个组件里面都去定义方法就显得太low了。

我们需要自己写一个插件，事半功倍！

一般来说，我们自己的js通常会写成下面的两种形式：

第一种，声明多个方法。这个做法也叫函数声明，这样做的好处是，声明到全局，你只要引用了它，在页面任意地方都可以使用。但是同样的缺点也很明显，容易引起全局污染，浪费浏览器资源。而且当我方法多的时候，调用起来很不方便。

第二种，这是我们最长使用的声明方式，函数表达式。目的就是加载了这个js以后，当我需要使用的时候，直接调用str.xxx()，就可以返回我需要的内容了。并且，方法封装在变量内部，不会引起全局污染，也符合模块化的规则。

ok，ok。我们接下来，就要把我们自己的方法定义到vue上去使用。

我首先把js放到了项目文件夹中，然后在main.js中引入。

调用起来是完全没有问题的。

但是，又好像哪里不太对？是的，这样我们仅仅是引入了一个js，并没有把它形成一个js的插件。

我们来看看一个标准的js插件的调用形式：

为什么他这个可以直接从this上面调用？？？
个人理解他的方法应该是被定义到全局的vue对象上面了，这里的this应该指的就是vue本身！

如果你看过龙哥前面的教程，你应该知道，当我们引入的插件，是一个对象的时候，应该使用：

use方法，可以把一个符合vue标准的对象加载到vue本体上。

首先给我们的main.js下面增加一行。

然后打开我们自己的js文件，按照下面的方式书写：

最后在页面中调用的时候：

到此我们的插件已经跟vue融为一体！其实插件本身还支持更多参数和写法，请各位同学自行研究吧！

如何将 PWA 添加到不是使用 Vue CLI 创建的 Vue.js 3 应用程序？

【中文标题】如何将 PWA 添加到不是使用 Vue CLI 创建的 Vue.js 3 应用程序？

【英文标题】：How to add PWA to Vue.js 3 app not created with Vue CLI?

【发布时间】：2021-06-16 21:53:20

【问题描述】：

我了解在 Vue.js 上启用 PWA 的首选插件是 @vue/cli-plugin-pwa，但这似乎适用于使用 vue-cli 及其版本的 Webpack + Workbox 创建的项目。

我有一个不使用vue-cli 的Vue.js 3 应用程序。也就是说，该项目是从头开始创建的，Webpack 5 是单独安装的。

我是否仍使用 vue-cli 中的 vue add pwa 在此应用上启用 PWA，还是必须使用 this one 之类的指南手动逐步添加？

【参考方案1】：

您可以使用 Workbox CLI 工具在任何项目中添加 PWA。

全局安装 Workbox CLI：

npm install workbox-cli --global

使用向导在您的分发 (dist) 文件夹中设置工作箱。

workbox wizard

在主入口点 html 文件 (index.html) 中添加 service worker。

  <script defer="defer">
    if ('serviceWorker' in navigator) 
      window.addEventListener('load', () => 
        navigator.serviceWorker.register('/sw.js');
      );
    
  </script>

构建 Vue 项目，然后通过运行构建工作箱 pwa：

workbox generateSW workbox-config.js

你就完成了！

注意：要自动化构建过程，请在您的 package.json 文件中添加以下脚本。

    "build:pwa": "vue-cli-service build && workbox generateSW workbox-config.js",

现在您可以使用 pwa 构建项目：

npm run build:pwa

详细了解Workbox CLI。