11、插件注入到vue实例中

news2024/9/24 15:23:10

新建插件

nuxt-demo2\plugins\vue-inject.js

import Vue from "vue"

Vue.prototype.$test = function (str) {
    console.log(str)
}

配置插件

nuxt-demo2\nuxt.config.js

export default {
  ...
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    "./plugins/vue-inject.js"
  ],
  ...
}

使用插件

nuxt-demo2\pages\plugin-vue.vue

<template>
    <div>
        
    </div>
</template>

<script>
export default {
    name: 'NuxtDemo2PluginVue',

    data() {
        return {
            
        };
    },

    mounted() {
        this.$test("中华小当家")
    },

    methods: {
        
    },
};
</script>

<style lang="scss" scoped>

</style>

运行结果:
在这里插入图片描述
SSR渲染的路由访问的时候是不需要带#号的,跟vue-rouer的hash要注意区分

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1152187.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

表格识别软件:科技革新引领行业先锋,颠覆性发展前景广阔

表格识别软件的兴起背景可以追溯到数字化和自动化处理的需求不断增加的时期。传统上&#xff0c;手动处理纸质表格是一项费时费力的工作&#xff0c;容易出现错误&#xff0c;效率低下。因此&#xff0c;开发出能够自动识别和提取表格数据的软件工具变得非常重要。 随着计算机…

Xcode运行程序提示 Executable Path is a Directory 问题解决

一、首先运行模拟器报错&#xff08;没有记录&#xff09;&#xff0c;解决办法&#xff1a; TARGET->Build Settings->Architectures -> Exclude Architectures里面填入arm64&#xff0c;后运行模拟器成功 二、其次模拟器开发完成后&#xff0c;xcode运行真机调试&…

canvas:理解canvas / 基础使用 / Demo效果

一、理解Canvas Canvas是一个HTML5元素&#xff0c;用于在Web页面上绘制2D或3D图形。它允许使用JavaScript在网页上创建和操作图形。Canvas的主要功能是绘图&#xff0c;但也可以用来实现其他功能&#xff0c;如动画和交互式游戏。 使用Canvas&#xff0c;可以创建各种形状、…

【AOP进阶】实现重试机制

&#x1f4da;目录 ⚙️简介&#xff1a;✨注解定义&#xff1a;⛳RetryMechanism ⌛编写AOP代码&#xff1a;⚓RetryMechanismAspect 切面 ⛵演示&#xff1a;⛴如何使用RetryMechanism&#xff1a;⚡️正常请求如下&#xff1a;☘️测试异常并且重试&#xff1a;☄️测试异常…

WSL2 Ubuntu安装CUDA Toolkit

目前CUDA ToolKit需要切换到WSL2&#xff0c;在WLS1下不支持。之前折腾了很久&#xff0c;才从WSL1的坑中爬出来&#xff0c;仅写此文避免大家再从坑里走一次。 Windows WSL2相关 检查正在运行的 WSL 版本 可列出已安装的 Linux 发行版&#xff0c;并通过在 PowerShell 或 W…

Android NDK开发详解之ndk-gdb

Android NDK开发详解之ndk-gdb 要求用法选项 线程支持 NDK 包含一个名为 ndk-gdb 的 Shell 脚本&#xff0c;可以启动命令行原生调试会话。偏好使用 GUI 的用户则应阅读在 Android Studio 中调试这篇文档。 要求 要运行命令行原生调试&#xff0c;必须满足以下要求&#xff1…

SDK 消息处理

目录 消息处理 窗口通知消息处理 鼠标消息 键盘消息 绘图消息 WM_PAINT 客户区与非客户区 WM_PAINT消息 BeginPaint && EndPaint 模仿记事本输入字符功能 定时器 消息处理 窗口的过程函数接收到消息后并且进行处理。平时常用的消息以及官方参考文档&#xf…

“ 1+2+N “打造“北斗+智慧城市”,让城市生活更美好

10月31日是世界城市日。世界城市日是联合国首个以城市为主题的国际日&#xff0c;也是第一个由中国政府倡议并成功设立的国际日&#xff0c;出自2010年10月31日上海世博会高峰论坛上发布的《上海宣言》中的倡议。世界城市日秉承了中国2010年上海世博会“城市&#xff0c;让生活…

前端知识与基础应用#2

标签的分类 关于标签我们可以分为 &#xff1a; 单标签&#xff1a;img, br hr 双标签&#xff1a;a&#xff0c;h,div 按照属性可分为&#xff1a; 块儿标签&#xff08;自己独自占一行&#xff09;&#xff1a;h1-h6, p,div 行内&#xff08;内联&#xff09;标签&#xff08…

