解决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 相关文章推荐
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
windows下python安装pip图文教程
2018/05/25 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
python使用KNN算法识别手写数字
2019/04/25 Python
Python实现FM算法解析
2019/06/18 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
python 异步async库的使用说明
2020/05/04 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
网上祭先烈心得体会
2014/09/01 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python