• nuxt中定制iview主题颜色


    由于项目需要,设计稿中大量使用的 #FE0101 红色色值。

    iView默认色值为天空蓝,所以为了避免大量修改色值,在nuxt中修改iview主题色很有必要。

    iView官网给出的方案是用变量来覆盖的思路,覆盖主题颜色。

    step1:在nuxt项目中添加index.less文件:

    内容如下:

    这段代码首先引入了iview的原有样式文件,然后用新的变量颜色覆盖。

    下面的操作很自然就是在使用iView组件之前将我们创建的index.less引入:

    step2:引入我们创建的index.less:

    注释部分是原有的iview.css,使用的是默认的样式,现在改为引入我们新创建的index.less。

    nuxt中使用iView,仅仅写了上面iview.js代码,上面代码是没有执行的,需要将其配置到nuxt的pulgins插件中,配置在该插件中的插件,会在实例化vue.js前执行。

    step3:将ivew.js添加到plugins配置项中(在nuxt中使用插件时都需要这么做):

    由于我们使用了less,需要安装less,less-loader

    step4:安装less,less-loader(该步骤不分先后,在之前安装过了也行)

    简单说下 -save-dev 与 -save 的区别:

    -save-dev:将模块安装到dev环境下的依赖库中,在生产模式下是不需要这个模块的,比如:less,处理后的生产环境变为css文件。

    -save:将模块安装到生产环境下的依赖库中,在生产模式下需要该模块的,比如:express


    安装完毕后尝试run一下项目:

    less ^3.0版本以上会报该错误,需要在构建时启用 javascriptEnabled:

    step5:启用javascriptEnabled:

    再次启动项目即可。

    联系作者: VX:Mm_Lewis
  • 相关阅读:
    读INI文件的类
    [导入].net,C#,Ftp各种操作,上传,下载,删除文件,创建目录,删除目录,获得文件列表等
    [导入]Sending email with c# using SMTP Servers
    [导入]Writing an ActiveX control with .Net
    C#基础之Dom笔记8
    韩顺平Java笔记内容简纳
    文本文件的检索
    ASP之vbscript笔记1
    数据库原理整理笔记1
    linux课程笔记2(崔老师)
  • 原文地址:https://www.cnblogs.com/lewis-messi/p/10346115.html
Copyright © 2020-2023  润新知