解决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实现的一个include函数
Jul 21 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
AngularJS 教程及实例代码
Oct 23 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 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实现异步操作的研究
2013/02/03 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
JS面向对象编程详解
2016/03/06 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
python 判断网络连通的实现方法
2018/04/22 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
python生成特定分布数的实例
2019/12/05 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python