Vue-cli引入Zepto.js

本文介绍了在Vue-cli项目中引入Zepto.js的过程及解决控制台报错的方法。通过使用webpack配置并结合exports-loader和script-loader,实现了Zepto.js的正确加载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

------- 注: 必须安装完成后再执行npm run dev 生效------

Vue-cli引入Zepto.js过程以及报错解决

按照引入Jquery的方式引入Zepto之后控制台报错如下:

TypeError: Cannot read property ‘createElement’ of undefined

在网上查阅了一下相关资料发现大致原因如下:

只使用了 AMD 规范的模块导出方法 define,没有用 CommonJs 规范的方法 module.exports 来导出模块,不过这不是造成报错的原因。

原文链接:https://sebastianblade.com/how-to-import-unmodular-library-like-zepto/

webpack需要做以下修改才能正常使用Zepto.js

步骤修改
1需要下载先 npm install –save-dev script-loader exports-loader
2使用loader模块化加载Zepto.js

webpack配置示例:

// webpack.config
{
  // ...
  module: {
    loaders: [{
      test: require.resolve('zepto'),
      loader: 'exports-loader?window.Zepto!script-loader'
    }]
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

页面入口文件中引入zepto.js就可以了

// entry.js
import $ from 'zepto'
  • 1
  • 2

如果需要全局引入可以采用引入jquery的方式以webpack插件的形式引入

可能在这里有很多同学就发现webpack的配置文件和vue-cli中的webpack.base.conf.js还是有点区别的,我在这里贴出webpack.base.conf的相关配置

{
    // ...
    module: {
        rules: [
                //...
                {
                    test: require.resolve('zepto'),
                    loader: 'exports-loader?window.Zepto!script-loader'
                }
        ]
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

如果需要全局引入可以在main.js中

import $ from 'zepto'
  • 1

或者在webpack.conf.base.js中

  plugins: [
      new webpack.ProvidePlugin({
            $: 'zepto',
            Zepto: 'zepto'
      }),
  ],
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
`vue-cli-service.js` 是由 Vue CLI 创建的一个脚本文件,它是 Vue CLI 构建工具的核心部分。Vue CLI 是一个用于构建 Vue.js 应用程序的脚手架工具集,帮助开发者快速创建新项目,同时提供了一系列自动化任务,如打包、测试、服务器部署等。 在 `vue-cli-service.js` 文件中,你会看到一系列与 Vue CLI 功能相关的函数和模块导入,这些功能包括但不限于: - 启动开发服务器 (`serve`): 这个功能允许你启动一个热加载的开发服务器,以便在编辑代码时自动刷新浏览器视图。 - 构建生产环境应用程序 (`build`): 此功能负责将源代码打包成适用于生产环境的静态资源,优化性能并移除开发时的调试代码。 - 执行测试 (`test`): 提供了一套自动化测试框架,如 Jest 或 Mocha,帮助开发者编写和运行单元测试。 - 发布网站 (`gh-pages`): 将项目部署到 GitHub Pages 上,方便分享给他人预览或使用。 - 更新项目版本 (`update`): 自动检测和应用新版本的 VueVue CLI 的补丁更新。 - 开发模式 (`dev-server`) 和生产模式 (`prod-server`) 的支持: 分别针对开发和生产的环境提供定制化的服务。 `vue-cli-service.js` 是一个可执行脚本,可以通过在终端中输入命令 `.\\vue-cli-service.cmd` 来执行 Vue CLI 的各项任务。这使得用户能够通过简单的命令行指令来控制项目的构建流程,无需深入了解底层的脚本结构和复杂配置。 总之,`vue-cli-service.js` 是 Vue CLI 工具箱的灵魂所在,它整合了多种功能来简化前端 Web 开发过程,让开发者能够专注于构建高质量的 Vue.js 应用程序而无需过多关注基础基础设施的细节。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值