vue之插件 (Plugins)

2024-04-18 04:15:01

Vue插件

vue
通常我们向Vue全局添加一些功能时，会采用插件的模式，它有两种编写方式

对象类型：一个对象，但是必须包含一个 install 的函数，该函数会在安装插件时执行；

函数类型：一个function，这个函数会在安装插件时自动执行；

插件可以完成的功能没有限制，比如下面的几种都是可以的：
1.添加全局方法或者 property，通过把它们添加到 config.globalProperties 上实现;
2.添加全局资源：指令/过滤器/过渡等;
3.通过全局 mixin 来添加一些组件选项

代码演示:

通过插件设置全局属性

对象类型:
main.js

import {createApp
} from 'vue';
import router from './router';
import pluginObject from './02_plugins/plugins/plugins_object.js';
// import pluginFunction from './02_plugins/plugins/plugins_function';
import App from './02_plugins/App.vue';
const app = createApp(App);
app.use(router);
app.use(pluginObject);
// app.use(pluginFunction);
app.mount('#app');

plugins_object.js

export default {install(app, options) {app.config.globalProperties.$name = "trs";}
};

App.vue

<template><div>plugins</div>
</template><script>
import { onMounted, getCurrentInstance } from "vue";
export default {setup() {//vue3中取值 顶层写法也一样onMounted(() => {const instance = getCurrentInstance();console.log("instance.appContext  " +instance.appContext.config.globalProperties.$name);});return {};},mounted() {// vue2中取值console.log("name", this.$name);},
};
</script><style scoped></style>

函数类型
plugins_function.js

export default function (app, options) {app.config.globalProperties.$name = "trs";}

通过插件全局添加指令

plugins_function.js

import dayjs from 'dayjs';
export default function (app, options) {app.config.globalProperties.$name = "trs";
app.directive("format-time", {created(el, bindings) {bindings.formatString = "YYYY-MM-DD HH:mm:ss";if (bindings.value) {bindings.formatString = bindings.value;}},mounted(el, bindings) {const textContent = el.textContent;let timestamp = parseInt(textContent);if (textContent.length === 10) {timestamp = timestamp * 1000;}console.log("timestamp", timestamp);el.textContent = dayjs(timestamp).format(bindings.formatString);}
});
}

App.vue

<template><div>plugins</div><h2 v-format-time="`YYYY/MM/DD`">{{ timestamp }}</h2><h2 v-format-time>{{ timestamp }}</h2>
</template><!-- <script setup> -->
<script>
import { onMounted, getCurrentInstance } from "vue";
export default {setup() {const timestamp = 1624452193;onMounted(() => {const instance = getCurrentInstance();console.log("instance.appContext  " +instance.appContext.config.globalProperties.$name);});return {timestamp,};},mounted() {// vue2中取值console.log("name", this.$name);},
};
</script><style scoped></style>

vue之插件 (Plugins)相关推荐

Vue CLI 插件 Plugins
插件Plugins VUE CLI 是使用是基于插件的体系结构的. 如果检查新创建的项目的 package.json ,我们将发现以 @vue/cli-plugin- 开头的依赖项.插件可以修改内部w ...
IDEA Vue.js插件 2021年1月21日最新
IDEA开发VUE时,需要下载Vue.js插件,但国外的资源有时候很难下下来,可以离线下载插件再安装官网下载地址:https://plugins.jetbrains.com/plugin/9442- ...
[vue] Vue中插件的定义 Vue.use()
功能: 用于增强Vue 通常用来为 Vue 添加全局功能简单案例 plugins.js export default {install(){console.log('@install');} } m ...
实用VUE 开发插件！！前端必备
element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI ...
VSCode 开发Vue必备插件
工欲善其事,必先利其器以下就是开发Vue必备插件: Vetur -- 语法高亮.智能感知.Emmet等包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选 ...
vue 时间回显格式化_VSCode 开发Vue必备插件
1.Vetur -- 语法高亮.智能感知.Emmet等包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着) 2.EsLin ...
VSCode 如何新建vue模板 - 插件引入篇
还在一个代码一个代码的敲打吗? VSCode 如何新建vue模板 ?附图讲解:如何引入插件. 问题: 在哪儿搜索插件? 搜什么名称的插件? 如何安装插件? 解决办法:(上述问题,均如下图所示) 安装完 ...
vscode 开发vue必备插件_vsCode开发vue项目必备插件
VSCode 开发Vue必备插件对于很多使用vscode编写vue项目的新手同学来说,可能不知道使用什么插件,这里简单说一下我常用的几款插件. 1. vetur 实现在 vue 文件中: 语法错误检 ...
（50）Vue Router插件介绍
一.Vue Router插件介绍 Vue Router 是 Vue.js 的官方插件,用来快速实现单页应用. 二.Vue Router学习内容 • 单页应用 • 前端路由 • Vue Router 三 ...

最新文章

热门文章