vue 引入依赖的方法
1.网络引用1.1 在vue的入口页面index.html中引入网络文件例如:<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>1.2 在根目录下的build/webpack.base.conf.js中的module.exports配置导出
1.网络引用
1.1 在vue的入口页面index.html中引入网络文件
例如:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
1.2 在根目录下的build/webpack.base.conf.js中的module.exports配置导出对象
例如:
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
'BMap': 'BMap',
'BMAP_NORMAL_MAP': 'BMAP_NORMAL_MAP',
'BMAP_HYBRID_MAP': 'BMAP_HYBRID_MAP',
'BMAP_ANCHOR_TOP_RIGHT': 'BMAP_ANCHOR_TOP_RIGHT',
'BMAP_ANCHOR_BOTTOM_RIGHT': 'BMAP_ANCHOR_BOTTOM_RIGHT',
'BMapLib': 'BMapLib',
},
******
}
1.3 在需要的页面进行局部引用
例如:
在test.vue进行引用使用,需要使用哪些模块引入哪些模块
一定记住需要在mounted钩子函数里面操作API 因为地图需要在所以的dom树加载完毕后才能操作
import BMap from 'BMap'
2.本地化引用
将远程js文件down成本地js文件,放置在js文件存放的公共目录下
改造需要映入的外部js文件
将需要操作的对象以 export default xxx 的格式在js文件的最后导出
然后在需要使用的页面将对象导入即可
例如:
test.js 定义
let utili = {}
util.fun = function () {...}
export default util
test.vue 使用
import { util } from '@/views/jsModel/test.js'
之后就可以使用util的fun方法进行逻辑处理了。
3.第三方库引用
以引入jquery为例说明
3.1 安装插件 npm install jquery --save
3.2 在webpack.base.conf.js里加入 var webpack = require("webpack")
3.3 在module.exports的最后加入
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
//安装axios依赖
cnpm install axios -S
//在main.js对axios进行全局配置使用
const axios = require('axios') //加载
Vue.prototype.$axios = axios //开放接口方法
//在vue结尾的例子中使用
this.$axios({
method:'get',
url:"这里是接口地址"
}).then(function(res){
console.log('这里是第一个接口请求成功', res,'首页数据==>>')
});
4.插件引用
使用npm安装插件后,按照不同的插件使用文档进行操作使用
一般情况是在main.js中引入即可全局使用
或者在局部页面进行import导入即可使用
更多推荐
所有评论(0)