@gdkf/cli-theme

主题生成工具.

当前版本仅支持 [email protected] ， [email protected] 系列不支持主题生成；

Installation

全局安装脚手架

npm i @gdkf/cli-theme -g

安装主题包

npm i @gdkf/theme-terminal-v2 -D

CLI

# 初始化变量文件
kt --init [file path]

# 生成主题
kt [--config variable file path] [--out theme path]

Options

config

Variable file path（变量文件路径）, default ./kamfu-variables.scss.

out

Theme output path（生成的主题路径）, default ./theme.

Examples

安装依赖

# 全局安装主题生成工具
npm i @gdkf/cli-theme -g

# 安装开发依赖-主题包
npm i @gdkf/theme-terminal-v2 -D

# 安装生产依赖-组件库（2.6.*）
npm i kfui-terminal

在项目中应用

在[email protected]中使用

• 执行kt --init指令初始化变量文件，默认会在项目根目录生成./kamfu-variables.scss文件

  # 初始化变量文件
  kt --init

• 修改./kamfu-variables.scss文件中的主题对应的颜色值

• 执行kt指令生成主题，默认会在项目根目录中生成./theme主题文件夹

  # 生成主题
  kt

• 在main.js引入生成的主题css

  // 引入elementUI,不需要引入element-ui的css文件
  import Element from 'element-ui'
  import Viewer from 'viewerjs'
  import 'viewerjs/dist/viewer.css'
  import { TweenLite } from 'gsap'
  import KamfuUI from 'kfui-terminal'
  // import 'kfui-terminal/lib/theme-chalk/index.css' // 默认主题
  import '../theme/index.css' // 引入生成的主题包，主题包位置可自行存放
  
  
  Vue.prototype.$Viewer = Viewer
  Vue.prototype.$TweenLite = TweenLite
  
  Vue.use(Element)
  Vue.use(KamfuUI)
  

License

MIT