nuxtjs——全局方法组件等挂载

13 篇文章 0 订阅
4 篇文章 0 订阅

nuxt将全局组件以及方法等挂载同意放在了plugins中, 以文件作为区分:
例如,想要在此项目中全局挂载antd,那我需要在plugins下新建一个js文件,文件名随意,暂且叫antd-ui.js吧,里面的内容为:

import Vue from 'vue';
import Antd from 'ant-design-vue/lib';

Vue.use(Antd);

然后需要在nuxt.config.js中配置plugins:

export default {
	plugins: [
		'@/plugins/antd-ui',
	]
}

这样就可以全局使用antd的组件了,我测试了方法也是一样:

plugins下新建methods.js文件
编写methods.js文件:
import Vue from 'vue';

Vue.prototype.$test = function(str) {
	console.log('This is a test plugin public method: ', str);
}
随后在nuxt.config.js中的plugins下添加一项'@/plugins/methods'
随后就可以在项目中使用$test('xx')了
如在页面中的mounted中执行this.$test('xxx');

由此,之前vue的挂载问题也解决了,不由得感慨一句:这文件分类分得我心里好爽!

  • 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、付费专栏及课程。

余额充值