解决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 相关文章推荐
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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
PHP函数utf8转gb2312编码
2006/12/21 PHP
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
python实现查询IP地址所在地
2015/03/29 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Python判断telnet通不通的实例
2019/01/26 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
美国最大点评网站:Yelp
2018/02/14 全球购物
Solaris操作系统的线程机制
2015/07/28 面试题
物流专业大学的自我评价
2014/01/11 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
管理提升方案
2014/06/04 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
微信小程序调用python模型
2022/04/21 Python
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS