解决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 相关文章推荐
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
Node.js 回调函数实例详解
Jul 06 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
js正则取值的结果数组调试方法
Oct 10 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
CURL状态码列表(详细)
2013/06/27 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
php简单统计中文个数的方法
2016/09/30 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
Python遍历目录的4种方法实例介绍
2015/04/13 Python
使用Python生成url短链接的方法
2015/05/04 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
详解python3中tkinter知识点
2018/06/21 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
婚前协议书范本
2014/10/27 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
2015年财政局工作总结
2015/05/21 职场文书