# 安装
# npm 安装
npm i -S @dolphin-iot/ui 或者 npm i --save @dolphin-iot/ui
1
2
3
2
3
# yarn 安装
yarn add @dolphin-iot/ui
1
2
3
2
3
# 升级组件库
- 使用 cnpm install -S + 模块name + 版本号，推荐使用cnpm,此处使用npm在部分版本下有问题。
# 升级到最新版本
cnpm install -S @dolphin-iot/ui@latest
# 升级到指定版本，例如：
npm install -S @dolphin-iot/ui@ + 指定的版本号
# 例如使用0.1.0版本
npm install -S @dolphin-iot/ui@0.1.0
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# npm 使用
// main.js
import Vue from 'vue'
import App from './App.vue'
import DolphinUI from '@dolphin-iot/ui
import '@dolphin-iot/ui/dist/minixui.css'
DolphinUI.install(Vue)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 按需加载 （推荐方式）
借助 webpack npm 模块 , 可以只引入需要的组件， 达到减少项目体积的目的。首先安装 @dolphin-iot/babel-plugin-component：
# 安装按需加载模块
npm install --save-dev @dolphin-iot/babel-plugin-component
1
2
3
2
3
# 配置 babel.config.js:
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'@dolphin-iot/babel-plugin-component',
{
librayName: '@dolphin-iot/ui',
librayDirectory: 'dist/packages',
style: 'scss',
},
],
],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
vue.config.js VueCLI 3 配置方式
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `
@import "@dolphin-iot/ui/dist/styles/index.scss";
`,
},
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
在dolphin template 工程中引入组件：
import Vue from 'vue'
import {Button, Switch, Cell} from '@dolphin-iot/ui'
import '@dolphin-iot/ui/dist/minixui.css'
Vue.use(Button)
Vue.use(Switch)
Vue.use(Cell)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# hello world
<template>
<div class="app">
<h3> {{title}} </h3>
<mx-button size="super">超大型按钮</mx-button>
</div>
</template>
<script>
export default {
data:()=> ({
title: 'hello, world!'
})
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Color 颜色 →