【1】C语言实现顺序表

文章目录 Ⅰ 概念及结构1. 静态顺序表2. 动态顺序表 Ⅱ 基本操作实现1. 定义顺序表2. 初始化顺序表3. 销毁顺序表4. 输出顺序表5. 扩容顺序表6. 尾插法插入数据7. 头插法插入数据8. 尾删法删除数据9. 头删法删除数据10. 顺序表查找11. 在指定位置 pos 插入数据12. 删除指定位置…

【算法】动态规划之LeetCode 53.最大子数组和

目录 文章目录 **目录**&#x1f4d1;前言1.题目描述2. 动态规划法 &#x1f4d1;文章末尾 &#x1f4d1;前言 本文主要是leetcode题解析&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是青衿&#x1f947; ☁…

联想方案服务斩获CCF技术发明奖,助力云原生技术发展

10月27日&#xff0c;中国计算机学会&#xff08;CCF&#xff09;公布了我国计算机科技领域最具权威性的科技奖项——2023年度“CCF科技成果奖”评选结果&#xff0c;共有41个项目荣获2023年度CCF科技成果奖。由联想集团与上海交通大学等共同研究开发的《面向互联网服务的云原生…

【机器学习合集】模型设计之网络宽度和深度设计 ->(个人学习记录笔记)

文章目录 网络宽度和深度设计1. 什么是网络深度1.1 为什么需要更深的模型浅层学习的缺陷深度网络更好拟合特征学习更加简单 2. 基于深度的模型设计2.1 AlexNet2.2 AlexNet工程技巧2.3 VGGNet 3. 什么是网络宽度3.1 为什么需要足够的宽度 4. 基于宽度模型的设计4.1 经典模型的宽…

错误 LNK1112 模块计算机类型“x64”与目标计算机类型“X86”冲突

这个错误表明你在进行链接时&#xff0c;模块的计算机类型与目标计算机类型冲突。 在这里&#xff0c;“x64”代表64位系统&#xff0c;“X86”代表32位系统。 要解决这个问题&#xff0c;你需要确保你的所有模块&#xff08;包括库文件和依赖项&#xff09;都是与你的目标计…

《算法通关村—队列基本特征和实现问题解析》

《算法通关村—队列基本特征和实现问题解析》 队列的基本特征 队列&#xff08;Queue&#xff09;是一种常见的数据结构&#xff0c;具有以下基本特征&#xff1a; 先进先出&#xff08;FIFO&#xff09;&#xff1a;队列中的元素按照它们被添加到队列的顺序排列&#xff0c;…

Matlab论文插图绘制模板第123期—水平正负柱状图

在之前的文章中&#xff0c;分享了很多Matlab柱状图的绘制模板&#xff1a; 进一步&#xff0c;再来看一种特殊的柱状图&#xff1a;水平正负柱状图。 先来看一下成品效果&#xff1a; 特别提示&#xff1a;本期内容『数据代码』已上传资源群中&#xff0c;加群的朋友请自行下…

人到中年应该怎么交朋友

听人劝、吃饱饭,奉劝各位小伙伴,不要订阅该文所属专栏。 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 跨域学习者,从事过全栈研发、产品经理等工作,现任研发部门 CTO 。荣誉:2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师,“星荐官共赢计…

Doris数据库FE——FeServer

FeServer feServer new FeServer(Config.rpc_port);feServer.start();FeServer&#xff08;Doris frontend thrift server&#xff09;职责是负责FE和BE之间通信。如下即为初始化中关于FeServer类的构造函数和start函数的具体代码。其start函数流程和构建thrift server行为一致…

springboot网上商城购物系统

第1章 绪论 1.1背景及意义 随着社会的快速发展&#xff0c;计算机的影响是全面且深入的。人们生活水平的不断提高&#xff0c;日常生活中人们对网上商城购物系统方面的要求也在不断提高&#xff0c;购物的人数更是不断增加&#xff0c;使得网上商城购物系统的开发成为必需而且…

synchronized 同步锁的思考

经过前面的分析&#xff0c;我们大概对同步锁有了一些基本的认识&#xff0c;同步锁的本质就是实现多线程的互斥&#xff0c;保证同一时刻只有一个线程能够访问加了同步锁的代码&#xff0c;使得线程安全性得到保证。下面我们思考一下&#xff0c;为了达到这个目的&#xff0c;…