iview4使用CDN加载后使用定制主题的方法

iview4使用CDN加载

index.html(href与src里面的地址可以替换成对应cdn地址)

<head>
  <link href="./lib/iview/styles/iview.css" rel="stylesheet" />
</head>

<body>
  <script src="./lib/iview/iview.min.js"></script>
</body>

vue.config.js

module.exports = {
  configureWebpack: {
    externals: {
      'view-design': 'iview',
      iview: 'ViewUI',
    }
  }
}

使用定制主题

由于是使用cdn引入iview,所以官网的下面这种方式就不可以用了。

@import '~view-design/src/styles/index.less';

// Here are the variables to cover, such as:
@primary-color: #8c0776;

我们要手动把iview项目里面的styles文件夹的文件放到自己的项目里面(去iview4的GitHub下载)
image.png
下载后,新建iview_change.less文件,把官网引入代码修改为(具体引入地址为自己项目下iview的styles文件夹地址)

@import '~@/dil/iViewUI/styles/index.less';

// Here are the variables to cover, such as:
@primary-color: #8c0776;

最后引入iview

import Vue from 'vue'
import ViewUI from 'view-design'
import '@/css/iview_change.less'

Vue.use(ViewUI, {
  transfer: true
})

做完上面的操作后,iview4使用cdn加载后应该可以正常的使用定制主题了。你的项目打包文件再也不用带上iview导致变大了。

宅一宅、睡一睡、打打代码

12 声望
0 粉丝
0 条评论
推荐阅读
NuxtJS的Vuex,$store为undefined的问题-BUG解决与吐槽
尝试把公司官网项目改为Nuxt的ssr,在迁移vuex过程中,发现$store为undefined的问题。基底文件layouts/index.vue里面有这段代码,结果输出为undefined 'store'

悠哉悠哉阅读 669

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木143阅读 12k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木41阅读 7.2k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.3k评论 2

封面图

宅一宅、睡一睡、打打代码

12 声望
0 粉丝
宣传栏