Vue CLI 项目中引入 Layer 弹出层插件的完整指南

Vue CLI 引入 Layer 插件的基本方法

1.如何引入

在 Vue CLI 项目中，引入外部资源文件主要有几种不同的途径。

其中一种常见方式是通过 npm 或 cnpm 命令下载对应的插件包，随后在 main.js 中使用 import 语句进行引入，本文暂不讨论这种基于包管理器的标准做法。

笔者更倾向于采用直接下载对应的 JS 和 CSS 文件，并将其整合到 Vue 项目中的方式。

那么，具体该如何操作才能成功引入呢？

具体实施步骤如下：

• 首先下载所需的 JS 文件或 CSS 文件，通常下载插件时会包含相关联的资源文件。
• 接着，进入 Vue CLI 项目目录下的 index.html 文件，分别在其中引入 CSS 文件和 JS 文件。

具体的引入代码如下：

<link rel="stylesheet" href="./static/layer.css" rel="external nofollow" /> 
  <script src="./static/jquery.js"></script>
   <script src="./static/jquery.min.js"></script>
   <!-- 必须先引入上面jq 1.8版本以上的才能引layer -->
   <script src="./static/layer.js"></script>

通过上述方式，即可在全局范围内调用 layer 弹出层插件。需要注意的是，必须先引入 jQuery 1.8 或更高版本的库，layer 才能正常运行。

常见报错与样式缺失问题解决

2.弹出层显示不出

• 作为一名前端初学者，在遇到前端问题时通常通过搜索引擎寻求帮助。经过约两个半小时的调试与排查，解决了以下主要问题：
• 第一个问题是前端控制台出现报错，印象中出现了 i is not a function 以及 layer.open is not a function 等错误提示。这类问题通常源于资源引入顺序或依赖缺失，解决方法是检查并确保已正确引入 jQuery 1.8 以上的版本。
• 第二个问题是弹出层仅显示文字，缺乏应有的样式效果，没有弹出层的视觉感受。经过大量搜索与分析，最终通过调试前端样式发现端倪：问题在于 layer 内部使用的 class 在我引入的 CSS 文件中并不存在。经仔细检查，发现导入的 CSS 文件有误（注意区分包含手机样式的 CSS 和另一个同名但内容不同的 CSS 文件，此处应使用后者）。修正后问题得以解决。

修改源码实现全局注册

ps：下面看下在 Vue 中使用 layer.js 弹出层插件

layer.js (mobile) 是一款小巧便捷的弹出层插件，曾在之前的 apicloud 项目中被大量使用。但最近因对 apicloud 的 IDE、极不友好的文档以及低下的开发效率深感厌烦，决定弃用并转向 Vue 开发。在开发过程中引入 layer.js 时遇到了阻碍，原因是 layer.js 不支持通过 import 语句直接导入，此时需要对其源码进行适当修改。在查阅其源码后，发现仅需修改两处即可。

源码中已经暴露了一个全局变量 layer，因此只需在脚本末尾处添加以下代码：

export default layer;1

这表示将这个全局变量导出。

然后在文件中找到下面的代码注释掉，这段代码是为 layer 添加样式的，但使用的路径不对，故没有太大帮助。

document.head.appendChild(function() {
  var link = doc.createElement('link');
  link.href = path + 'need/layer.css?2.0';
  link.type = 'text/css';
  link.rel = 'styleSheet'link.id = 'layermcss';
  return link;
} ());

接下来把 layer.js 和 layer.css 分别放入 static/js 和 static/css 中，在需要的地方，比如组件内部或者全局注册，因为项目多处都会用到，所以采用全局注册，在 main.js 中

import layer from '../static/js/layer.js'

layer.css 也使用全局注册，它可以放在 index.html 中通过 link 引入，也可以放在 App.vue 中

<!--index.html-->
<link rel="stylesheet" href="./static/css/layer.css" />
<!--或者-->
<!--App.vue-->
<style>
@import "../static/css/layer.css";
</style>

接下来就能在各个组件中使用 layer.open 等方法了。

这种方式应该可以适用于各种不支持 import 导入的脚本，即非 npm 提供的 module。

总结

以上所述是小编给大家介绍的 vue-cli 脚手架引入弹出层 layer 插件的几种方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！