## **一，生成頁面結構** 新建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文件獲取并處理數據再返回到頁面中