vue-cli-plugin-dolphin-theme

vue-cli3 海豚项目皮肤切换插件

安装

首先确认自己的npm仓库源为 http://af.hikvision.com.cn/artifactory/api/npm/npm-isms/，如果不是则执行下面命令

npm config set registry  http://af.hikvision.com.cn/artifactory/api/npm/npm-isms/

然后执行以下命令安装插件

vue add dolphin-theme

配置

皮肤相关配置在 vue.congfig.js 中，例如：

module.exports = {
  publicPath: 'aaa',
  runtimeCompiler: true,
  pluginOptions: {
    easy_theme: {
      themes: [
        {
          'name': 'red',
          'custom': {
            'hui': {
              'primary-color': '#e72528'
            },
            'common': {
              'primary-color': '#e72528'
            }
          }
        }, {
          'name': 'blue',
          'custom': {
            'hui': {
              'primary-color': '#2080f7'
            },
            'common': {
              'primary-color': '#2080f7'
            }
          }
        }
      ],
      widgets: [{
        'name': 'hui',
        'path': './src/assets/sass/theme-ui/index.scss',
        'pre': 'scss'
      }, {
        'name': 'common',
        'path': './src/assets/less/demo/index.less',
        'pre': 'less'
      }]
    }
  }
}

插件配置在vue.config.js中的插件配置字段（pluginOptions）内，插件字段名为easy_theme，总共有两个配置项：themes和widgets。

themes

themes配置项是一个包含所有主题配置的数组，主题配置如下：

| 字段名 | 默认值 | 备注 | | ------ | ------ | -------------------------------------- | | name | 必填 | 主题名，用英文字母、下划线、连接线组成 | | custom | - | 自定义配置，可选 |

widgets

widgets配置项是一个数组，包含了所有需要切换皮肤的组件配置，配置如下：

| 字段名 | 默认值 | 备注 | | ------ | ------ | -------------------------------------- | | name | 必填 | 组件名，用英文字母、下划线、连接线组成 | | path | 必填 | 组件入口样式入口文件 | | pre | 必填 | 样式预处理器，目前仅支持less和scss |

运行

插件运行命令为：

vue-cli-service renderSkin

如果运行失败，请先将皮肤切换命令添加进package.json中的script中，如下所示:

{
  "name": "api-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service e2e --file test/e2e/specs",
    "easymock": "easymock init",
    "render": "vue-cli-service renderSkin"
  }
 }

然后再运行 npm run render执行。

结果

运行结果如下：

PS F:\project\test (待删)\api-test> npm run render

> [email protected] render F:\project\test (待删)\api-test
> vue-cli-service renderSkin

Hash: 50ced6107c942cf0e50a
Version: webpack 4.29.5
Time: 4468ms
Built at: 2019-02-25 15:54:40
           Asset      Size  Chunks             Chunk Names
       index.css  41 bytes       0  [emitted]  main
temp_del_main.js  3.63 KiB       0  [emitted]  main
Entrypoint main = index.css temp_del_main.js

渲染 red 皮肤完毕！
Hash: 50ced6107c942cf0e50a
Version: webpack 4.29.5
Time: 4476ms
Built at: 2019-02-25 15:54:40
           Asset      Size  Chunks             Chunk Names
       index.css  41 bytes       0  [emitted]  main
temp_del_main.js  3.63 KiB       0  [emitted]  main
Entrypoint main = index.css temp_del_main.js

渲染 blue 皮肤完毕！
Hash: b1fd497cb312287c5bfe
Version: webpack 4.29.5
Time: 18355ms
Built at: 2019-02-25 15:54:54
             Asset      Size  Chunks             Chunk Names
 fonts/h-icons.eot  36.1 KiB          [emitted]
 fonts/h-icons.svg   135 KiB          [emitted]
 fonts/h-icons.ttf    36 KiB          [emitted]
fonts/h-icons.woff    36 KiB          [emitted]
         index.css   206 KiB       0  [emitted]  main
  temp_del_main.js  3.63 KiB       0  [emitted]  main
Entrypoint main = index.css temp_del_main.js

渲染 blue 皮肤完毕！
Hash: b1fd497cb312287c5bfe
Version: webpack 4.29.5
Time: 18388ms
Built at: 2019-02-25 15:54:54
             Asset      Size  Chunks             Chunk Names
 fonts/h-icons.eot  36.1 KiB          [emitted]
 fonts/h-icons.svg   135 KiB          [emitted]
 fonts/h-icons.ttf    36 KiB          [emitted]
fonts/h-icons.woff    36 KiB          [emitted]
         index.css   206 KiB       0  [emitted]  main
  temp_del_main.js  3.63 KiB       0  [emitted]  main
Entrypoint main = index.css temp_del_main.js

渲染 red 皮肤完毕！

输出

样式输出文件目录如下：