nuxt 全局css_解决nuxt 自定义全局方法,全局属性,全局变量的问题

注意，这个在 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 自定义全局方法,全局属性,全局变量的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

时间： 2020-11-03

nuxt 全局css_解决nuxt 自定义全局方法,全局属性,全局变量的问题相关推荐

springboot springmvc 抛出全局异常解决方法
springboot springmvc 抛出全局异常解决方法参考文章: (1)springboot springmvc 抛出全局异常解决方法 (2)https://www.cnblogs.com/ ...
Vue（组件间通信：props、自定义事件、全局事件总线、消息订阅与发布）
一.props props不仅可以实现父给子传递信息,还可以进行子给父传递信息 1.父给子传递信息: 父组件中给子组件实例传递信息子组件利用props进行接收组件传递信息(接收方式有三种:数组.对象 ...
vue 添加全局组件_自定义vue2.0全局组件（下篇）
在上篇中,老K为大家介绍了一个初级自定义按钮组件的编写方法.虽然能用,但是还不算完美,可扩展性不够强大.在这一篇中,老K继续为大家完善这个按钮组件. 启动命令窗口, 进入在上篇中我们搭建的vue目录中 ...
vue 自定义指令 directive 全局 directives 局部 inserted update
vue 自定义指令需求效果全局 - 自定义指令代码局部 - 自定义指令代码自定义命令传值效果代码问点需求获取标签,扩展额外的功能效果全局 - 自定义指令代码 // mai ...
RestControllerAdvice作用及原理---自定义异常处理（全局异常处理）
前言一直想开发一个功能比较强大的项目,但是一直没有动手,最近终于有点时间来折腾它了.由于时隔两年没有接触前端了,所以需要一个小项目先练练手感.等这个项目完工之后在着手搞一个大工程.都说好记星不如烂笔 ...
自定义 GUID（全局唯一标识符）
文章目录 GUID JS 实现自定义 GUID GUID 全局唯一标识符(GUID)是一种通过算法生成的标识符,典型的,是通过生成二进制长度为 128 位的数字标识符来作为 GUID, 这样的 GU ...
tp3 跨域_tp6 通过全局中间件解决跨域问题
tp6 通过全局中间件解决跨域问题2020-09-14 03:23:32 tp6官网有提供跨域决绝方法,当我直接使用无法用.(可能我用的姿势不对).定义中间件<?php declare (st ...
解决nuxt.js新建项目报错的问题
解决nuxt.js新建项目报错的问题参考文章: (1)解决nuxt.js新建项目报错的问题 (2)https://www.cnblogs.com/blueroses/p/8651827.html 备 ...
在Android中自定义捕获Application全局异常，可以替换掉系统的强制退出对话框（很有参考价值与实用价值）
在Android中自定义捕获Application全局异常,可以替换掉系统的强制退出对话框(很有参考价值与实用价值) 参考文章: (1)在Android中自定义捕获Application全局异常,可以 ...

nuxt 全局css_解决nuxt 自定义全局方法,全局属性,全局变量的问题

nuxt 全局css_解决nuxt 自定义全局方法,全局属性,全局变量的问题相关推荐

最新文章

热门文章