vue2:plugins(自定义插件)

简介: vue2:plugins(自定义插件)

plugins(自定义插件)

首先在src目录下创建一个plugins.js中写入(如下:)


plugins.js:

exportconstlqj={
install(Vue){
console.log('lqj666')
alert('111111111')          
                }
        }

结果:一件页面就会弹出111111111,以及控制台中打印lqj666


·下面是给vue原型添加一个方法(此方法vm,vc都可用!)

·Vue.prototype.hello = () =>{alert('nihao')}


举例:

plugins.js:

exportconstlqj={
install(Vue){
Vue.prototype.hello= () =>{alert('nihao')}
                                }
                        } 

下面同样是在main.js中使用自定义的插件


main.js:

...import {lqj} from'./plugins'...Vue.use(lqj)
// 创建vmnewVue({
render: h=>h(App),
                }).$mount('#app')

既然是给vue原型添加的方法,所以我们可以在任何一个组件中使用,(SchoolLqj.vue为例):


SchoolLqj.vue

template:

<template><div><button@click="dianji">点击我显示nihao</button></div></template>

script:

<script>exportdefault {
...methods:{
dianji(){
this.hello()
                                        }
                        }
...                }
</script>


结果:点击button按钮后弹出nihao

目录
相关文章
|
JavaScript 前端开发
vue项目打包
vue项目打包
60 0
|
3月前
|
开发框架 移动开发 JavaScript
好玩儿的vue插件
本文列举并简要介绍了一些有趣和实用的Vue插件,涵盖了UI组件库、开发框架、实用库、服务端框架和辅助工具等多个类别,为Vue开发者提供了丰富的资源选择。
|
3月前
|
JavaScript 开发工具
vite如何打包vue3插件为JSSDK
【9月更文挑战第10天】以下是使用 Vite 打包 Vue 3 插件为 JS SDK 的步骤:首先通过 `npm init vite-plugin-sdk --template vue` 创建 Vue 3 项目并进入项目目录 `cd vite-plugin-sdk`。接着,在 `src` 目录下创建插件文件(如 `myPlugin.js`),并在 `main.js` 中引入和使用该插件。然后,修改 `vite.config.js` 文件以配置打包选项。最后,运行 `npm run build` 进行打包,生成的 `my-plugin-sdk.js` 即为 JS SDK,可在其他项目中引入使用。
102 6
|
5月前
|
JavaScript
vue 下载插件downloadjs
vue 下载插件downloadjs
66 1
|
5月前
electron-vue 常用配置
electron-vue 常用配置
34 0
|
7月前
|
缓存 资源调度 JavaScript
如何通过 Vue CLI 打包 Vue3 项目?
如何通过 Vue CLI 打包 Vue3 项目?
477 0
如何通过 Vue CLI 打包 Vue3 项目?
|
存储 JavaScript API
vue3中Pinia的使用之plugins
vue3中Pinia的使用之plugins
vue3中Pinia的使用之plugins
|
JavaScript 前端开发 开发者
Vue.js插件(Plugins):扩展Vue应用的功能与生态系统
Vue.js是一款流行的JavaScript框架,提供了许多内置功能来构建交互式的Web应用程序。然而,有时候,您可能需要引入额外的功能或第三方库来满足特定需求。这就是Vue.js插件的用武之地。在本博客中,我们将深入研究Vue.js插件的概念、创建方法、常见用途以及如何利用插件来扩展Vue应用的功能与生态系统。
276 0
|
JavaScript
Vue自定义插件
Vue自定义插件
|
JavaScript
Vue自定义插件的使用
Vue自定义插件的使用