通常的VUE項目，是前后端分離的項目。那么如何在現有的JSP項目中集成VUE呢？
1.在JSP中引入vue和elementUI
在<script></script>中引入js,在<link/>中引入css
示例：
<%-- theme-chalk.css是elementui的css，需要第一個引用 --%>
<link rel="stylesheet" href="static/css/theme-chalk.css">
<script type="text/javascript" src="static/js/vue.min.js"></script>
<script type="text/javascript" src="static/js/vue-resource.min.js"></script>
<script type="text/javascript" src="static/js/vue-router.js"></script>
<script type="text/javascript" src="static/js/element-ui.js"></script>
<script type="text/javascript" src="static/js/moment.js"></script>
<script type="text/javascript" src="static/js/axios.js"></script>
對應版本在https://www.bootcdn.cn/中下載（js在bootcdn中下載，類似的jar在maven倉庫下載）。
下載好之后導入項目中
以vue為例：先在https://www.bootcdn.cn/中搜vue，隨便選擇一個版本，復制鏈接然后在新窗口打開鏈接，就可以得到js代碼，然后在項目中新建一個js文件，把代碼粘貼進去即可。
css同理！
代碼片段：JSP文件代碼
<%-- Created by IntelliJ IDEA. User: pp Date: 2019/3/13 Time: 20:47 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <html> <head> <title>員工列表</title> <%-- theme-chalk.css是elementui的css，需要第一個引用 --%> <link rel="stylesheet" href="static/css/theme-chalk.css"> <script type="text/javascript" src="static/js/vue.min.js"></script> <%-- Vue 要實現異步加載需要使用到 vue-resource 庫。--%> <script type="text/javascript" src="static/js/vue-resource.min.js"></script> <script type="text/javascript" src="static/js/vue-router.js"></script> <script type="text/javascript" src="static/js/element-ui.js"></script> <script type="text/javascript" src="static/js/moment.js"></script> <%-- axios.js這是引入的axios基於promise 的 HTTP 庫，可以用axios請求 其實不引入也行 上面的vue-resource.min.js也已經可以用 this.$http.post()｜｜this.$http.get()請求 " --%> <script type="text/javascript" src="static/js/axios.js"></script> </head> <body> <div id="pageInfo"> <div style="display: flex; flex-direction: column"> <div style="height: 80px;margin: 30px 40px 0px 40px; display: flex"> <div style="flex: 1;display: flex"> <span style="flex: 2; padding: 0px 30px 0px 20px"> <el-input v-model="input" placeholder="請輸入姓名"></el-input> </span> <span style="flex: 1"> <el-button type="success">搜索</el-button> </span> </div> <div style="flex: 1; padding-left: 30px"> <el-button @click="add()" type="primary">新增</el-button> <el-button @click="batchDelete()" type="danger">批量刪除</el-button> </div> </div> <div style="flex: 1;margin: 10px 40px 40px 40px; "> <template> <el-table :data="pageInfo" style="width: 100%" @selection-change="selectionChangeHandle" > <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="empName" label="姓名" width="180"> </el-table-column> <el-table-column prop="email" label="email" width="180"> </el-table-column> <el-table-column prop="gender" label="性別" width="180"> </el-table-column> <el-table-column prop="department.deptName" label="部門" width="180"> </el-table-column> </el-table> </template> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"> </el-pagination> </div> </div> <%-- 新增彈框--%> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" > <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="姓名"> <el-input v-model="form.empName"></el-input> </el-form-item> <el-form-item label="email"> <el-input v-model="form.email"></el-input> </el-form-item> <el-form-item label="性別"> <el-input v-model="form.gender"></el-input> </el-form-item> <el-form-item label="部門"> <el-select v-model="form.dId" placeholder="請選擇部門"> <el-option label="測試部" value=1></el-option> <el-option label="開發部" value=2></el-option> </el-select> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="subFrom">確 定</el-button> </span> </el-dialog> </div> <script> var vue = new Vue({ el: '#pageInfo', data: { pageInfo: [], selectionChangeHandles:[], pageIndex: 1, pageSize: 10, totalPage: 0, currentPage1:1, dialogVisible: false, depts: {}, form: { empId: '', empName: '', email: '', gender: '', dId: '', }, input:'' }, created: function () { this.getPageInfo() }, methods: { getPageInfo(){ //vue的請求 this.$http.get(`employee/emps`,{ params: { 'pn':this.pageIndex, 'limit': this.pageSize, } }).then(function (result) { this.pageInfo = result.body.pageInfo.list; this.totalPage = result.body.pageInfo.total this.pageInfo.forEach(data =>{ if (data.gender == 'M') { data.gender = '男'; } else if (data.gender == 'F') { data.gender = '女'; } }) }); }, // 當前頁 currentChangeHandle (val) { this.pageIndex = val this.getPageInfo() }, // 每頁數 sizeChangeHandle (val) { this.pageSize = val this.pageIndex = 1 this.getPageInfo() }, // 多選 selectionChangeHandle (val) { this.selectionChangeHandles = val }, batchDelete(){ let arr =[] this.selectionChangeHandles.forEach(data=>{ console.log("this",data.empId) arr.push(data.empId) }) let data = {"ids": arr} //這是用的axios請求 axios.post(`employee/batchDelete`, data).then(function (response) { if(response.code ==200){ this.$message({ message: '操作成功', type: 'success', }) } }) .catch(function (error) { console.log(error); }); this.getPageInfo() }, add(){ this.dialogVisible = true }, subFrom(){ this.dialogVisible = false this.$http.post(`employee/emp`,this.form).then(function (result) { if(result.code ==200){ this.$message({ message: '操作成功', type: 'success', }) } this.getPageInfo() }); }, empUpdate: function (id) { $(function () { $('#empAdd').modal({ backdrop: false }) }); $.ajax({ type: "put", url: "employee/emp/" + id, success: function (result) { //alert(result) vue.inputForm = result } }) } } }) </script> </body> </html>