解决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无限树状列表实现代码
Jan 11 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
浅谈js中的this问题
Aug 31 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
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
url decode problem 解决方法
2011/12/26 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
js点击选择文本的方法
2015/02/09 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
Python的ORM框架SQLObject入门实例
2014/04/28 Python
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
python dlib人脸识别代码实例
2019/04/04 Python
pywinauto自动化操作记事本
2019/08/26 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
技术人员面试提纲
2013/11/28 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
银行求职自荐书
2014/06/25 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
公司员工管理制度
2015/08/04 职场文书
旷工检讨书大全
2015/08/15 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
大学军训心得体会800字
2016/01/11 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
Python集合的基础操作
2021/11/01 Python