zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    jsp第二次作业
    jsp第一个作业
    Android应用程序开发
    第十次作业
    int和Integer比较详解
    com.sun.tools.jar下载失败
    JDK1.7和JDK1.8自由切换
    解析excel
    django 2.0配置url捕获参数
    python使用pymysql链接mysql数据库实现增删改查
  • 原文地址:https://www.cnblogs.com/lewis-messi/p/10346115.html
Copyright © 2011-2022 走看看