Vue-cli引入Zepto.js
Posted wlphyl
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue-cli引入Zepto.js相关的知识,希望对你有一定的参考价值。
------- 注: 必须安装完成后再执行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引入Zepto.js的主要内容,如果未能解决你的问题,请参考以下文章
Zepto.js touch,tap增加 touch模块深入分析