## **一，生成页面结构** 新建vue页面，输入**page**回车 页面名以page开头，最外层class名与文件名相同，且css以该class为命名空间。 ``` <!--    @pageName：组件中文名   @author：开发者   @date: 2020-08-20 16:35   @params：参数或slot   @event：事件   @note：说明 --> <template>   <div class='page-a'>     {{data}}   </div> </template> <script type='textecmascript-6'> export default {   data(){     return {       data:'a'     }   },   created(){   },   methods:{    /*******************************************接口************************************************************ */    /*******************************************事件************************************************************ */    /*******************************************方法************************************************************ */    /*******************************************其它************************************************************ */   }, } </script> <style lang='scss' scoped> .page-a{   width: 100%;   height: 100%; } </style> ``` ## **二，功能** - 页面布局 - 引用公共组件 - 状态管理 - 调用接口文件（INTERFACE.js） - 路由和事件等 说明：业务组件主要是做页面布局，调用公共组件，调用接口，管理状态等，具体实现放至公共组件中实现。 业务组件需要将接口调用单独提取到INTERFACE.js文件中，INTERFACE.js文件获取并处理数据再返回到页面中