创建一个baseVue基类，维护公共属性，继承子类可以直接获取，无需每个地方都需要写

src/components/Camera/index.vue

@@ -19,12 +19,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+import { Component, Prop } from "vue-property-decorator";
 import { CameraItem } from "./data";
 import Icon from "@/components/Icon/index.vue";
+import BaseVue from "@/types/baseVue";
 
 @Component({ components: { Icon } })
-export default class Camera extends Vue {
+export default class Camera extends BaseVue {
   @Prop() private cameraItem!: CameraItem;
 
   showCarmera = true;

src/components/DogInfo/index.vue

 <template>
-  <div class="dog">
-    <div class="dog-info">
+  <div :class="`${prefixCls}-dog`">
+    <table>
+      <tbody>
+        <tr>
+          <td class="td-img" rowspan="6">
             <div class="dog-img">
               <img :src="dog.picture" alt />
             </div>
-      <div class="dog-data">
-        <div class="row">
+          </td>
+          <td>
             <div class="col-left">识别开始时间</div>
-          <div class="col">{{ dog.beginTime }}</div>
-        </div>
-        <div class="row">
+          </td>
+          <td>
+            <div>{{ dog.beginTime }}</div>
+          </td>
+        </tr>
+        <tr>
+          <td>
             <div class="col-left">识别结束时间</div>
-          <div class="col">{{ dog.endTime }}</div>
-        </div>
-        <div class="row">
+          </td>
+          <td>
+            <div>{{ dog.endTime }}</div>
+          </td>
+        </tr>
+        <tr>
+          <td>
             <div class="col-left">识别时长</div>
-          <div class="col">{{ dog.totalTime }}</div>
-        </div>
-        <div class="row">
+          </td>
+          <td>
+            <div>{{ dog.totalTime }}</div>
+          </td>
+        </tr>
+        <tr>
+          <td>
             <div class="col-left">是否牵狗绳</div>
-          <div class="col">{{ dog.isHand ? "是" : "否" }}</div>
-        </div>
-        <div class="row">
+          </td>
+          <td>
+            <div>{{ dog.isHand ? "是" : "否" }}</div>
+          </td>
+        </tr>
+        <tr>
+          <td>
             <div class="col-left">品种</div>
-          <div class="col">{{ dog.dogType }}</div>
-        </div>
-        <div class="row none-border-bottom">
+          </td>
+          <td>
+            <div>{{ dog.dogType }}</div>
+          </td>
+        </tr>
+        <tr>
+          <td>
             <div class="col-left">毛色</div>
-          <div class="col">{{ dog.hairColor }}</div>
-        </div>
-      </div>
-    </div>
+          </td>
+          <td>
+            <div>{{ dog.hairColor }}</div>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="3">
             <div class="dog-footer">
               <a v-on:click="play">
                 <Icon name="bofang" iconClass="icon-player" />
                 <span>播放</span>
               </a>
             </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+import { Component, Prop } from "vue-property-decorator";
 import { DogData } from "./data";
 import Icon from "@/components/Icon/index.vue";
+import BaseVue from "@/types/baseVue";
 
 @Component({ components: { Icon } })
-export default class DogInfo extends Vue {
+export default class DogInfo extends BaseVue {
   @Prop() private dog: DogData;
 
   play(): void {
@@ -56,51 +87,48 @@ export default class DogInfo extends Vue {
 </script>
 
 <style lang="scss">
-.dog {
-  border: $border-color;
-  margin-bottom: 10px;
-  background-color: black;
+.#{$prefixCls}-dog {
   font-size: 12px;
   font-weight: 700;
-  .none-border-bottom {
-    border-bottom: 0 !important;
+  .td-img {
+    width: 120px;
   }
-  .dog-info {
-    display: flex;
   .dog-img {
     width: 100px;
+    height: 100px;
     padding: 10px;
     img {
       width: 100%;
-        height: 100%;
     }
   }
-    .dog-data {
-      flex: 1;
-      .row {
-        display: flex;
-        border-bottom: $border-color;
-        .col-left {
-          width: 120px;
-          text-align: center;
-          border-right: $border-color;
-          border-left: $border-color;
-          height: 20px;
-          line-height: 20px;
+  table {
+    width: 100%;
+    margin-bottom: 10px;
+    border-collapse: collapse;
   }
-        .col {
-          flex: 1;
-          padding-left: 8px;
+
+  table,
+  th,
+  td {
+    border: $border-color;
   }
+
+  td {
+    div {
+      height: 20px;
+      line-height: 20px;
+      text-align: left;
+      padding-left: 10px;
     }
   }
+  .col-left {
+    text-align: center;
   }
   .dog-footer {
     height: 30px;
     line-height: 30px;
     text-align: center;
     color: #0079fe;
-    border-top: $border-color;
     a {
       cursor: pointer;
       text-decoration: none;

src/layout/compoments/menu.vue

@@ -14,14 +14,15 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component } from "vue-property-decorator";
 import { MenuItem } from "../data";
 import Icon from "@/components/Icon/index.vue";
 import { MENU_CURRENT_PATH_KEY, CLICK_HOME_PAGE_EVENT } from "@/utils/constant";
 import eventBus from "@/utils/eventBus";
+import BaseVue from "@/types/baseVue";
 
 @Component({ components: { Icon } })
-export default class Menu extends Vue {
+export default class Menu extends BaseVue {
   currentPath = "/";
 
   created(): void {
@@ -35,10 +36,6 @@ export default class Menu extends Vue {
     });
   }
 
-  get prefixCls(): string {
-    return process.env.VUE_APP_PRE_CSS;
-  }
-
   get getMenus(): MenuItem[] {
     const { routes } = this.$router.options;
     if (!routes) return [];

src/layout/main.vue

@@ -5,12 +5,9 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component } from "vue-property-decorator";
+import { Component } from "vue-property-decorator";
+import BaseVue from "@/types/baseVue";
 
 @Component({})
-export default class Main extends Vue {
-  get prefixCls(): string {
-    return process.env.VUE_APP_PRE_CSS;
-  }
-}
+export default class Main extends BaseVue {}
 </script>

src/layout/nav.vue

@@ -13,17 +13,14 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component } from "vue-property-decorator";
+import { Component } from "vue-property-decorator";
 import Menu from "./compoments/menu.vue";
 import { MENU_CURRENT_PATH_KEY, CLICK_HOME_PAGE_EVENT } from "@/utils/constant";
 import eventBus from "@/utils/eventBus";
+import BaseVue from "@/types/baseVue";
 
 @Component({ components: { Menu } })
-export default class Nav extends Vue {
-  get prefixCls(): string {
-    return process.env.VUE_APP_PRE_CSS;
-  }
-
+export default class Nav extends BaseVue {
   handleClick(): void {
     sessionStorage.setItem(MENU_CURRENT_PATH_KEY, "/");
     eventBus.$emit(CLICK_HOME_PAGE_EVENT);

src/types/baseVue.ts

+import { Vue } from 'vue-property-decorator'
+
+export default class BaseVue extends Vue {
+  get prefixCls(): string {
+    return process.env.VUE_APP_PRE_CSS;
+  }
+}
\ No newline at end of file

src/views/dashboard/index.vue

@@ -26,14 +26,10 @@ import Camera from "@/components/Camera/index.vue";
 import { DashBoardData } from "./data";
 import DogInfo from "@/components/DogInfo/index.vue";
 import Search from "@/components/Camera/search.vue";
+import BaseVue from "@/types/baseVue";
 
 @Component({ components: { Camera, DogInfo, Search } })
-export default class Dashboard extends Vue {
-  get prefixCls(): string {
-    return process.env.VUE_APP_PRE_CSS;
-  }
-
-  //#region data
+export default class Dashboard extends BaseVue {
   data(): DashBoardData {
     return {
       cameras: [

src/views/sysSetting/index.vue

@@ -41,15 +41,12 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component } from "vue-property-decorator";
 import { getCamera } from "@/service/CameraService";
+import BaseVue from "@/types/baseVue";
 
 @Component({})
-export default class SysSetting extends Vue {
-  get prefixCls(): string {
-    return process.env.VUE_APP_PRE_CSS;
-  }
-
+export default class SysSetting extends BaseVue {
   cameraData = [];
 
   created(): void {