vue写组件流程

vue写组件流程

(一) 下载框架

可以github上下载一个通用应用框架，比如vue-element-admin、vue2-elm等大型应用，或者 VuePress Vue 驱动的静态网站生成器上手一下。

(二) 修改路由

以vue-element-admin的路由为例，使之能转跳我们想写的页面。教程

(三) 设计组件

参照Element UI 设计好布局，继而设计组件。

1. 先想好页面data，需要数据是什么样的

2. 编辑下面代码脚手架

<template>
    <div >                                                                                          //  vue模板只允许有一个div
        <el-container>
            <el-main>
                <leftList />
                <rightShow />
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'                               //  类似python的导入import，模块化
    import Pagination from '@/全局组件/分页栏'

    import leftList from './内部组件/左侧列表'               //  引入其他组件，
    import rightShow from './内部组件/右侧显示'        //  引入其他组件，
    import { getFace } from '../内部接口/file'                  // 引入方法

    export default {
        name: 'module_name',
        components: {                                                                   //组件上方标签可用 <leftList />
            leftList,   
            rightShow,
            Pagination
        },
        data() {                                                                                   //  MVVM 架构，前端数据
            return {    
                data: [],                                                                          // 注意是冒号定义，并非等号
            }
        },
        props:{                                                                                   //  property 单词：财产、属性      
            father2child:{type:Array,required:true}              //   父传子,赋属性
        },
        created(){                                                                             //   初始化组件的方法
        },
        watch:{                                                                                  //   watch 坚持变量变动的方法
            data(e){
                //方法
            }
        },
        methods:{
            get_lib_list(){
                getLib().then(response =>{           //  requess.then方法 ,  异步保证页面流畅不卡  
                    this.get_zero(response)            //单词 response :承诺（网络请求承诺返回,后刷新数据流,导致渲染页面）
                })
            },
            //方法
            done(){
                this.$emit("done",value)                                     //   子传父,更状态,父：@done="函数方法", 承接状态。
            },
        }
    }
</script>

<style>                                                                                          /* 样式 */
    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }
</style>

3. 根据自己所需填充相应逻辑

(四) 注意

1-var，let，const定义区别及实例 js变量定义的区别 (全局作用域和函数作用域、块级作用域。var 不出花括号)