增加全屏显示图表功能

echarts-screen/package-lock.json

@@ -7339,7 +7339,8 @@
     "lodash": {
       "version": "4.17.15",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+      "dev": true
     },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
@@ -9985,11 +9986,6 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
-    "resize-detector": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.1.10.tgz",
-      "integrity": "sha512-iLcXC8A6Fb0DfA+TRiywrK/0A22bFqkhntjMJMEzXDA4XkcEkfwpNbv7W8iewUiD0xYIaeiXOfiEehTqGKsUFw=="
-    },
     "resolve": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
@@ -10312,6 +10308,11 @@
         "ajv-keywords": "^3.4.1"
       }
     },
+    "screenfull": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.1.0.tgz",
+      "integrity": "sha512-dYaNuOdzr+kc6J6CFcBrzkLCfyGcMg+gWkJ8us93IQ7y1cevhQAugFsaCdMHb6lw8KV3xPzSxzH7zM1dQap9mA=="
+    },
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@@ -11910,16 +11911,6 @@
       "integrity": "sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ==",
       "dev": true
     },
-    "vue-echarts": {
-      "version": "5.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-5.0.0-beta.0.tgz",
-      "integrity": "sha512-QZFKGXDAYFQo+F20REpzcdLx79nsl4kOorJRpN+08aYq4YiIlmtWss1Lxadm7Fo+NYyWm8nnT+h4xHv3uqWIDQ==",
-      "requires": {
-        "core-js": "^3.4.4",
-        "lodash": "^4.17.15",
-        "resize-detector": "^0.1.10"
-      }
-    },
     "vue-eslint-parser": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz",

echarts-screen/package.json

@@ -8,7 +8,9 @@
   },
   "dependencies": {
     "core-js": "^3.6.4",
+    "screenfull": "^5.1.0",
     "vue": "^2.6.11",
+    "vue-fullscreen": "^2.1.6",
     "vue-router": "^3.1.6",
     "vue-seamless-scroll": "^1.1.21",
     "vuex": "^3.2.0"

echarts-screen/src/assets/styles/base.scss

@@ -1,10 +1,4 @@
 @charset "utf-8";
-/*
- *  描述: 基本样式
- *  作者：Jack Chen
- *  时间：2020-04-18
- */
-
 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
   margin: 0;
   padding: 0;

echarts-screen/src/assets/styles/common.scss

@@ -1,10 +1,4 @@
 @charset "utf-8";
-/*
- *  描述: 动画组件通用样式
- *  作者：Jack Chen
- *  时间：2020-04-18
- */
-
 .wrap-container {
   position: absolute;
   overflow: hidden;
@@ -218,4 +212,4 @@
 }
 .odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-digital .odometer-digit + .odometer-digit {
   margin-left: 0.1em;
-}
+}

echarts-screen/src/components/CityRank.vue

@@ -1,27 +1,31 @@
 <template>
-  <div class="CityRank-container">
-    <div class="chart" id="chart_left1"></div>
-  </div>
+    <div class="CityRank-container" id="cityrank">
+        <div class="chart" id="chart_left1"></div>
+    </div>
 </template>
 
 <script>
