diff --git a/examples/App.vue b/examples/App.vue
index d8d18bb3f2f30a153e5e36bf66b455e711f92cc0..fe5ef379ec4b1a294cc0f33481364498634c5445 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -2,7 +2,7 @@
   <div id="app">
     <router-link class="link" v-for="item in $router.getRoutes()" :key="item.name" :to="item.path">{{item.name}}</router-link>
     <router-view/>
-    <button class="return-btn" @click="$router.back()">返回</button>
+<!--    <button class="return-btn" @click="$router.back()">返回</button>-->
   </div>
 </template>
 
diff --git a/examples/images/chart-bar-active.png b/examples/images/chart-bar-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..80be708f71f837c32b0be77fbd135f46325f6c94
Binary files /dev/null and b/examples/images/chart-bar-active.png differ
diff --git a/examples/images/chart-bar.png b/examples/images/chart-bar.png
new file mode 100644
index 0000000000000000000000000000000000000000..60802b23a15e63333340ff5e54fec63c564079b9
Binary files /dev/null and b/examples/images/chart-bar.png differ
diff --git a/examples/images/code-active.png b/examples/images/code-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..933f92c1b8a2f94ac744ef9868f1cfed9ef0aaea
Binary files /dev/null and b/examples/images/code-active.png differ
diff --git a/examples/images/code.png b/examples/images/code.png
new file mode 100644
index 0000000000000000000000000000000000000000..7fd94af1a78527832929ad855a015d9b96dfc694
Binary files /dev/null and b/examples/images/code.png differ
diff --git a/examples/images/history-active.png b/examples/images/history-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..139b0ee1643aa0cd83b136b112200c7f5fa70d42
Binary files /dev/null and b/examples/images/history-active.png differ
diff --git a/examples/images/history.png b/examples/images/history.png
new file mode 100644
index 0000000000000000000000000000000000000000..73ae3a9187ef959e9a1e3ac153dc1d06741aac91
Binary files /dev/null and b/examples/images/history.png differ
diff --git a/examples/images/home-active.png b/examples/images/home-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b991d6a3687ea115d91e1b82a7414bf65004f23
Binary files /dev/null and b/examples/images/home-active.png differ
diff --git a/examples/images/home.png b/examples/images/home.png
new file mode 100644
index 0000000000000000000000000000000000000000..4274b196f0eae0a6b6dabefbc69de90a7e0e5aaa
Binary files /dev/null and b/examples/images/home.png differ
diff --git a/examples/images/more-active.png b/examples/images/more-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..5258d0d6111a32b42418492235334a6c6f25942b
Binary files /dev/null and b/examples/images/more-active.png differ
diff --git a/examples/images/more.png b/examples/images/more.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc08f40d0e37d203717232c69cf70ab7291b5c8b
Binary files /dev/null and b/examples/images/more.png differ
diff --git a/examples/views/tabBar-views/chart.vue b/examples/views/tabBar-views/chart.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1b8303ac272021135bb4ea3f98ff0de0528981be
--- /dev/null
+++ b/examples/views/tabBar-views/chart.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>图表</div>
+</template>
+
+<script>
+export default {
+  name: "chart"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/examples/views/tabBar-views/code.vue b/examples/views/tabBar-views/code.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a272898ce38f65d73a27adad14f0ccb2dfdd0ca9
--- /dev/null
+++ b/examples/views/tabBar-views/code.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>我爱打代码</div>
+</template>
+
+<script>
+export default {
+  name: "code"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/examples/views/tabBar-views/history.vue b/examples/views/tabBar-views/history.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cd5fc0f79fa75ead5e1a81058807dc85d47a4cb9
--- /dev/null
+++ b/examples/views/tabBar-views/history.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>历史记录</div>
+</template>
+
+<script>
+export default {
+  name: "history"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/examples/views/tabBar-views/index.vue b/examples/views/tabBar-views/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..753da8c7bfc6542119976042639124ef6f09af2e
--- /dev/null
+++ b/examples/views/tabBar-views/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>首页</div>
+</template>
+
+<script>
+export default {
+  name: "index"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/examples/views/tabBar-views/more.vue b/examples/views/tabBar-views/more.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e3653b986a8c4b2be37b8d9cb32ed1fd18f47e80
--- /dev/null
+++ b/examples/views/tabBar-views/more.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>更多</div>
+</template>
+
+<script>
+export default {
+  name: "more"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/examples/views/yqm-tabBar-example.vue b/examples/views/yqm-tabBar-example.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ce569cd8a4f94b9daa85e4ceb43ea36420e3781f
--- /dev/null
+++ b/examples/views/yqm-tabBar-example.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <component :is="curPage"/>
+    <yqm-tabBar @change="changePage" background-color="white" color="black" selected-color="red" :list="list"/>
+  </div>
+</template>
+
+<script>
+export default {
+name: "yqm-tabBar-example",
+  data:()=>({
+    list: [
+      {
+        pageComponent: () => import('./tabBar-views/chart'),
+        text:'图表',
+        iconPath: require('../images/chart-bar.png'),
+        selectedIconPath: require('../images/chart-bar-active.png')
+      },
+      {
+        pageComponent: () => import('./tabBar-views/index'),
+        text: '首页',
+        iconPath: require('../images/home.png'),
+        selectedIconPath: require('../images/home-active.png')
+      },
+      {
+        pageComponent: () => import('./tabBar-views/history'),
+        text: '历史记录',
+        iconPath: require('../images/history.png'),
+        selectedIconPath: require('../images/history-active.png')
+      },
+      {
+        pageComponent: () => import('./tabBar-views/more'),
+        text: '更多',
+        iconPath: require('../images/more.png'),
+        selectedIconPath: require('../images/more-active.png')
+      },
+      {
+        pageComponent:() => import('./tabBar-views/code'),
+        text: '代码',
+        iconPath: require('../images/code.png'),
+        selectedIconPath: require('../images/code-active.png')
+      },
+    ],
+    curPage: null
+  }),
+  methods:{
+    changePage(e){
+      this.curPage = e
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/packages/utils/index.js b/packages/utils/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e914a063a9f1ac924c176e7f65b169653303da8d
--- /dev/null
+++ b/packages/utils/index.js
@@ -0,0 +1,5 @@
+import * as basic from './modules/basic'
+
+export default {
+    ...basic
+}
diff --git a/packages/utils/modules/basic.js b/packages/utils/modules/basic.js
new file mode 100644
index 0000000000000000000000000000000000000000..0cd5ad9fa90a060cfc8cfcc4a484ea3ef34d142b
--- /dev/null
+++ b/packages/utils/modules/basic.js
@@ -0,0 +1,89 @@
+/**
+ * 判断是否为数字
+ * @param n
+ * @returns {boolean}
+ */
+export const isNumber = (n) => !isNaN(parseFloat(n)) && isFinite(n);
+
+/**
+ * 判断是否为数组
+ * @param obj
+ * @returns {boolean}
+ */
+export const isArray = (obj) => Object.prototype.toString().call(obj) === '[object Array]';
+
+/**
+ * 判断是否为空数组
+ * @param arr
+ * @returns {boolean}
+ */
+export const isArrayEmpty = (arr) => !(arr && isArray(arr) && arr.length > 0);
+
+/**
+ * 判断数据类型
+ * @param val - 基本类型数据或者引用类型数据
+ * @returns {string|*|"undefined"|"object"|"boolean"|"number"|"string"|"function"|"symbol"|"bigint"}
+ */
+export const getType = (val) => {
+	//判断数据是null和undefined两种情况
+	if (val == null){
+		return val + '';
+	}
+
+	return typeof(val) === 'object'?Object.prototype.toString().call(val).slice(8,-1).toLowerCase() : typeof(val);
+};
+
+/**
+ * 数字每千位加逗号
+ * @param num
+ * @returns {string}
+ */
+export const commafy = (num) => num && num.toString().replace(/\d+/,s=>s.replace(/(\d)(?=(\d{3})+$)/g,'$1,'));
+
+/**
+ * 解析url中的参数
+ * @param url
+ * @returns {Object}
+ */
+export const parseUrl = url => {
+
+	function getRawUri(url) {
+		const raw = decodeURIComponent(url);
+
+		if (raw === url) {
+			return raw;
+		}
+
+		return getRawUri(raw);
+	}
+
+	const a = document.createElement('a');
+
+	a.href = url;
+	const { hash } = a;
+	const { search } = a;
+	const param = {};
+	let query = '';
+
+	if (hash) {
+		query = hash.replace(/(#.*\?)|(#\/)/g, '');
+	}
+
+	if (search) {
+		query = [query, search.replace(/^\?/g, '')].join(query.length ? '&' : '');
+	}
+
+	if (query) {
+		query.split('&').forEach(item => {
+			const [key, value] = item.split('=');
+
+			if (key && value) {
+				param[getRawUri(key)] = getRawUri(value);
+			}
+		});
+
+		return param;
+	}
+
+	return {};
+};
diff --git a/packages/yqm-tabBar/index.js b/packages/yqm-tabBar/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f10a7ef6166ec8d954fd6f7cff3abc5e4cdf3939
--- /dev/null
+++ b/packages/yqm-tabBar/index.js
@@ -0,0 +1,7 @@
+import yqmTabBar from './src/yqm-tabBar'
+
+yqmTabBar.install = (Vue) => {
+    Vue.component(yqmTabBar.name, yqmTabBar)
+}
+
+export default yqmTabBar
diff --git a/packages/yqm-tabBar/src/yqm-tabBar.vue b/packages/yqm-tabBar/src/yqm-tabBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2596a93deb864e340733f92c8ab992ac2ea7f454
--- /dev/null
+++ b/packages/yqm-tabBar/src/yqm-tabBar.vue
@@ -0,0 +1,145 @@
+<template>
+  <div
+    class="yqmTabBar"
+    :style="{
+      backgroundColor,
+      borderTop: `${borderStyle} 1px solid`,
+      height: calcResponsivePx(height)
+    }"
+  >
+    <div
+        class="tabBar-item"
+        v-for="(item,index) in list"
+        :key="index"
+        @click="current = index">
+      <div
+          class="item-icon"
+          :style="{
+            width: calcResponsivePx(iconWidth)
+          }"
+      >
+        <img :src="item.selectedIconPath" v-show="index === current"/>
+        <img :src="item.iconPath" v-show="index !== current"/>
+      </div>
+      <div
+          class="item-title"
+          :style="{
+            color: index === current ? selectedColor : color,
+            fontSize: calcResponsivePx(fontSize),
+            marginTop: calcResponsivePx(spacing)
+          }"
+      >
+        {{item.text}}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {styleApplyMixin} from "../../mixins";
+
+export default {
+  name: "yqm-tabBar",
+  mixins: [styleApplyMixin],
+  /**
+   * tabBar配置项大部分与uni-app相同
+   * https://uniapp.dcloud.io/collocation/pages?id=tabbar
+   *
+   */
+  props:{
+    color: {
+      type: String,
+      required: true
+    },
+    selectedColor: {
+      type: String,
+      required: true
+    },
+    backgroundColor: {
+      type: String,
+      required: true
+    },
+    borderStyle: {
+      type: String,
+      default: '#cacaca',
+    },
+    list: {
+      type: Array,
+      required: true,
+      validator: (t) => t.every(obj=>Object.keys(obj).includes('pageComponent') && Object.keys(obj).includes('text')) && t.length <= 5
+    },
+    fontSize: {
+      type: [String,Number],
+      default: '16'
+    },
+    iconWidth: {
+      type: [String,Number],
+      default: '48'
+    },
+    spacing: {
+      type: [String,Number],
+      default: '3'
+    },
+    height: {
+      type: [String,Number],
+      default: '100'
+    }
+  },
+  data: () => ({
+    current: undefined
+  }),
+  watch: {
+    current: {
+      handler: 'handleChange',
+    }
+  },
+  methods:{
+    handleChange(v){
+      this.$emit('change',this.list[v].pageComponent)
+    }
+  },
+  mounted() {
+    this.current = 0
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .yqmTabBar{
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100vw;
+    //height: 100px;
+    //border-top: #cacaca 1px solid;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    .tabBar-item{
+      height: 100%;
+      width: 100px;
+      //border: black 1px solid;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      .item-icon{
+        //width: 48px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .item-title{
+        //font-size: 16px;
+      }
+    }
+  }
+</style>