2.0.0-beta.2 • Published 5 years ago
vue-cli-plugin-dolphin-theme v2.0.0-beta.2
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
> api-test@0.1.0 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 皮肤完毕!
输出
样式输出文件目录如下:
2.0.0-beta.2
5 years ago