vue 引入依赖的方法

news/2024/7/24 14:26:07 标签: 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导入即可使用


http://www.niftyadmin.cn/n/1162560.html

相关文章

SpringMVC 第六章 模型数据

Spring MVC 提供了以下几种途径输出模型数据 1.ModelAndView: 处理方法返回值类型为ModelAndView时&#xff0c;方法体即可通过该对象添加模型数据 既包含视图信息&#xff0c;也包含模型数据信息。 ModelAndView中包含两个添加数据模型的方法&#xff1a; …

es6 Async / Await

async/awaitf这种特殊的语法可以更舒适地与promise协同工作。 async-await是promise和generator的语法糖。 async-await 是建立在 promise机制之上的&#xff0c;并不能取代其地位。 Async的使用&#xff1a; 使用方法&#xff1a; 放置在函数的前面&#xff1a;async fu…

vuex Action

Action 类似于 mutation&#xff0c;不同在于&#xff1a; 注意&#xff1a;Action&#xff1a;可以异步&#xff0c;但不能直接操作State。操作state的方法全部依靠commit mutation完成 Action 提交的是 mutation&#xff0c;而不是直接变更状态。 Action…

vuex 实战 模板可套用 格式可套用

vuex.vue format: import { resolve } from "dns"; import { reject } from "q";const test {// 共享数据源 datastate: {userinfo: {},userList: [],departmentInfo: {},departmentList: [],sum: 0,substract: 0,multiply: 0,divide: 0,countPartA: 0,c…

vuex Module

由于使用单一状态树&#xff0c;应用的所有状态会集中到一个比较大的对象。 当应用变得非常复杂时&#xff0c;store 对象就有可能变得相当臃肿。 为了解决以上问题&#xff0c;Vuex 允许将 store 分割成模块&#xff08;module&#xff09;。 每个模块拥有自己的 state、mutat…

js map()定义与用法

基本用法跟forEach方法类似 map() 方法返回一个新数组&#xff0c;数组中的元素为原始数组元素调用函数处理后的值。 map() 方法按照原始数组元素顺序依次处理元素。 注意&#xff1a; map() 不会对空数组进行检测。 注意&#xff1a; map()返回的是新…

vue 引入公共样式的三种方法

1、在入口js文件main.js中引入&#xff0c;一些公共的样式文件&#xff0c;可以在这里引入。 import Vue from vue import App from ./App // 引入App这个组件 import router from ./router /* 引入路由配置 */ import axios from axios import ../static/css/global.css /*引…

vue-router push / replace / go 区别

this.$router.push()说明&#xff1a;跳转到不同的url&#xff0c;但这个方法会向history栈添加一个记录&#xff0c;点击后退会返回到上一个页面。实例&#xff1a;this.$router.push({name: routerName})this.$router.replace说明&#xff1a;同样是跳转到指定的url&#xff…