1.elementui-vue实现curd 

（1）引入js及css

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<!--引入elementui的js前必须引入vue的js-->
<script type="text/javascript" src="js/index.js"></script>
<link type="text/css" rel="stylesheet" href="css/index.css">

（2）在body里定义一个div

<div id="app">

    <el-form :inline="true" :model="queryStudent" class="demo-form-inline">
        <el-form-item label="ID">
            <el-input v-model="queryStudent.sid" placeholder="请输入ID"></el-input>
        </el-form-item>
        <el-form-item label="学生姓名">
            <el-input v-model="queryStudent.sname" placeholder="请输入学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="班级名称">
            <el-input v-model="queryStudent.cname" placeholder="请输入班级名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="initTable()">查询</el-button>
            <el-button type="danger" @click="batchDel">批量删除</el-button>
            <el-button type="success" @click="addStu(true)">添加学生</el-button>
        </el-form-item>

        <el-table
                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="sid"
                    label="学生ID">
            </el-table-column>
            <el-table-column
                    prop="sname"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="aclass.cname"
                    label="班级名称">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="warning" icon="el-icon-edit" size="small" @click="edit(scope.row)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <!--修改数据-->
        <el-dialog
                title="修改学生信息"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form :model="editStudentFrom" :model="cname" label-width="100px" class="demo-ruleForm">
                <el-form-item label="学生姓名" prop="sname">
                    <el-input v-model="editStudentFrom.sname"></el-input>
                </el-form-item>
                <el-form-item label="学生年龄" prop="age">
                    <el-input v-model="editStudentFrom.age"></el-input>
                </el-form-item>
                <el-form-item label="学生班级" prop="cname">
                    <el-select v-model="editStudentFrom.cid" placeholder="请输入学生班级">
                        <el-option
                                v-for="item in editAClassFrom"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="editFrom(false)">取消</el-button>
    <el-button type="primary" @click="editFrom(true)">修改</el-button>
  </span>
        </el-dialog>

        <!--添加数据-->
        <el-dialog
                title="添加学生信息"
                :visible.sync="addStuData"
                width="30%">
            <el-form :model="addStuFrom" label-width="100px" class="demo-ruleForm">
                <el-form-item label="学生姓名" prop="sname">
                    <el-input v-model="addStuFrom.sname"></el-input>
                </el-form-item>
                <el-form-item label="学生年龄" prop="age">
                    <el-input v-model="addStuFrom.age"></el-input>
                </el-form-item>
                <el-form-item label="学生班级" prop="cname">
                    <el-select v-model="addStuFrom.cid" placeholder="请输入学生班级">
                        <el-option
                                v-for="item in addAClassFrom"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="addForm(false)">取消</el-button>
    <el-button type="primary" @click="addForm(true)">添加</el-button>
  </span>
        </el-dialog>
</div>

（3）创建vue对象

element-ui + axios后台获取数据 

<div id="app">

    <el-form :inline="true" :model="queryStudent" class="demo-form-inline">
        <el-form-item label="ID">
            <el-input v-model="queryStudent.sid" placeholder="请输入ID"></el-input>
        </el-form-item>
        <el-form-item label="学生姓名">
            <el-input v-model="queryStudent.sname" placeholder="请输入学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="班级名称">
            <el-input v-model="queryStudent.cname" placeholder="请输入班级名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="initTable()">查询</el-button>
            <el-button type="danger" @click="batchDel">批量删除</el-button>
            <el-button type="success" @click="addStu(true)">添加学生</el-button>
        </el-form-item>

        <el-table
                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="sid"
                    label="学生ID">
            </el-table-column>
            <el-table-column
                    prop="sname"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="aclass.cname"
                    label="班级名称">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="warning" icon="el-icon-edit" size="small" @click="edit(scope.row)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <!--修改数据-->
        <el-dialog
                title="修改学生信息"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form :model="editStudentFrom" :model="cname" label-width="100px" class="demo-ruleForm">
                <el-form-item label="学生姓名" prop="sname">
                    <el-input v-model="editStudentFrom.sname"></el-input>
                </el-form-item>
                <el-form-item label="学生年龄" prop="age">
                    <el-input v-model="editStudentFrom.age"></el-input>
                </el-form-item>
                <el-form-item label="学生班级" prop="cname">
                    <el-select v-model="editStudentFrom.cid" placeholder="请输入学生班级">
                        <el-option
                                v-for="item in editAClassFrom"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="editFrom(false)">取消</el-button>
    <el-button type="primary" @click="editFrom(true)">修改</el-button>
  </span>
        </el-dialog>

        <!--添加数据-->
        <el-dialog
                title="添加学生信息"
                :visible.sync="addStuData"
                width="30%">
            <el-form :model="addStuFrom" label-width="100px" class="demo-ruleForm">
                <el-form-item label="学生姓名" prop="sname">
                    <el-input v-model="addStuFrom.sname"></el-input>
                </el-form-item>
                <el-form-item label="学生年龄" prop="age">
                    <el-input v-model="addStuFrom.age"></el-input>
                </el-form-item>
                <el-form-item label="学生班级" prop="cname">
                    <el-select v-model="addStuFrom.cid" placeholder="请输入学生班级">
                        <el-option
                                v-for="item in addAClassFrom"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="addForm(false)">取消</el-button>
    <el-button type="primary" @click="addForm(true)">添加</el-button>
  </span>
        </el-dialog>
</div>

2.安装nodejs服务器

写好的vue工程 --- 把我们的工程部署到该服务器上。

== 注意：不要安装到中文目录下或者空格目录下==

 node服务器安装

3.安装vue脚手架--vue-cli

可以帮你创建vue工程  --- 标准的

 验证是否成功

3.使用vue脚手架创建vue工程

 创建好vue工程后进入如下界面

 3.2安装相关的插件以及依赖

 安装axios

3.3使用webstorm打开vue工程 

 3.4在webstorm中启动vue工程

路径一定要保证: vue工程路径

npm run serve