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配置导出对象
    例如:
        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"
            })
        ]
4.插件引用
    使用npm安装插件后,按照不同的插件使用文档进行操作使用
    一般情况是在main.js中引入即可全局使用
    或者在局部页面进行import导入即可使用

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值