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下载)
下载后,新建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导致变大了。
推荐阅读
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...
libinfs赞 39阅读 6.2k评论 12
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...
乌柏木赞 41阅读 7.2k评论 6
CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^<...
XboxYan赞 42阅读 2.8k评论 14
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库
XboxYan赞 34阅读 2.3k评论 2
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。