快速上手
本节将介绍如何在项目中使用 dolphin-weex-ui以及如何使用COLMO设计风格的组件样式
新建项目中使用 dolphin-weex-ui
使用 dolphin-weex-cli 初始化项目，新项目中已经集成了dolphin-weex-ui，命令如下
npm install -g dolphin-weex-cli
mkdir my-project && cd my-project
dolphin init webpack
1
2
3
2
3
旧项目中使用 dolphin-weex-ui
安装 dolphin-weex-ui，命令如下
npm install -S dolphin-weex-ui
1
使用COLMO设计风格的组件样式
dolphin-weex-ui组件默认是美居风格的样式，想要使用COLMO设计风格样式的组件样式，需要:1、dolphin-weex-ui版本在2.X.X版本以上，接入 weex 一键换肤工具
2、使用的主题设置为 colmo
const WeexThemePlugin = require('@dolphinweex/weex-theme/lib/plugin')
module.exports = {
...
plugins: [
new WeexThemePlugin({
themes: ['colmo'], // 可使用的主题数组
default: 'colmo' // 默认使用的主题（可为空，为空即不使用主题）
})
],
...
};
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
3、（可选）如果存在多种COLMO风格样式，则需要设置根主题
const WeexThemePlugin = require('@dolphinweex/weex-theme/lib/plugin')
module.exports = {
...
plugins: [
new WeexThemePlugin({
themes: ['colmo-1.0', 'colmo-2.0'], // 可使用的主题数组
default: 'colmo-2.0', // 默认使用的主题（可为空，为空即不使用主题）
root: 'colmo' // 指定默认主题的根主题
})
],
...
};
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
← 按需加载 1.1 颜色（Color） →