iview_blackui 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
iview_blackui 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发网页组件
开发厂商
地区 国产
提 交 者 JMan_Kyzg
适用人群 未知
收录时间 2020-10-23

软件简介

iview_blackui 是一个 IView 暗黑风格主题构建工程,由于 IView 本身的主题配置方案还是基于白色底色为主,需要配置出暗黑系的主题风格还是比较麻烦的。

本工程默认已经配置好了暗黑色系的风格主题,覆盖IView的所有组件,目前只实现了iview3.x的暗黑风格配置,4.x后续会更新。

工程截图:

输入图片说明

输入图片说明

输入图片说明

输入图片说明

输入图片说明

软件架构

  • 基于vue-cli构建的基于vue2.x的工程项目
  • 使用iview官方推荐的iview-theme工具进行皮肤源码的初始化与打包构建

安装教程

运行如下命令安装相关依赖包并启动项目,如果您只需要构建出皮肤的CSS样式文件,可以直接调到使用说明

// 安装依赖包
yarn install

// 启动工程
yarn serve

注意:启动过程有可能会因为本地安装的node版本过高(12+)造成启动异常,建议使用nvm安装node 11.15.0,然后切换使用的node版本再进行启动。

使用说明

  1. 工程已经默认创建暗黑风格的主题源码,位于目录src/assets下的black_3x文件夹中,如果有其他配置需要,可以直接编辑custom.less文件中的相关变量,

  2. 打包主题:命令行工具进入black_3x目录,运行如下命令进行主题的打包

iview-theme build -o dist/
  • 注意:如果在打包中报如下错误
fs.js:36
} = primordials;
    ^

ReferenceError: primordials is not defined
    at fs.js:36:5
    at req_ (/Users/huangjian/.config/yarn/global/node_modules/natives/index.js:143:24)
    at Object.req [as require] (/Users/huangjian/.config/yarn/global/node_modules/natives/index.js:55:10)
    at Object.<anonymous> (/Users/huangjian/.config/yarn/global/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)

说明你的node版本过高,可以使用nvm安装11.15.0版本的node(nvm可以进行node的多版本管理,具体使用方法请前往:https://www.runoob.com/w3cnote/nvm-manager-node-versions.html 查阅)

参考资料

  1. iview3.x官网:http://v3.iviewui.com/docs/guide/theme

友情连接

本项目由PageNow数据可视化技术团队开发,PageNow官网:http://www.pagenow.cn/

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表于大前端专区
2017/10/27 22:57

iView

iView 主要服务于 PC 界面的中后台业务,是一套高质量的开源 UI 组件库

0
0
发表于大前端专区
2018/08/16 18:43

iView admin

简介   iView admin是基于Vue.js,搭配使用iView UI组件库形成的一套后台集成解决方案,由TalkingData前端可视化团队部分成员开发维护。iView admin遵守iView设计和开发约定,风格统一,设计考究,并且更多功能...

0
2
发表了博客
2019/05/06 09:29

iView 发布后台管理系统 iview-admin

简介 iView Admin 是基于 Vue.js,搭配使用 iView UI 组件库形成的一套后台集成解决方案,由 TalkingData 前端可视化团队部分成员开发维护。iView Admin 遵守 iView 设计和开发约定,风格统一,设计考究,并且更多功能在不停开发中。 没错,这就是大家期待已久的 admin 了,这么漂亮好用的系统,是不是可以给个 Star 鼓励...

0
0
发表了博客
2019/03/23 15:44

IView 使用

1.手动更新Menu菜单当前子菜单所在的菜单项以及选中当前项 <Menu ref="navBar" :theme="theme2" width="auto" :open-names="open" :active-name="activeName" :accordion="accordion" @on-select="chooseState"> <Submenu name="1"> <template slot="title"> <Icon type="ios-people" ...

0
0
发表了博客
2018/01/18 21:25

iview 使用笔记

一、在单文件组件中如何重载iview中的样式?无法重载iview中的样式? <style lang="sass" scoped> /* 添加 scoped 后样式将被锁定在当前组件,因此无法覆盖原iview样式, 解决方式: 1/不使用 scoped(不推荐), 2/再建一个 style 标签 ,vue单文件组件中是允许定义多...

0
0
发表了博客
2019/02/27 11:39

iview安装使用

iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。 安装 cd 项目 cnpm install iview -S 在项目中引入iview 在入口文件main.js中配置 import iView from 'iview' import 'iview/dist/styles/iview.css' Vue.use(iView) 官网示例 <template> <div class="MyIviewDemo"> <h1...

0
0
发表了博客
2018/10/19 15:21

iview 表单相关

view表单验证的步骤: 第一步:给 Form 设置属性 rules :rules 第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步:注意:Form标签里面是 :model 第四步:注意:在Form标签里面必须添加 ref,相当于id,在此范围内的表单验证有效 第五步:在操作保存按钮时,添加方法,对整个表单进...

0
0
发表了博客
2018/06/07 13:39

iview 的事件绑定

iview 内的组件样式是不错,有时候我们想用它且绑定某个事件: 比如,我们使用了步骤条组件(Steps),然后绑定点击事件,实现每次点击某个步骤条内的step 就显示此step的具体信息, 1 <Steps :current = "current"> 3 <Step title="title" :content="codetime[0]" @click="clicked(1)"></Step...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
3 收藏
分享
返回顶部
顶部