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"
            })
        ]

//安装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
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以通过以下步骤在vue-quill-editor中添加撤销键功能栏: 1. 首先,确保您已经安装了vue-quill-editor和quill这两个依赖。 2. 在您的Vue组件中,引入vue-quill-editor并在模板中使用它: ```javascript <template> <div> <vue-quill-editor v-model="content"></vue-quill-editor> </div> </template> <script> import VueQuillEditor from 'vue-quill-editor'; export default { components: { VueQuillEditor, }, data() { return { content: '', }; }, }; </script> ``` 3. 创建一个自定义的工具栏按钮,以添加撤销功能。在Vue组件的`mounted`生命周期钩子函数中,通过获取Quill实例来注册自定义按钮: ```javascript <script> import VueQuillEditor from 'vue-quill-editor'; import Quill from 'quill'; export default { components: { VueQuillEditor, }, data() { return { content: '', }; }, mounted() { this.$nextTick(() => { const toolbar = this.$refs.myQuillEditor.quill.getModule('toolbar'); toolbar.addHandler('undo', () => { this.$refs.myQuillEditor.quill.history.undo(); }); }); }, }; </script> ``` 4. 更新模板,将`ref`属性添加到vue-quill-editor组件上,以便在Vue组件中引用该组件的实例。将自定义的按钮添加到工具栏中: ```javascript <template> <div> <vue-quill-editor v-model="content" ref="myQuillEditor"> <div class="quill-toolbar-container"> <span class="ql-formats"> <button class="ql-undo">Undo</button> </span> </div> </vue-quill-editor> </div> </template> ``` 现在,您的vue-quill-editor应该具有撤销键功能栏。用户可以通过点击撤销按钮来撤消最近的更改。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值