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

vue 引入依赖的方法

猜你喜欢