第二章：书写Vue组件

第一步：在sa-view目中新建模块ddusers，新建一个vue组件ddusers-add.vue，注意引入其他vue组件的方式，不再是import，而是使用httpVueLoader来进行引入。

<template>
    <div>
        <el-input v-model="param.name" placeholder="姓名"></el-input>
        <el-input v-model="param.dept" placeholder="部门"></el-input>
        <sa-item type="text" name="普通参数" v-model="param.name" br></sa-item>
        <el-button type="primary" @click="add()" round>提交</el-button>
    </div>
</template>
<script>
    //这里要使用module.exports，而不是export default
    module.exports = {
        name: "ddusers-add",
        components: {
            //无论是在html还是vue组件中，引入子组件都要使用httpVueLoader的形式。
            "sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),
        },
        //这里要使用函数的方式，而不是JSON
        data: function () {
            return {
                param: {
                    name: "",
                    dept: "",
                }
            }
        },
        methods: {
            add: function () {
                sa.alert(JSON.stringify(this.param))
            }
        }
    }
</script>

<style scoped>

</style>

第二步：添加导航栏，找到sa-frame目录下的menu-list.js文件

 添加一栏导航，将我们第一步写好的组件地址配置进去

访问localhost:8080/index.html或者直接用浏览器访问index.html页面，可以看到我们的组件已经成功添加到导航栏并访问成功了。