-export default {
-  name: "CityRank",
-  data() {
-    return {}
-  },
-  mounted() {
-    this.getEchartLeft1();
-  },
-  methods: {
-    getEchartLeft1() {
-      // 实例化对象
-      let myChart = echarts.init(document.getElementById('chart_left1'));
-      let charts = { // 按顺序排列从大到小
-        cityList: ['湖北', '香港', '广东', '湖南', '四川', '浙江', '上海'],
-        cityData: [68149, 8300, 2035, 1020, 843, 1300, 1473],
-        function(p) {
-          return p.name + ":" + this.cityData(p.value);
+    import screenfull from "screenfull";
+
+    export default {
+        name: "CityRank",
+        data() {
+            return {
+                fullscreen: false
+            }
+        },
+        mounted() {
+            this.getEchartLeft1();
+        },
+        methods: {
+            getEchartLeft1() {
+                // 实例化对象
+                let myChart = echarts.init(document.getElementById('chart_left1'));
+                let charts = { // 按顺序排列从大到小
+                    cityList: ['湖北', '香港', '广东', '湖南', '四川', '浙江', '上海'],
+                    cityData: [68149, 8300, 2035, 1020, 843, 1300, 1473],
+                    function(p) {
+                        return p.name + ":" + this.cityData(p.value);
         }
       }
 
@@ -62,26 +66,47 @@ export default {
 
       // 指定配置和数据
       let option = {
-        color: color,
-        tooltip: {
-          trigger: 'item',
-        },
-        grid: {
-          borderWidth: 0,
-          top: '5%',
-          left: '2%',
-          right: '2%',
-          bottom: '0%',
-          containLabel: true
-        },
-        xAxis: [{
-          type: 'value',
-          axisTick: {
-            show: false
+          toolbox: {
+              feature: {
+                  mytool: {
+                      show: true,
+                      title: "全屏",
+                      icon: 'path://M181 357.5V181.2h176.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c0-14.3-11.6-25.9-25.9-25.9H118c-11 0-20 9-20 20v239.4c0 14.3 11.6 25.9 25.9 25.9H155c14.4-0.1 26-11.7 26-26.1zM668.6 181.2H845v176.4c0 14.3 11.6 25.9 25.9 25.9H902c14.3 0 25.9-11.6 25.9-25.9V118.2c0-11-9-20-20-20H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 26 25.9 26zM357.4 845.2H181V668.8c0-14.3-11.6-25.9-25.9-25.9H124c-14.3 0-25.9 11.6-25.9 25.9v239.4c0 11 9 20 20 20h239.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c-0.1-14.4-11.7-26-26-26zM845 668.8v176.4H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 25.9 25.9 25.9H908c11 0 20-9 20-20V668.8c0-14.3-11.6-25.9-25.9-25.9H871c-14.4 0-26 11.6-26 25.9z',
+                      onclick: function () {
+                          const element = document.getElementById('chart_left1');
+                          if (!screenfull.isEnabled) {//判断是否支持全屏
+                              this.$message({
+                                  message: '您的浏览器暂时不支持全屏切换',
+                                  type: 'warning'
+                              })
+                              return false
+                          }
+                          screenfull.toggle(element)
+
+                      },
+                  }
+              },
           },
-          axisLine: {
-            show: false
+          color: color,
+          tooltip: {
+              trigger: 'item',
+          },
+          grid: {
+              borderWidth: 0,
+              top: '5%',
+              left: '2%',
+              right: '2%',
+              bottom: '0%',
+              containLabel: true
           },
+          xAxis: [{
+              type: 'value',
+              axisTick: {
+                  show: false
+              },
+              axisLine: {
+                  show: false
+              },
           splitLine: {
             show: false
           },

echarts-screen/src/components/Newly.vue

@@ -1,28 +1,23 @@
-<!--
- 描述: 发展历程
- 作者: Jack Chen
- 日期: 2020-05-09
--->
-
 <template>
   <div class="Newly-container">
-    <div class="tabs"> 
-      <ul class="tab-tilte">
-        <li v-for="(itemTit, index) in tabTitle" @mouseover="handleMouseOver(index)" @mouseout="handleMouseOut(index)" :class="{active: cur == index}">
-          {{ itemTit }}
-        </li>
-      </ul>
-      <div class="indicatorDots">
-        <span :class="{active: cur == i}" v-for="(v, i) in tabTitle" :key="i"></span>
-      </div>
-      <div class="tab-content">
-        <div v-for="(itemCon, index) in tabCon" v-show="cur == index">
-          <div v-for="(v, i) in itemCon" :key="i" class="content">
-            {{ v }}
+      <div class="tabs">
+          <ul class="tab-tilte">
+              <li v-for="(itemTit, index) in tabTitle" @mouseover="handleMouseOver(index)"
+                  @mouseout="handleMouseOut(index)" :class="{active: cur == index}">
+                  {{ itemTit }}
+              </li>
+          </ul>
+          <div class="indicatorDots">
+              <span :class="{active: cur == i}" v-for="(v, i) in tabTitle" :key="i"></span>
+          </div>
+          <div class="tab-content">
+              <div v-for="(itemCon, index) in tabCon" v-show="cur == index">
+                  <div v-for="(v, i) in itemCon" :key="i" class="content">
+                      {{ v }}
+                  </div>
+              </div>
           </div>
-        </div>
       </div>
-    </div>   
   </div>
 </template>
 
@@ -114,9 +109,9 @@ export default {
         -o-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;
-        &.active{
-          background: linear-gradient(to right, #1b81bc, 20%, #24c4ff);
-          color: #fff;
+        &.active {
+            background-image: linear-gradient(to right, #1b81bc, 20%, #24c4ff);
+            color: #fff;
         }
       }
     }

echarts-screen/src/components/RoseCon.vue

@@ -5,21 +5,50 @@
 </template>
 
 <script>
+  import screenfull from 'screenfull'
 export default {
   name: "RoseCon",
   data() {
     return {
-
+      fullscreen: false
     }
   },
   mounted() {
+    let myChart = echarts.init(document.getElementById('chart_right2'));
     this.getEchartRight2();
+    window.addEventListener('resize', () => {
+      myChart.resize()
+    })
   },
   methods: {
+    reload() {
+      this.$router.go(0);
+    },
     getEchartRight2() {
       let myChart = echarts.init(document.getElementById('chart_right2'));
       let option = {
         color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05', '#4465fc'],
+        toolbox: {
+          feature: {
+            mytool: {
+              show: true,
+              title: "全屏",
+              icon: 'path://M181 357.5V181.2h176.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c0-14.3-11.6-25.9-25.9-25.9H118c-11 0-20 9-20 20v239.4c0 14.3 11.6 25.9 25.9 25.9H155c14.4-0.1 26-11.7 26-26.1zM668.6 181.2H845v176.4c0 14.3 11.6 25.9 25.9 25.9H902c14.3 0 25.9-11.6 25.9-25.9V118.2c0-11-9-20-20-20H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 26 25.9 26zM357.4 845.2H181V668.8c0-14.3-11.6-25.9-25.9-25.9H124c-14.3 0-25.9 11.6-25.9 25.9v239.4c0 11 9 20 20 20h239.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c-0.1-14.4-11.7-26-26-26zM845 668.8v176.4H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 25.9 25.9 25.9H908c11 0 20-9 20-20V668.8c0-14.3-11.6-25.9-25.9-25.9H871c-14.4 0-26 11.6-26 25.9z',
+              onclick: function () {
+                const element = document.getElementById('chart_right2');
+                if (!screenfull.isEnabled) {//判断是否支持全屏
+                  this.$message({
+                    message: '您的浏览器暂时不支持全屏切换',
+                    type: 'warning'
+                  })
+                  return false
+                }
+                screenfull.toggle(element)
+
+              },
+            }
+          },
+        },
         tooltip: {
           trigger: 'item',
           formatter: '{b} : {c} ({d}%)'
@@ -185,20 +214,23 @@ export default {
 
       myChart.setOption(option, true);
       window.addEventListener('resize', () => {
-        myChart.resize();
+        // myChart.resize();
       });
     },
   },
   beforeDestroy() {
-
   }
 };
 </script>
 
 <style lang="scss" scoped>
 .RoseCon-container {
+  width: 100%;
+  position: relative;
+
   .chart {
+    display: block;
     height: 3rem;
   }
 }
-</style>
+</style>

echarts-screen/src/components/TrendCon.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div class="TrendCon-container">
     <div class="chart" id="chart_left3"></div>
@@ -6,40 +5,30 @@
 </template>
 
 <script>
-export default {
-  name: "TrendCon",
-  data() {
-    return {
+  import screenfull from "screenfull";
 
-    }
-  },
-  mounted() {
-    this.getEchartLeft3();
-  },
-  methods: {
-    getEchartLeft3() {
-      let myChart = echarts.init(document.getElementById('chart_left3'));
-      let dataC1 =[2630, 16402,26343,38874,43352,55475,22263,19097,1872,140,1836,936,];
-      let dataC2 =[5794, 21558,24702,16067,2358,5206,502,421,62,7,1,1,]
-      let dataC3 =[2761, 17238,28060,44730,78630,75993,80813,80904,83824,84507,87457,90271,]
+  export default {
+    name: "TrendCon",
+    data() {
+      return {}
+    },
+    mounted() {
+      this.getEchartLeft3();
+    },
+    methods: {
+      getEchartLeft3() {
+        let myChart = echarts.init(document.getElementById('chart_left3'));
+        let dataC1 = [2630, 16402, 26343, 38874, 43352, 55475, 22263, 19097, 1872, 140, 1836, 936,];
+        let dataC2 = [5794, 21558, 24702, 16067, 2358, 5206, 502, 421, 62, 7, 1, 1,]
+        let dataC3 = [2761, 17238, 28060, 44730, 78630, 75993, 80813, 80904, 83824, 84507, 87457, 90271,]
 
-      var xData = function() {
-        var data = [];
+        var xData = function () {
+          var data = [];
         for (var i = 1; i < 12; i++) {
           data.push(i + "月");
         }
         return data;
       }();
-
-      // for(var i = 0;i<xData.length;i++){
-      //   dataC1.splice(i,1,{name:xData[i],value:dataC1[i]});
-      //   dataC2.splice(i,1,{name:xData[i],value:dataC2[i]});
-      //   dataC3.splice(i,1,{name:xData[i],value:dataC3[i]});
-      // }
-      // console.log(dataC1);
-      // console.log(dataC2);
-      // console.log(dataC3);
-
       // var fontColor = '#30eee9';
       let option = {
         // backgroundColor: '#11183c',
@@ -51,7 +40,7 @@ export default {
           containLabel: true
         },
         tooltip: {
-          trigger: 'axis',
+          trigger: 'item',
           axisPointer: {
             type: 'shadow',
             lineStyle: {
@@ -59,6 +48,27 @@ export default {
             }
           }
         },
+        toolbox: {
+          feature: {
+            mytool: {
+              show: true,
+              title: "全屏",
+              icon: 'path://M181 357.5V181.2h176.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c0-14.3-11.6-25.9-25.9-25.9H118c-11 0-20 9-20 20v239.4c0 14.3 11.6 25.9 25.9 25.9H155c14.4-0.1 26-11.7 26-26.1zM668.6 181.2H845v176.4c0 14.3 11.6 25.9 25.9 25.9H902c14.3 0 25.9-11.6 25.9-25.9V118.2c0-11-9-20-20-20H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 26 25.9 26zM357.4 845.2H181V668.8c0-14.3-11.6-25.9-25.9-25.9H124c-14.3 0-25.9 11.6-25.9 25.9v239.4c0 11 9 20 20 20h239.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c-0.1-14.4-11.7-26-26-26zM845 668.8v176.4H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 25.9 25.9 25.9H908c11 0 20-9 20-20V668.8c0-14.3-11.6-25.9-25.9-25.9H871c-14.4 0-26 11.6-26 25.9z',
+              onclick: function () {
+                const element = document.getElementById('chart_left3');
+                if (!screenfull.isEnabled) {//判断是否支持全屏
+                  this.$message({
+                    message: '您的浏览器暂时不支持全屏切换',
+                    type: 'warning'
+                  })
+                  return false
+                }
+                screenfull.toggle(element)
+
+              },
+            }
+          },
+        },
         legend: {
           data: ['现有确诊', '现有疑似', '累计确诊'],
           itemWidth: 20,

echarts-screen/src/components/index.js

@@ -1,17 +1,19 @@
 import Newly from "./Newly";
-import RoseCon from './RoseCon' // 客户分布
+import RoseCon from './RoseCon'
 import TrendCon from "./TrendCon";
-import PieCon from './PieCon' // 发展历程
+import PieCon from './PieCon'
 import CityRank from "./CityRank";
 import wordCloud from "./wordCloud";
+import test from "./test";
 
 const components = {
-  RoseCon,
-  PieCon,
-  TrendCon,
-  Newly,
-  CityRank,
-  wordCloud
+    RoseCon,
+    PieCon,
+    TrendCon,
+    Newly,
+    CityRank,
+    wordCloud,
+    test,
 };
 
 const install = (Vue = {}) => {

echarts-screen/src/components/wordCloud.vue

@@ -1,21 +1,22 @@
 <template>
-  <div class="word-container"> 
+  <div class="word-container" id="wordcloud">
     <div class="chart" id="chart_right1"></div>
   </div>
 </template>
 
 <script>
-import '@/assets/js/echarts-wordcloud.min'
+  import '@/assets/js/echarts-wordcloud.min'
+  import screenfull from "screenfull";
 
-export default {
-  name: "wordCloud",
-  data() {
-    return {
-      timer: null
-    }
-  },
-  mounted() {
-    this.getEchartRight1();
+  export default {
+    name: "wordCloud",
+    data() {
+      return {
+        timer: null
+      }
+    },
+    mounted() {
+      this.getEchartRight1();
     this.timer = setInterval(() => {
       this.getEchartRight1();
     }, 5000)
@@ -24,9 +25,26 @@ export default {
     getEchartRight1() {
       let myChart = echarts.init(document.getElementById('chart_right1'));
       let option = {
-        // tooltip: {
-        //   show: false
-        // },
+        toolbox: {
+          feature: {
+            mytool: {
+              show: true,
+              title: "全屏",
+              icon: 'path://M181 357.5V181.2h176.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c0-14.3-11.6-25.9-25.9-25.9H118c-11 0-20 9-20 20v239.4c0 14.3 11.6 25.9 25.9 25.9H155c14.4-0.1 26-11.7 26-26.1zM668.6 181.2H845v176.4c0 14.3 11.6 25.9 25.9 25.9H902c14.3 0 25.9-11.6 25.9-25.9V118.2c0-11-9-20-20-20H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 26 25.9 26zM357.4 845.2H181V668.8c0-14.3-11.6-25.9-25.9-25.9H124c-14.3 0-25.9 11.6-25.9 25.9v239.4c0 11 9 20 20 20h239.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c-0.1-14.4-11.7-26-26-26zM845 668.8v176.4H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 25.9 25.9 25.9H908c11 0 20-9 20-20V668.8c0-14.3-11.6-25.9-25.9-25.9H871c-14.4 0-26 11.6-26 25.9z',
+              onclick: function () {
+                const element = document.getElementById('chart_right1');
+                if (!screenfull.isEnabled) {//判断是否支持全屏
+                  this.$message({
+                    message: '您的浏览器暂时不支持全屏切换',
+                    type: 'warning'
+                  })
+                  return false
+                }
+                screenfull.toggle(element)
+              },
+            }
+          },
+        },
         series: [{
           type: 'wordCloud',
           gridSize: 1,
@@ -54,8 +72,6 @@ export default {
             },
             emphasis: {
               fontSize: 20,
-              // shadowBlur: 10,
-              // shadowColor: 'rgba(255,255,255, .1)'
             }
           },
           data: [{

echarts-screen/src/main.js

@@ -3,11 +3,15 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import Vcomp from './components/index'
+import fullscreen from 'vue-fullscreen'
+import screenfull from "screenfull";
 
 import '@/assets/styles/base.scss'
 import '@/assets/styles/common.scss'
 
 Vue.use(Vcomp)
+Vue.use(fullscreen)
+Vue.use(screenfull)
 
 Vue.config.productionTip = false
 

echarts-screen/src/router/index.js

@@ -1,17 +1,29 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import Brand from "@/views/Brand";
 
 Vue.use(VueRouter)
 
 const routes = [
-  {
-    path: '/',
-    name: 'Brand',
-    component: () => import('@/views/Brand.vue'),
-    meta: {
-      title: '疫情数据分析'
+    {
+        path: '/',
+        name: 'Brand',
+        component: () => import('@/views/Brand'),
+        meta: {
+            title: '疫情数据分析'
+        }
+    },
+    {
+        path: '/home',
+        name: 'Home',
+        component: () => import('@/views/Home')
+    },
+    {
+        path: '/about',
+        name: 'About',
+        component: () => import('@/views/About')
     }
-  }
+
 ]
 
 const router = new VueRouter({

echarts-screen/src/views/About.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <PieCon/>
+    <test style="border: 2px solid black"/>
   </div>
 </template>
 
 <script>
   export default {
-    name: 'About'
+    name: 'About',
   }
 </script>
 <style>

echarts-screen/src/views/Brand.vue

@@ -11,17 +11,17 @@
                 <div class="showTime">
                     <span class="time">{{ nowTime }}</span>
                     <span class="date">
-            <span>{{ week }}</span>
-            <span>{{ date }}</span>
-          </span>
+                        <span>{{ week }}</span>
+                        <span>{{ date }}</span>
+                    </span>
                 </div>
             </header>
 
             <section class="mainbox">
                 <div class="item left">
                     <div class="panel">
-                        <h2>海外累计病例排行</h2>
-                        <CityRank/>
+                        <h2>国内累计病例排行</h2>
+                        <CityRank></CityRank>
                         <div class="panel-footer"></div>
                     </div>
                     <div class="panel">
@@ -10136,6 +10136,7 @@
                         margin-bottom: 0.1875rem;
 
                         &:before {
+                            display: flex;
                             position: absolute;
                             top: 0;
                             left: 0;

echarts-screen/src/views/Home.vue

@@ -7,12 +7,10 @@
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+
 
 export default {
   name: 'Home',
-  components: {
-    HelloWorld
-  }
+  components: {}
 }
 </script>