Vue 代码优化：将 HTML 代码转换为 Vue 组件

<p>&quot;<template>\n  <div>\n    <div class="Polaris-Layout__Section Polaris-Layout__Section--oneHalf">\n      <div class="Polaris-Card">\n        <div class="Polaris-Card__Section">\n          <div class="Polaris-Stack Polaris-Stack--vertical Polaris-Stack--spacingTight">\n            <div class="Polaris-Stack__Item">\n              <h2 class="Polaris-Heading">追购总收入</h2>\n            </div>\n            <div class="Polaris-Stack__Item">\n              <div class="Polaris-Stack Polaris-Stack--distributionEqualSpacing">\n                <div class="Polaris-Stack__Item">\n                  <span class="Polaris-TextStyle--variationStrong">\n                    <p id="upselltotalOrderAmount2" class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">{{ upselltotalOrderAmount }}</p>\n                  </span>\n                </div>\n                <div class="Polaris-Stack__Item">\n                  <div class="sc-1annaye-0 zMMfK" style="color: rgb(69, 79, 91);">\n                    <p class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">\n                      <span class="Polaris-TextStyle--variationStrong"></span>\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <br>\n          <h3 aria-label="Revenue over time" class="Polaris-Subheading">随时间变化的收入</h3>\n        </div>\n        <div style="margin-bottom: 0.75rem;">\n          <div id="lineChart2" style="width: 500px; height: 300px;"></div>\n        </div>\n      </div>\n    </div>\n    <div class="Polaris-Layout__Section Polaris-Layout__Section--oneThird">\n      <div class="Polaris-Card">\n        <div class="Polaris-Card__Section">\n          <div class="Polaris-Stack Polaris-Stack--vertical Polaris-Stack--spacingTight">\n            <div class="Polaris-Stack__Item">\n              <h2 class="Polaris-Heading">总订单数</h2>\n            </div>\n            <div class="Polaris-Stack__Item">\n              <div class="Polaris-Stack Polaris-Stack--distributionEqualSpacing">\n                <div class="Polaris-Stack__Item">\n                  <span class="Polaris-TextStyle--variationStrong">\n                    <p  id='orderCount2' class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">{{ orderCount }}</p>\n                  </span>\n                </div>\n                <div class="Polaris-Stack__Item">\n                  <div class="sc-1annaye-0 zMMfK" style="color: rgb(69, 79, 91);">\n                    <p class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">\n                      <span class="Polaris-TextStyle--variationStrong"></span>\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <br>\n          <h3 aria-label="Order over time" class="Polaris-Subheading">随时间变化的订单</h3>\n        </div>\n        <div style="margin-bottom: 0.75rem;">\n          <div id="lineChart3" style="width: 350px; height: 300px;"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n export default {\n  name: 'Home',\n  data() {\n    return {\n      upselltotalOrderAmount: '$0',\n      orderCount: 0\n    }\n  }\n}\n</script>\n\n<style>\n@import '../style.css'; \n</style>\n</p>