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

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的挂载问题也解决了,不由得感慨一句:这文件分类分得我心里好爽!

上一篇:前端遇到的业务实现


下一篇:清除React项目运行时控制台无用的警告