解决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 相关文章推荐
新鲜出炉的js tips提示效果
Apr 03 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 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
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
Python单例模式实例详解
2017/03/01 Python
python 中的int()函数怎么用
2017/10/17 Python
python3爬取数据至mysql的方法
2018/06/26 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
更新修改后的Python模块方法
2019/03/03 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
小学生学习雷锋倡议书
2014/05/15 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
倡议书的格式写法
2015/04/28 职场文书
Python机器学习之基础概述
2021/05/19 Python
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技