Jquery 尝试将geocomplete添加到Vue js网页包项目
我以前在Vue项目中添加过Geocomplete，但没有使用Webpack。我尝试使用，这需要index.html中的以下内容：Jquery 尝试将geocomplete添加到Vue js网页包项目,jquery,webpack,vue.js,geocomplete,Jquery,Webpack,Vue.js,Geocomplete,我以前在Vue项目中添加过Geocomplete，但没有使用Webpack。我尝试使用，这需要index.html中的以下内容： <script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> <script src="jquery.geocomplete.js"></script> 我得到的信息是： Type
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<script src="jquery.geocomplete.js"></script>
TypeError: __WEBPACK_IMPORTED_MODULE_5_jquery___default(...)(...).geocomplete is not a function
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&key=mykey"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script>
<meta charset="utf-8">
<title>gotta-go</title>
<style ></style>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div>
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="Location">
<el-input id="address-input"></el-input>
</el-form-item>
<el-form-item label="Distance">
<el-slider v-model="form.distance"></el-slider>
</el-form-item>
<el-form-item label="Rating">
<el-rate void-color="rgb(100, 100, 100)" v-model="form.rating"></el-rate>
</el-form-item>
<el-form-item label="special:">
<el-checkbox-group v-model="form.specials">
</el-checkbox-group>
</el-form-item>
</el-form>
</div>
</template>
<script>
import app from './db.js'
import Icon from 'vue-awesome/components/Icon'
import L from 'leaflet'
import Vue2Leaflet from 'vue2-leaflet'
var db = app.database()
var storage = app.storage()
var usersRef = db.ref('users')
var toiletsRef = db.ref('toilets')
var auth = app.auth()
export default {
name: 'app',
components: {
Icon,
'v-map': Vue2Leaflet.Map,
'v-tilelayer': Vue2Leaflet.TileLayer,
'v-marker': Vue2Leaflet.Marker
},
mounted(){
$("#address-input").geocomplete();
},
}
</script>
我试图复制这个问题，但geocomplete工作得很好 我所做的只是： 使用vue cli创建项目。vue init网页包我的项目和npm i。 启用谷歌地图API。 编辑index.html和App.vue，如下所示。 index.html App.vue 结果
您的项目中包括jquery了吗？@EricGuan是的。在我包含它之前，它抱怨没有定义$，所以我知道它被包含了。您是否将jQuery和geoplete作为脚本标记直接包含在index.html文件中？或者只是需要从主应用程序js文件中获取，以便webpack将它们捆绑在一起？@karamarimo我将它们直接包含在index.html文件中。我会发布我的代码…但是根据错误消息，webpack知道jQuery是一个依赖项，对吗？你使用npm安装geocomplete了吗？@DavidJ。不，我没有添加任何软件包。我已将App.vue添加到问题中。我将试着以你为例，看看我是否遇到任何问题。谢谢你的帮助！我按照你的指示从头开始尝试，结果成功了，再次感谢你。@DavidJ。没问题。
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
devtool: '#cheap-module-eval-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})
<template>
<div>
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="Location">
<el-input id="address-input"></el-input>
</el-form-item>
<el-form-item label="Distance">
<el-slider v-model="form.distance"></el-slider>
</el-form-item>
<el-form-item label="Rating">
<el-rate void-color="rgb(100, 100, 100)" v-model="form.rating"></el-rate>
</el-form-item>
<el-form-item label="special:">
<el-checkbox-group v-model="form.specials">
</el-checkbox-group>
</el-form-item>
</el-form>
</div>
</template>
<script>
import app from './db.js'
import Icon from 'vue-awesome/components/Icon'
import L from 'leaflet'
import Vue2Leaflet from 'vue2-leaflet'
var db = app.database()
var storage = app.storage()
var usersRef = db.ref('users')
var toiletsRef = db.ref('toilets')
var auth = app.auth()
export default {
name: 'app',
components: {
Icon,
'v-map': Vue2Leaflet.Map,
'v-tilelayer': Vue2Leaflet.TileLayer,
'v-marker': Vue2Leaflet.Marker
},
mounted(){
$("#address-input").geocomplete();
},
}
</script>
<head>
<meta charset="utf-8">
<title>vue-webpack-playground</title>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&key=MYAPIKEY"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script>
</head>
<template>
<div id="app">
<input type="text">
</div>
</template>
<script>
export default {
name: 'app',
mounted: function () {
$("input").geocomplete();
}
}
</script>