vue基础页面模板

<template>
    <!--页面元素-->
    <div id="page">
      <div class="demo">{{data}}</div>
      <ComponentsDemo></ComponentsDemo>
    </div>
</template>

<script>
  import {demoApi} from '@/services/api' // 接口引用
  import ComponentsDemo from './ComponentsDemo' // 组件引用
  export default {
    name: "demo",
    components: { // 组件定义
      ComponentsDemo
    },
    data() {
      return { // 数据
        data: 'demo'
      }
    },
    mounted() { // 生命周期：页面煊染后执行
      this.initPage()
    },
    methods: { // 函数方法，默认不执行，需调用
      initPage() {
        console.log('hello world!')
        this.handleData()
      },
      handleData() {
        // 接口请求
        let para = {
          page: 1
        }
        demoApi(para).then(res => {
          if (res.code === 200) {
            this.data = res.data
          }
        }).catch(() => {
        })
      }
    }
  }
</script>

<style scoped>
  /*样式*/
  .demo{
    font-size: 12px;
  }
</style>