Tabbar initialization

.editorconfig

@@ -0,0 +1,8 @@
+root =true
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line =lf
+insert_final_newline = true
+trim_traniling_whitespace =true

package.json

@@ -8,7 +8,9 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "path": "^0.12.7",
+    "vue": "^2.6.11",
+    "vue-router": "^2.0.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/App.vue

@@ -1,19 +1,23 @@
 <template>
   <div id="app">
-
+    <mainTabBarbar></mainTabBarbar>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
+import mainTabBarbar from 'components/content/maintabbar/mainTabbar.vue'//使用别名的方式
 
 export default {
   name: 'App',
   components: {
-    
+    mainTabBarbar
   }
 }
 </script>
 
 <style>
 
+@import './assets/css/base.css'
+
 </style>

src/assets/css/base.css

@@ -0,0 +1,58 @@
+@import './normalize.css';
+
+
+/* 获取根元素html */
+:root {
+  /* 以下是为css定义变量 
+    使用变量：font-size: var( --color-text);
+  */
+
+  --color-text:#666;  /* 文字颜色 */
+  --color-hight-text:#ff5777;  /* 高亮 */
+  --color-tiny:#ff8198; /* 着色 */
+  --color-background:#fff;  /*  */
+  --font-size:14px;
+  --line-height:1.5;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+
+}
+
+body {
+  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+  user-select:none;/* 禁止用户鼠标在页面上选中文字、图片等 */
+  -webkit-tap-highlight-color: transparent;/* webkit是苹果浏览器引擎，tap点击，highlign背景高亮，color颜色，颜色用数值调整 */
+  background-color: var(--color-background);
+  color: var(--color-text);
+  /* rem vw/vh */
+  width: 100vw;
+}
+/* 链接初始化 */
+a {
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.clear-fix::after {
+  clear: both;
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  visibility: hidden;
+}
+.clear-fix {
+  zoom: 1;
+}
+.left {
+  float: left;
+}
+.right {
+  float: right;
+}