## **一，生成组件结构** 新建vue页面，输入**comt**回车 页面名以hs开头，最外层class名与文件名相同，且css以该class为命名空间。 ``` <!--    @pageName：组件中文名   @author：开发者   @date: 2020-08-20 16:35   @params：参数或slot   @event：事件   @note：说明 --> <template>   <div class='hs-a'>     {{data}}   </div> </template> <script type='textecmascript-6'> export default {   data(){     return {       data:'a'     }   },   created(){   },   methods:{    /*******************************************接口************************************************************ */    /*******************************************事件************************************************************ */    /*******************************************方法************************************************************ */    /*******************************************其它************************************************************ */   }, } </script> <style lang='scss' scoped> .hs-a{   width: 100%; } </style> ``` - 说明 1.在UI设计图完成后，从应用的所有页面中抽离出功能样式相近或相似的模块，给组件命名，功能要求，提供可参考的现有组件（包括第三方库） 2.每个页面都应用由很多公共组件组成，数据驱动型组件应用与外界无关，仅通过porop接收，$emit发送数据。 组件内不调用接口，不接收变更全局变量，状态管理，以解耦组件之间的关系 组件内部变量，方法，函数自产自消 公共组件可引用公共组件或公共工具类 公共组件应尽量预留slot 项目主要使用vant(H5端)，element-ui(PC端)组件库，绝大多情况下应使用并将这两个组件库的组件封装成自己的组件，并写注释 3.组件名以hy开头，最外层class名与文件名相同，且css以该class为命名空间