nuxt全局方法

准备

在plugins目录下新建utils.js文件

// 全局方法
import Vue from 'vue'let
let utils = {
    install(Vue) {
        Vue.prototype.$say = function(){
            console.log('I love you');
        };
        Vue.prototype.$she = 'lijianhua'
    }
}
Vue.use(utils);
注册

在nuxt.config.js的plugins字段下注册

 plugins: [
    '@/plugins/element-ui',
    '@/plugins/axios',
    '@/plugins/utils'
  ],
使用
this.$say();
console.log(this.$she);
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Nuxt.js 3 中,全局注册组件是一个常用的功能,它允许你在整个应用中复用组件,而无需每个页面或组件单独引入。这有助于保持代码组织和减少重复。以下是全局注册组件的步骤: 1. **安装并引入**:首先确保你已经安装了 Nuxt 3(使用 `npm install nuxt` 或者 `yarn add nuxt`),然后在项目的根目录下创建一个名为 `components` 的文件夹。 2. **创建组件**:在 `components` 文件夹下创建一个 `.vue` 文件,定义你的全局组件。例如: ```html <template> <div> <h1>My Global Component</h1> <p>{{ message }}</p> </div> </template> <script> export default { props: { message: { type: String, required: true, }, }, }; </script> ``` 3. **在 `nuxt.config.js` 配置**:在 Nuxt 配置文件中,你需要设置 `components` 配置项,告诉 Nuxt 这个文件夹里的所有 `.vue` 文件都是全局可用的。添加以下代码: ```js export default defineNuxtConfig({ // ... components: [ { path: '~/components', filename: 'index.vue' }, // 或者 'glob' 如果你希望导入整个文件夹 ], }); ``` - `path` 指定了组件的路径相对于 `components` 文件夹。 - `filename` 可以是单个组件文件名(如 `index.vue`),也可以是 `'glob'` 表示导入整个文件夹中的所有 .vue 文件。 4. **使用组件**:现在在你的任何页面、组件或布局中,都可以直接使用这个全局组件了: ```html <template> <MyGlobalComponent :message="greetingMessage" /> </template> <script> import MyGlobalComponent from '@/components/MyGlobalComponent.vue'; export default { components: { MyGlobalComponent, }, data() { return { greetingMessage: 'Hello, World!', }; }, }; </script> ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值