Vue-cli引入Zepto.js
2018-03-09 09:11
281 查看
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.config { // ... module: { loaders: [{ test: require.resolve('zepto'), loader: 'exports-loader?window.Zepto!script-loader' }] } }
页面入口文件中引入zepto.js就可以了
// entry.js import $ from 'zepto'
如果需要全局引入可以采用引入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' } ] } }
如果需要全局引入可以在main.js中
import $ from 'zepto'
或者在webpack.conf.base.js中
plugins: [ new webpack.ProvidePlugin({ $: 'zepto', Zepto: 'zepto' }), ],
如有问题可以加我QQ进行交流,QQ:1197983391
相关文章推荐
- Vue-cli项目中引入外部/第三方css/js/less文件具体步骤
- vuejs第二篇 vue-cli配置移动端自适配(引入flexible)
- webpack+vue-cli项目中引入外部非模块格式js的方法
- vue2.0 使用vue-cli搭建的项目如何在index.html里引入静态css和js
- vue-cli项目中单文件组件引入bootstrap.js异常的解决方案
- (vue.js)vue-cli构建,scss文件引入本地css意外报错
- vue-cli引入zepto
- Vue-cli构建项目, 组件中js代码引入图片路径问题
- vue-cli中js是怎样引入html的?
- Vue-cli项目中,引入css、js或者引入组件,检查后未发现错误,npm红叉报错原因
- 学习vue-cli时需要引入外部js库文件(如jquery)的问题,百度后解决了,再次备忘一下
- Android studio 引入 weex 中由.vue打包的.js文件,ReferenceError: Vue is not defined错误
- vue-cli+webpack引入jQuery
- vue-cli中引入jquery
- vue.js学习10之动手使用vue-cli搭建项目及生成的代码进行修改练手
- vue.js的安装--vue-cli脚手架
- vue中引入远程的js文件
- Vue.js项目引入less文件报错解决
- vue-cli webpack全局引入jquery
- 解决vue-cli npm run build之后vendor.js文件过大的问题