页面的head部分，需引入页面元素的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，需设置好计算器各种按键的容器和内容，代码如下：

<div id="app">
  <div class="calculator">
    <div class="display">{{ display }}</div>
    <h1 class="brand">{{ appTitle }}</h1>
    <div class="keyboard"> 
      <div class="panel-a">
        <div class="top-buttons">
          <button class="btn primary" @click="clear"> <span>C  </span></button>
          <button class="btn" @click="setNumber('.')"><span>.</span></button>
        </div>
        <div class="numbers">
          <button class="btn" @click="setNumber('9')"><span>9</span></button>
          <button class="btn" @click="setNumber('8')"><span>8</span></button>
          <button class="btn" @click="setNumber('7')"><span>7</span></button>
          <button class="btn" @click="setNumber('6')"><span>6</span></button>
          <button class="btn" @click="setNumber('5')"><span>5</span></button>
          <button class="btn" @click="setNumber('4')"><span>4</span></button>
          <button class="btn" @click="setNumber('3')"><span>3</span></button>
          <button class="btn" @click="setNumber('2')"><span>2</span></button>
          <button class="btn" @click="setNumber('1')"><span>1</span></button>
          <button class="btn" @click="setNumber('0')"><span>0</span></button>
        </div>
      </div>
      <div class="panel-b">
        <button class="btn" @click="operator= '+'"> <span>+</span></button>
        <button class="btn" @click="operator= '-'"> <span>-</span></button>
        <button class="btn" @click="operator= '*'"> <span>*</span></button>
        <button class="btn" @click="operator= '/'"> <span>/</span></button>
        <button class="btn primary" @click="calculate"> <span>=</span></button>
      </div>
    </div>
  </div>
</div>

页面的底部，需远程调用VUE库，并引入必要的JS文件，代码如下：

<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>