解决nuxt 自定义全局方法,全局属性,全局变量的问题


Posted in Javascript onNovember 05, 2020

注意 ,这个 在 asyncData 还是不能用的 ,在mounted等其他生命周期里面可以,

asyncData 里因为获取不到this他在组件初始化前执行的,如果找到方法我会继续更新到下一篇博客

好现在说步骤,在plugins 文件夹里新增一个 commom.js名字你自己取

commom.js 测试代码

import Vue from 'vue'
var comsys= {
  install(Vue){
    Vue.prototype.comsys = {
     val:function(val){
     return val
     }
    };
    
  }
}
Vue.use(comsys);

nuxt.config.js里 添加

plugins: 

[
   { src: '~/plugins/commom.js', ssr: false }
],

引用的页面添加

mounted () {  
 alert(this.comsys.val(1)); 
}

恩,这样就行了~

这个是实例方法 其他的属性 对象 可以参考 vue的官网

补充知识:Nuxt项目使用全局变量,函数,混合

当在Nuxt项目使用CSS预处理语言时,很有需要在全局添加变量,函数或者混合,这样子在项目的任何一个地方都可以使用,那怎么做呢?

首先下载@nuxtjs/style-resources

npm install @nuxtjs/style-resources

之后在nuxt.config.js里添加

//.......
 modules: [
  '@nuxtjs/style-resources'
 ],
 styleResources: {
  sass: [],
  scss: [],
  less: [],
  stylus: []
 }
//.......

例如,你的使用stylus预处理语言,你在/asset/css下有个variable.styl变量文件,可以这样

export default {
 modules: ['@nuxtjs/style-resources'],
 styleResources: {
  stylus: './assets/css/variable.styl'
 }
}

这样就在全局引入了变量,如果想引入多个文件可以把路径改为./assets/css/global/*.styl,把你想要全局注入的文件放在global目录下就行了

注意:

这里的路径不能使用~或者@等路径别名

千万不要用这种方式注入真正的样式文件,这种方式仅仅是用来注入变量,函数,混合等声明式内容,而不是真正的样式;如果你那样做,会在每个组件内注入难以控制的全局样式,你会很混乱的

以上这篇解决nuxt 自定义全局方法,全局属性,全局变量的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
javascript中Number的方法小结
Nov 21 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 Javascript
微信小程序实现选项卡滑动切换
Oct 22 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 #Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 #Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 #Javascript
前端vue如何使用高德地图
Nov 05 #Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 #Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 #Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 #Javascript
You might like
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php计算年龄精准到年月日
2015/11/17 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
bootstrap table小案例
2016/10/21 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
详解vue-router基本使用
2017/04/18 Javascript
浅谈node的事件机制
2017/10/09 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
python使用cPickle模块序列化实例
2014/09/25 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
python 除法保留两位小数点的方法
2018/07/16 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
Pycharm调试程序技巧小结
2020/08/08 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
高中班长自我鉴定
2013/12/20 职场文书
小学教师国培感言
2014/02/08 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
刑事案件上诉状
2015/05/23 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android