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导入即可使用

Logo

前往低代码交流专区

更多推荐